微信小程序之頁面路由

本文轉載自查看原文 2017-06-05 16:47 6222 32 微信

路由方式

簡介

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

路由方式	觸發時機	路由前頁面	路由后頁面
初始化	小程序打開的第一個頁面		onLoad, onSHow
打開新頁面	調用 API `wx.navigateTo` 或使用組件 `<navigator open-type="navigateTo"/>`	onHide	onLoad, onShow
頁面重定向	調用 API `wx.redirectTo` 或使用組件 `<navigator open-type="redirectTo"/>`	onUnload	onLoad, onShow
頁面返回	調用 API `wx.navigateBack` 或使用組件`<navigator open-type="navigateBack">`或用戶按左上角返回按鈕	onUnload	onShow
Tab 切換	調用 API `wx.switchTab` 或使用組件 `<navigator open-type="switchTab"/>` 或用戶切換 Tab		各種情況請參考下表
重啟動	調用 API `wx.reLaunch` 或使用組件 `<navigator open-type="reLaunch"/>`	onUnload	onLoad, onShow

頁面跳轉觸發的生命周期，實際還存在bug，並不如官網所說的

SwitchTab的跳轉BUG

情景：

首頁跳轉到子頁面后，然后子頁面使用

<navigator type='switchTab' url="/pages/index/index" >
    <view>跳轉首頁</button>
</navigator>

解決辦法：

通過js來跳轉

<view class="weui-btn-area">
             <button class="weui-btn" bindtap="backIndex" type="default">返回主頁</button> 
            </view>

跳轉成功后，重新調用onload方法

backIndex:function(){
    wx.switchTab({
      url: '/pages/index/index',
      success: function (e) {
        var page = getCurrentPages().pop();
        if (page == undefined || page == null) return;
        page.onLoad();
      }
    })
  },

頁面路由的其他基礎知識請看官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html

`wx.navigateBack傳參`

我們來考慮一下以下場景：

1. 在【頁面A】中調用wx.navigateTo方法跳轉到【頁面B】 2. 然后從【頁面B】返回【頁面A】, 並將【頁面B】中的一些數據傳回【頁面A】

方法1：使用全局數據存儲

將要傳遞的數據，存儲在App對象上（比如globalData屬性）。
將要傳遞的數據，存儲在小程序的本地數據緩存（Storage）中。

例如，我們在將要退出頁面B的時候，作如下調用：

//=== 1. 存儲到app對象上的方式 ========
var app = getApp()
app.globalData.mydata = {a:1, b:2};  //存儲數據到app對象上
wx.navigateBack();  //返回上一個頁面

//=== 2.存儲到數據緩存的方式 =========
wx.setStorage({
  key: "mydata",
  data: {a:1, b:2},
  success: function () {
    wx.navigateBack();   //返回上一個頁面
  }
})

這樣一來，當返回到上一個頁面的時候，可以通過讀取這些全局存儲區域，來獲取到我們需要的數據。

不過，這種方式也是有很明顯的缺點的。由於是全局數據存儲，所以當你存入了那些數據后，必須謹慎的去管理這些全局數據（何時被銷毀），否則一不小心，就會產生副作用。

方法2：從頁面路由棧中直接獲取和操作目標Page對象

　　通過調用小程序的API: getCurrentPages()，來獲取當前頁面路由棧的信息，這個路由棧中按照頁面的路由順序存放着相應的Page對象，獲取到上一級頁面的完整Page對象，從而使直接調用Page對象的屬性和方法成為可能。

如下所示：

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //當前頁面
var prevPage = pages[pages.length - 2];  //上一個頁面

//直接調用上一個頁面的setData()方法，把數據存到上一個頁面中去

var newtitle ='It is new title';
prevPage.data.title= newtitle; //不需要頁面更新