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


Posted in Javascript onOctober 27, 2017

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

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

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

Javascript 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 #Javascript
基于JavaScript实现报警器提示音效果
Oct 27 #Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 #Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 #jQuery
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 #Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 #Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 #Javascript
You might like
PHP类的使用 实例代码讲解
2009/12/28 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Django中的Model操作表的实现
2018/07/24 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
Python数据正态性检验实现过程
2020/04/18 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
《自然之道》教学反思
2014/02/11 职场文书
地震捐款倡议书
2014/08/29 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js