一，頁(yè)面導(dǎo)航

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

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

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

1.1 聲明式導(dǎo)航

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

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

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

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

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

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

在app.json文件中

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

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

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

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

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

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

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

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

1.1.3 后退導(dǎo)航

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

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

我們可以通過(guò)設(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è)方法來(lái)實(shí)現(xiàn)，接下來(lái)我們來(lái)一一講解。

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

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

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

其中`

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

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

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

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

對(duì)象中的參數(shù)類(lèi)型與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）方法。

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

1.3 導(dǎo)航傳參

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

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

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

如下所示：

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

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

總結(jié)

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

最新評(píng)論