小編給大家分享一下微信小程序怎樣實現(xiàn)返回多級頁面,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯(lián)成立于2013年,我們提供高端重慶網(wǎng)站建設(shè)公司、成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、網(wǎng)站定制、網(wǎng)絡(luò)營銷推廣、微信小程序開發(fā)、微信公眾號開發(fā)、成都網(wǎng)站營銷服務,提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計、程序開發(fā)來完成項目落地,為工商代辦企業(yè)提供源源不斷的流量和訂單咨詢。微信小程序返回多級頁面的實現(xiàn)方法
微信小程序開發(fā)中,返回上一頁是很普遍的操作,最常見的是點擊手機的返回鍵和點擊自定義的按鈕返回上一頁這兩種情況。點擊手機的返回鍵我們不需要做處理,如果是自定義按鈕實現(xiàn)返回效果,就要調(diào)用微信提供的API:
wx.navigateBack(OBJECT)
也可以通過 wx.navigateBack 方法實現(xiàn)返回多級頁面,只要設(shè)置 delta 的值就可以:
//在C頁面內(nèi) navigateBack,將返回A頁面,delta = 1 時與 wx.navigateBack() 效果一致 wx.navigateBack({ delta: 2 })
但是有些時候,我們需要實現(xiàn)點擊手機的返回鍵,也返回上兩頁或者多頁,這樣子就不能直接用上面的方法來處理了。我用過下面的兩種方法來實現(xiàn):
方法一:在頁面C的 onUnload 方法里面調(diào)用 wx.navigateBack() ,這樣可以實現(xiàn)返回到頁面A,不過會有個問題,如果把頁面C分享到微信聊天會話里面,然后關(guān)閉小程序,再從聊天會話打開頁面C,還會調(diào)用 wx.navigateBack() 方法,并且報這個異常:
WAService.js:9 navigateBack with an unexist webviewId 0
方法二:另一種方法是在頁面B的 onShow 方法中調(diào)用 wx.navigateBack() 實現(xiàn)返回 ,這樣就可以避免方法一中出現(xiàn)的問題。實現(xiàn)的思路如下:
① 在頁面C的 onUnload 方法里面判斷是否可以返回前n頁,通過 getCurrentPages() 方法可以獲取當前的頁面棧,根據(jù)頁面棧的長度判斷可以返回的層數(shù),并且可以給所有頁面的 data 設(shè)置參數(shù),這里以返回上兩頁為例:
//這里是頁面C的 onUnload 方法 onUnload: function() { var that = this //判斷頁面棧里面的頁面數(shù)是否大于2 if(getCurrentPages().length > 2) { //獲取頁面棧 let pages = getCurrentPages() //給上一個頁面設(shè)置狀態(tài) let curPage = pages[pages.length - 2]; let data = curPage.data; curPage.setData({'isBack': true}); } },
② 在頁面B的 onShow 方法里面根據(jù) isBack 的值,判斷是否調(diào)用 wx.navigateBack() :
//這里是頁面B的 onShow 方法 onShow: function() { var that = this //如果 isBack 為 true,就返回上一頁 if(that.data.isBack) { wx.navigateBack() } },
方法一和方法二都不是直接從頁面C到頁面A,都是要先經(jīng)過頁面B,所以會出現(xiàn)頁面B閃一下的情況,大家如果有更好的方法可以告訴我。
看完了這篇文章,相信你對“微信小程序怎樣實現(xiàn)返回多級頁面”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!