微信小程序返回多级页面的实现方法

 更新时间:2017年10月27日 11:47:51   作者:JairusTse  
这篇文章主要介绍了微信小程序返回多级页面的实现方法的相关资料,希望通过本文能帮助到大家,让大家实现这样的功能,需要的朋友可以参考下

微信小程序返回多级页面的实现方法

微信小程序开发中,返回上一页是很普遍的操作,最常见的是点击手机的返回键和点击自定义的按钮返回上一页这两种情况。点击手机的返回键我们不需要做处理,如果是自定义按钮实现返回效果,就要调用微信提供的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闪一下的情况,大家如果有更好的方法可以告诉我。

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • LoadRunner调用JS加密后登录实现

    LoadRunner调用JS加密后登录实现

    这篇文章主要为大家介绍了LoadRunner调用JS加密后登录实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 微信小程序(十四)button组件详细介绍

    微信小程序(十四)button组件详细介绍

    这篇文章主要介绍了 微信小程序button组件详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • Three.js相机Camera控件知识梳理

    Three.js相机Camera控件知识梳理

    这篇文章主要为大家介绍了Three.js相机Camera控件知识梳理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • Immer 功能最佳实践示例教程

    Immer 功能最佳实践示例教程

    这篇文章主要为大家介绍了Immer功能最佳实践示例教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • 一文了解JavaScript用Element Traversal新属性遍历子元素

    一文了解JavaScript用Element Traversal新属性遍历子元素

    这篇文章主要介绍了一文了解JavaScript用Element Traversal新属性遍历子元素,文章围绕Element Traversal新属性的相关资料展开详细内容,需要的朋友可以参考一下,希望对大家有所帮助
    2021-11-11
  • Javascript中弹窗confirm与prompt的区别

    Javascript中弹窗confirm与prompt的区别

    今天小编就为大家分享一篇关于Javascript中弹窗confirm与prompt的区别,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • 微信小程序  简单实例(阅读器)的实例开发

    微信小程序 简单实例(阅读器)的实例开发

    这篇文章主要介绍了微信小程序 简单实例(阅读器)的实例开发的相关资料,需要的朋友可以参考下
    2016-09-09
  • 微信小程序的生命周期的详解

    微信小程序的生命周期的详解

    这篇文章主要介绍了微信小程序的生命周期的详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-10-10
  • 本地存储localStorage设置过期时间示例详解

    本地存储localStorage设置过期时间示例详解

    这篇文章主要为大家介绍了本地存储localStorage设置过期时间示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • js中的函数嵌套和闭包详情

    js中的函数嵌套和闭包详情

    这篇文章主要介绍了js中的函数嵌套和闭包,在聊闭包这个问题之前,先了解一下变量的定义域,在js中,变量定义域有全局作用域和局部作用域之说,文章主要介绍函数的作用域,需要的朋友可以参考一下
    2021-11-11

最新评论