微信小程式傳回多層頁面的實作方法

這篇文章主要介紹了微信小程式返回多層級頁面的實現方法的相關資料,希望透過本文能幫助到大家，讓大家實現這樣的功能，需要的朋友可以參考下

#微信小程式返回多層頁面的實作方法

微信小程式開發中，返回上一頁是很普遍的操作，最常見的是點擊手機的返回鍵和點擊自定義的按鈕返回上一頁這兩種情況。點擊手機的返回鍵我們不需要做處理，如果是自訂按鈕實現返回效果，就要調用微信提供的API：

wx.navigateBack(OBJECT)

也可以透過wx.navigateBack 方法實現返回多級頁面，只要設置delta 的值就可以：

//在C页面内 navigateBack，将返回A页面，delta = 1 时与 wx.navigateBack() 效果一致
wx.navigateBack({
 delta: 2
})

但是有些時候，我們需要實現點擊手機的返回鍵，也返回上兩頁或多頁，這樣子就不能直接用上面的方法來處理了。我用過下面的兩種方法來實作：

方法一：在頁面C的onUnload 方法裡面呼叫wx.navigateBack() ，這樣可以實作回到頁面A，不過會有個問題，如果把頁面C分享到微信聊天會話裡面，然後關閉小程序，再從聊天會話打開頁面C，還會調用wx.navigateBack() 方法，並且報這個異常：

WAService.js:9 navigateBack with an unexist webviewId 0

方法二：另一種方法是在頁面B的onShow 方法中呼叫wx.navigateBack() 實作返回，這樣就可以避免方法一中出現的問題。實現的想法如下：

① 在頁面C的onUnload 方法裡面判斷是否可以返回前n頁，透過getCurrentPages() 方法可以取得目前的頁面堆疊，根據頁面堆疊的長度判斷可以傳回的層數，並且可以為所有頁面的data 設定參數，這裡以返回上兩頁為例：

 //这里是页面C的 onUnload 方法
  onUnload: function() {
    var that = this

    //判断页面栈里面的页面数是否大于2
    if(getCurrentPages().length > 2) {
      //获取页面栈
      let pages = getCurrentPages()
      //给上一个页面设置状态
      let curPage = pages[pages.length - 2];
      let data = curPage.data;
      curPage.setData({'isBack': true});
    }
  },

② 在頁面B的onShow 方法裡面根據isBack 的值，判斷是否呼叫wx.navigateBack() ：

  //这里是页面B的 onShow 方法
  onShow: function() {
    var that = this
    //如果 isBack 为 true，就返回上一页
    if(that.data.isBack) {
      wx.navigateBack()
    }
  },

方法一和方法二都不是直接從頁面C到頁面A，都是要先經過頁面B，所以會出現頁面B閃一下的狀況，大家如果有更好的方法可以告訴我。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

如何解決微信小程式遇到修改資料後頁面不渲染的問題

微信小程式之分享頁面如何回傳首頁

以上是微信小程式傳回多層頁面的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！