一，頁面導(dǎo)航

首先，我們先來了解一下什么叫頁面導(dǎo)航，其實(shí)就是通過識(shí)別用戶點(diǎn)擊來進(jìn)行頁面的跳轉(zhuǎn)。

這一點(diǎn)有點(diǎn)類似于vue中的vue-router路由，我們可以通過<router-link>標(biāo)簽實(shí)現(xiàn)單頁面內(nèi)分頁面的渲染，只不過小程序的頁面導(dǎo)航相對(duì)來說，比較簡單。

小程序的頁面導(dǎo)航分為兩種，聲明式導(dǎo)航和編程式導(dǎo)航，話不多說，我們現(xiàn)在正式開始。

1.1 聲明式導(dǎo)航

聲明式導(dǎo)航就是利用小程序的<navigator>實(shí)現(xiàn)的，其中有url屬性，在效果上就類似瀏覽器的a超鏈接標(biāo)簽。

1.1.1 導(dǎo)航到tarBar頁面

還記得我們之前學(xué)到的tarBar是啥不，底部的導(dǎo)航欄，點(diǎn)擊后可以跳轉(zhuǎn)到相對(duì)應(yīng)的頁面，而用<navigator>也可以實(shí)現(xiàn)。

我們需要設(shè)置兩個(gè)屬性在navigator組件中，url和open-type。

url：設(shè)置需要跳轉(zhuǎn)的頁面所處的位置（頁面地址），并且前面必須由/開頭，比如——url = '/pages/content/conten'
最后一個(gè)content不需要加文件后綴。

open-type：設(shè)置navigator的跳轉(zhuǎn)方式，這里選擇值為switchTab，表示跳轉(zhuǎn)的頁面是被配置到tarBar中的。
tarBar頁面配置：

在app.json文件中

這樣我們就實(shí)現(xiàn)了點(diǎn)擊跳轉(zhuǎn)到tarBar設(shè)置的頁面中啦。

<navigator url="/pages/list/list">點(diǎn)擊跳轉(zhuǎn)</navigator>

你還可以在里面嵌套其他組件，比如嵌套一個(gè)button。

1.1.2 導(dǎo)航到非tarBar頁面

非tarBar頁面就是你在page文件夾已經(jīng)定義的頁面，但是沒有在app.json中的tarBar配置。

在實(shí)際開發(fā)中，這種場(chǎng)景也是非常多見了，一個(gè)比較復(fù)雜的小程序都會(huì)有比較多的頁面，而這么多頁面又不會(huì)都在tarBar中配置，所有這么頁面的跳轉(zhuǎn)就得靠這個(gè)方法來實(shí)現(xiàn)啦。

與上文一樣，也是需要url和open-type兩個(gè)屬性，url的寫法不變，有變化的是open-type的值需要該為navigate。

<navigator url="/pages/list/list" open-type='navigate'>
</navigator>

1.1.3 后退導(dǎo)航

<navigator>還可以實(shí)現(xiàn)頁面后退功能。

這時(shí)候我們就不用設(shè)置url屬性了，需要更改的是，設(shè)置open-type的值為navigateBack。

我們可以通過設(shè)置delta設(shè)置回退的層級(jí)，如果不設(shè)置，那么默認(rèn)值將會(huì)為1。

<navigator open-type="navigateBack" delta='1'></navigator>

1.2 編程式導(dǎo)航

編程式導(dǎo)航是利用微信小程序頂級(jí)對(duì)象wx下面的幾個(gè)方法來實(shí)現(xiàn)，接下來我們來一一講解。

1.2.1 導(dǎo)航到tarBar頁面

我們將使用wx下的switchTab(obj)方法，其中obj為對(duì)象。

對(duì)象中有四個(gè)屬性，url、success、fail、complete。

其中`

• url是需要跳轉(zhuǎn)的頁面地址
• success 是接口調(diào)用成功執(zhí)行的回調(diào)函數(shù)
• fail是接口調(diào)用失敗執(zhí)行的回調(diào)函數(shù)
• complete是完成調(diào)用執(zhí)行的回調(diào)函數(shù)，無論成功與否，都會(huì)執(zhí)行。

wx.swithTab({
	url : '/pages/list/list',
	...
	)}

1.2.2 導(dǎo)航到非tarBar頁面

實(shí)現(xiàn)該功能我們需要調(diào)用wx下的navigateTo（obj）方法。

對(duì)象中的參數(shù)類型與1.2.1一致。

wx.navigateTo({
	url : '/page/list/list',
	success : function(){console.log('success');}
	})

1.2.3 后退導(dǎo)航

這里的后退導(dǎo)航功能，同樣的我們需要用到wx頂級(jí)對(duì)象下的navigateBack（obj）方法。

不過不同的是，obj對(duì)象中的參數(shù)，url改為delta，表示會(huì)退的 層級(jí)，默認(rèn)值為1，也就是后退一頁。

1.3 導(dǎo)航傳參

如果我們實(shí)現(xiàn)頁面跳轉(zhuǎn)之后，下一個(gè)頁面想要調(diào)用前一個(gè)頁面的參數(shù)時(shí)，我們?cè)撛趺崔k？

這時(shí)候就可以用到導(dǎo)航傳參了，導(dǎo)航傳參其實(shí)和在瀏覽器中使用GET請(qǐng)求很像，可以把參數(shù)設(shè)置在url中，傳遞到下一個(gè)頁面。

在格式上也是通過鍵值對(duì)的方法，路徑跟參數(shù)之間用?隔開，鍵與值之間用=隔開，每個(gè)參數(shù)之間著用&隔開。

如下所示：

url= "/pages/list/list?name=myname&pass=yes"

今天的小程序文章到這里就結(jié)束啦，如果覺得對(duì)您有幫助的話，可以關(guān)注牛牛接下來的文章，感謝您對(duì)支持，您的支持是我創(chuàng)作的最大動(dòng)力?。?！

總結(jié)

到此這篇關(guān)于微信小程序頁面導(dǎo)航的文章就介紹到這了,更多相關(guān)微信小程序頁面導(dǎo)航內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論