1. 程式人生 > >微信小程式返回多級頁面

微信小程式返回多級頁面

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

wx.navigateBack(OBJECT)

也可以通過 wx.navigateBack 方法實現返回多級頁面,只要設定 delta 的值就可以:

//在C頁面內 navigateBack,將返回A頁面,delta = 1 時與 wx.navigateBack() 效果一致
wx.navigateBack({
  delta: 2
})

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

處理方法:

1)在頁面C的 onUnload 方法裡通過 getCurrentPages() 方法獲取當前的頁面棧,根據頁面棧設定頁面的 data 引數,這裡以返回上兩頁為例:

//這裡是頁面C的 onUnload 方法
onUnload: function() {
    console.log('home onUnload');
    //獲取頁面棧
    var pages = this.getCurrentPages();
    if (pages[1].route === 'pages/home') {
         wx.navigateBack({delta: 1});
         //wx.reLaunch({ url: './welcome' });
     } else {
         console.log('進入三級返回', pages);
         wx.setStorageSync('goBack', true);
         wx.navigateBack({delta: 3});
         //wx.reLaunch({ url: './welcome' });
     }
},

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

//這裡是頁面B的 onShow 方法
onShow: function() {
    var that = this
    //如果 goBack 為 true,就返回上一頁
    if(wx.getStorageSync('goBack')) {
        wx.navigateBack()
    }
},

此方法不是直接從頁面C到頁面A,都是要先經過頁面B,所以會出現頁面B閃一下的情況,歡迎大神有更好的方法推薦~~