How to implement WeChat applet to return multi-level pages

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 to realize such a function. Friends in need can refer to it

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 ones are to click the return key of the mobile phone and click the auto button. The button defined returns to the previous page in both cases. 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.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the problem that the WeChat mini program encounters the problem that the page does not render after modifying the data

WeChat mini program How to return to the homepage from the sharing page of the program

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