一，頁面導(dǎo)航

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

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

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

1.1 聲明式導(dǎo)航

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

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

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

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

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

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

在app.json文件中

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

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

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

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

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

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

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

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

1.1.3 后退導(dǎo)航

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

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

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

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

1.2 編程式導(dǎo)航

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

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

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

對象中有四個屬性，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ù)，無論成功與否，都會執(zhí)行。

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

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

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

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

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

1.2.3 后退導(dǎo)航

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

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

1.3 導(dǎo)航傳參

如果我們實現(xiàn)頁面跳轉(zhuǎn)之后，下一個頁面想要調(diào)用前一個頁面的參數(shù)時，我們該怎么辦？

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

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

如下所示：

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

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

總結(jié)

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

最新評論