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

广告:宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取~~~

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

这篇文章主要介绍了微信小程序返回多级页面的实现方法的相关资料,希望通过本文能帮助到大家,让大家实现这样的功能,需要的朋友可以参考下

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

如何解决微信小程序遇到修改数据后页面不渲染的问题

微信小程序之分享页面如何返回首页

以上就是微信小程序返回多级页面的实现方法的详细内容,更多请关注9543建站博客其它相关文章!

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:Yii框架中的调试工具:分析和调试应用程序
下一篇:有关模版消息的文章推荐5篇

发表评论

关闭广告
关闭广告