微信小程序之路由

微信小程序開發過程中，很重要的一個就是路由，畢竟有很多跳轉的地方是需要使用到路由，小程序中路由就是頁面路由，在小程序中所有頁面的路由全部由框架進行管理。

提到小程序路由就不得不講一個頁面棧，框架以棧的形式維護了當前的所有頁面。 當發生路由切換的時候，頁面棧的表現如下：

查看當前頁面棧實例getCurrentPages() 函數用於獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素為首頁，最後一個元素為當前頁面。

注意：

不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。

不要在 App.onLaunch 的時候調用 getCurrentPages()，此時 page 還沒有生成。

這個函數就是查看當前頁面棧的信息，而且只能看不能修改。

一、路由方式

對於路由的觸發方式以及頁面生命週期函數如下：

1、打開新頁面

調用 API wx.navigateTo 或使用組件 <navigator>。通常就是正常的打卡新頁面，相當於網頁上a鏈接。打開新頁面有兩種方式可以，基本上所有的路方式都有兩種方式。

Api實例如下：

<view>
 <button>打開新頁面/<button>
/<view>

業務代碼如下：

Page({
 openNew:function(){
 wx.navigateTo({
 url: '../test/test'
 })
 }
})

效果如下：

組件打開新頁面

<view>
 <navigator>打開新頁面/<navigator>
/<view>

2、頁面重定向

調用 API wx.redirectTo 或使用組件 <navigator>。頁面重定向後是無法返回上一個頁面的。

api實例如下：

openNew:function(){
 wx.redirectTo({
 url: '../test/test'
 });
 }

效果如下：

組件方式

<view>
 <navigator>打開新頁面/<navigator>
/<view>

3、頁面返回

調用 API wx.navigateBack 或使用組件<navigator>或用戶按左上角返回按鈕。這個一般用的比較少畢竟左上角有返回按鈕。/<navigator>

實例如下：

<button>返回上一頁/<button>
<navigator>返回上一頁/<navigator>

業務代碼如下：

// pages/test/test.js
Page({
 backBefore: function() {
 wx.navigateBack({
 url: '../index/index'
 });
 }
})

效果如下：

4、Tab 切換

調用 API wx.switchTab 或使用組件 <navigator> 或用戶切換 Tab。這個主要就是用於tab頁的切換就是tabbar的切換，頂部菜單切換。

實例如下：

<view>
 <button>tab切換/<button>
 <navigator>tab切換/<navigator>
/<view>

業務代碼如下:

//index.js
//獲取應用實例
const app = getApp()
Page({
 openTab:function(){
 wx.switchTab ({
 url: '../logs/logs'
 });
 }
})

效果如下：

5、重啟動

調用 API wx.reLaunch 或使用組件 <navigator>。重啟動和頁面重定向類似，不同的是重啟動會關閉所有頁面在打開目標頁面。

實例如下:

<button>重啟動logs頁面/<button>
<navigator>重啟動logs頁面/<navigator>

業務代碼如下：

// pages/test/test.js
Page({
 backBefore: function() {
 wx.reLaunch({
 url: '../logs/logs'
 });
 }
})

效果如下：

注意：

閱讀更多 程序猿肸哥 的文章

關鍵字: 微信 路由 頁面