這篇文章給大家分享的是有關(guān)微信小程序開發(fā)路由的使用方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

公司主營業(yè)務：成都網(wǎng)站制作、成都網(wǎng)站設計、外貿(mào)營銷網(wǎng)站建設、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出文峰免費做網(wǎng)站回饋大家。

我們通常理解的路由指分組數(shù)據(jù)包從源到目的地時，決定端到端路徑的網(wǎng)絡范圍的進程；

借用上面的定義，我們可以理解小程序頁面路由，根據(jù)路由規(guī)則（路徑）從一個頁面跳轉(zhuǎn)到另一個頁面的的規(guī)則。

通過本篇文章，你可以學習到：

1. 哪些情況會觸發(fā)頁面跳轉(zhuǎn)

2. 如何跳轉(zhuǎn)頁面

3. 頁面?zhèn)鲄?/p>

4. 頁面棧

》》》哪些情況會觸發(fā)頁面跳轉(zhuǎn)

1. 小程序啟動，初始化第一個頁面

2. 打開新頁面，調(diào)用 API wx.navigateTo 或使用組件 <navigator />

3. 頁面重定向，調(diào)用 API wx.redirectTo 或使用組件 <navigator />

4. 頁面返回，調(diào)用 API wx.navigateBack或用戶按左上角返回按鈕

5. tarbar切換

所有頁面都必須在app.json中注冊,例如：

{
   "pages": [
       "pages/index/index",
       "pages/logs/index"
   ]
}

如何跳轉(zhuǎn)頁面

1. 使用wx.navigateTo接口跳轉(zhuǎn),原頁面保留。

wx.navigateTo({
    //目的頁面地址
    url: 'pages/logs/index',
    success: function(res){},
    ...
})

1. 使用wx.redirectTo接口跳轉(zhuǎn)，關(guān)閉原頁面,不能返回。

wx.redirectTo({
    //目的頁面地址
    url: 'pages/logs/index',
    success: function(res){},
    ...
})

1. 3.使用組件<navigator />跳轉(zhuǎn)。

<navigator url="pages/logs/index" hover-class="navigator-hover">跳轉(zhuǎn)</navigator>

1. 當該組件添加redirect屬性時，等同于wx.redirectTo接口；默認redirect屬性為false，等同于wx.navigateTo接口。

2. 用戶點擊左上角返回按鈕，或調(diào)用wx.navigateBack接口返回上一頁。

wx.navigateBack({
delta: 1
})

1. delta為1時表示返回上一頁，為2時表示上上一頁，以此類推；如果dalta大于已打開的頁面總數(shù)，則返回到首頁。返回后，元界面會銷毀。

頁面跳轉(zhuǎn)傳值

其實這個很簡單,形如：

url?key=value&key1=value1

經(jīng)過測試，傳遞的參數(shù)沒有被URIEncode,傳遞中文沒有亂碼。參數(shù)長度未測試。

如何正確使用頁面跳轉(zhuǎn)

官方規(guī)定小程序最多只能有五個頁面同時存在，意思是在不關(guān)閉頁面的情況，最多新開五個頁面，頁面深度為5。

1. 對于可逆操作，使用wx.navigateTo,比如從首頁跳轉(zhuǎn)到二級頁面，從二級頁面返回是不需要重新渲染首頁

2. 對于不可逆操作，使用wx.redirectTo,比如用戶登錄成功后，關(guān)閉登錄頁面，不能返回到登錄界面。

3. 對于一些介紹性等不常用頁面wx.redirectTo或wx.navigatrBack

4. 對于類似九宮格、列表項，使用<navigator />跳轉(zhuǎn)

5. 不要在首頁使用wx.redirectTo，這樣會導致應用無法返回首頁

6. 簡化需求、簡化流程；核心功能在兩三個頁面完成便是張小龍追求『小而美』的體現(xiàn)

頁面棧

頁面棧以棧（先進后出）的形式維護頁面與頁面之間的關(guān)系；
小程序提供了getCurrentPages()函數(shù)獲取頁面棧，第一個元素為首頁，最后一個元素為當前頁面。

1. 使用wx.navigateTo每新開一個頁面，頁面棧大小加1,直到頁面棧大小為5為止；
   

2. 使用wx.navigateTo重復打開界面
   
   上圖中，假如使用wx.navigateTo從四級頁面跳轉(zhuǎn)到二級頁面，此時會在頁面棧頂添加一個與二級頁面初始狀態(tài)一樣的界面，但兩個頁面狀態(tài)是獨立的。頁面棧大小會加1，如果頁面棧大小為5，則wx.navigateTo無效

3. 使用wx.redirectTo重定向
   
   上圖中，假如使用wx.redirectTo從四級頁面重定向到二級頁面，此時會將關(guān)閉四級頁面，并使用二級頁面替換四級頁面，但兩個頁面狀態(tài)是獨立的。此時的頁面棧大小不變，請注意和使用wx.navigateTo的區(qū)別。

4. 使用wx.navigateBack返回
   
   上圖中，假如當前頁面為五級頁面，使用wx.navigateBack：

• 當delta為1，關(guān)閉五級頁面，當前頁面為四級頁面，頁面棧大小減1；

• 當delta為2，關(guān)閉依次五級頁面和四級頁面，當前頁面為三級頁面，頁面棧大小減2；

• 以此類推，直到棧底為止，也就是首頁。

感謝各位的閱讀！關(guān)于“微信小程序開發(fā)路由的使用方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前名稱：微信小程序開發(fā)路由的使用方法-創(chuàng)新互聯(lián)
文章起源：http://chinadenli.net/article18/diijdp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、虛擬主機、品牌網(wǎng)站設計、微信公眾號、網(wǎng)站內(nèi)鏈、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)