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


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 相关文章推荐
jquery键盘事件介绍
Jan 31 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
讲解vue-router之什么是动态路由
May 28 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
Vue实现简单分页器
Dec 29 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
JS实现页面炫酷的时钟特效示例
Aug 14 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
php后退一页表单内容保存实现方法
2012/06/17 PHP
PHP输出时间差函数代码
2013/01/28 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
php常用数学函数汇总
2014/11/21 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
深入理解Python异常处理的哲学
2019/02/01 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
会计工作心得体会
2014/01/13 职场文书
2014升学宴答谢词
2014/01/26 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
个性车贴标语
2014/06/24 职场文书
初中语文教学随笔
2015/08/15 职场文书
解除合同协议书范本
2016/03/21 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书