How to implement WeChat applet return to multi-level page

This article mainly introduces the relevant information on the implementation method of returning multi-level pages in WeChat applet. I hope this article can help everyone realize such a function. Friends who need it can refer to it. I hope it can help everyone.

Implementation method of returning multi-level pages in WeChat applet

In the development of WeChat applet, returning to the previous page is a very common operation, the most common There are two situations: clicking the return key on the phone and clicking a custom button to return to the previous page. We don’t need to do any processing when clicking the return button on the phone. If it is a custom button to achieve the return effect, we need to call the API provided by WeChat:

wx.navigateBack(OBJECT)

You can also use the wx.navigateBack method to return to multi-level pages. Just set The value of delta can be:

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

But sometimes, we need to click the return button on the phone to return to the previous two or more pages, so we cannot directly use the above method to handle it. I have used the following two methods to achieve this:

Method 1: Call wx.navigateBack() in the onUnload method of page C, so that you can return to page A, but it will There is a problem. If you share page C to a WeChat chat session, then close the mini program, and then open page C from the chat session, the wx.navigateBack() method will be called and this exception will be reported:

WAService.js:9 navigateBack with an unexist webviewId 0

Method 2: Another method is to call wx.navigateBack() in the onShow method of page B to achieve return, so as to avoid the problems in method one. The implementation idea is as follows:

① In the onUnload method of page C, determine whether the first n pages can be returned. The current page stack can be obtained through the getCurrentPages() method, and the number of layers that can be returned is determined based on the length of the page stack. , and can set parameters for the data of all pages. Here is an example of returning to the previous two pages:

 //这里是页面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});
    }
  },

② In the onShow method of page B, determine whether to call wx.navigateBack() based on the value of isBack:

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

Methods 1 and 2 do not directly go from page C to page A. They both have to go through page B first, so page B will flash for a while. If you have a better method, please tell me.

Related recommendations:

Detailed explanation of uploading avatars in WeChat mini program

Detailed explanation of WeChat mini program template

Implementation method of graph style function of WeChat applet process progress

The above is the detailed content of How to implement WeChat applet return to multi-level page. For more information, please follow other related articles on the PHP Chinese website!