微信小程序返回多級頁面的實現方法

微信小程序開發中，返回上一頁是很普遍的操作，最常見的是點擊手機的返回鍵和點擊自定義的按鈕返回上一頁這兩種情況。點擊手機的返回鍵我們不需要做處理，如果是自定義按鈕實現返回效果，就要調用微信提供的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閃一下的情況，大家如果有更好的方法可以告訴我。

如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！