专栏首页沈唁志实现微信小程序返回多级页面

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

本文主要介绍了微信小程序返回多级页面的实现方法的相关资料

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

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

沈唁志|一个PHPer的成长之路! 原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:实现微信小程序返回多级页面

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 硬盘中出现eula.1028.txt等垃圾文件的原因及是否可删

    沈唁
  • 给博客左下角添加蒲公英特效以及鼠标点出小心心特效

    沈唁
  • 什么是404页面?对网站有什么影响?

    沈唁
  • 微信小程序页面路由

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    菲宇
  • 体育类App原型制作分享-Onefootball

    Onefootball 是一款适合于足球迷的应用,提供全球 100 多项赛事的新闻、数据、比分和直播。原型中选择“喜欢的球队”这个界面中,用到了悬浮按钮,采用的...

    奔跑的小鹿
  • uniapp 路由与页面跳转

    uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。

    达达前端
  • 诡异的【session丢失】和【<img src="">标签】

         项目发布到服务器上面了,但是客户在使用的时候发现,只要进入新增页面和修改页面。再进行操作就会自动跳转到登陆页面(我设置了session保存用户登陆信息...

    菩提树下的杨过
  • 10分钟彻底搞懂前端页面性能监控

    前端页面性能是一个非常核心的用户体验指标。本文介绍阿里UC 岳鹰全景监控平台 如何设计一个通用、低侵入性、自动上报的页面性能监控方案。主要采用的是Navigat...

    杂货铺老板
  • 雅虎前端优化的35条军规

    问题:我怎么才能收到你们公众号平台的推送文章呢? 内容部分 1.尽量减少HTTP请求数 80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各...

    企鹅号小编
  • [转]雅虎前端优化的35条军规

    80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等。减少组件数必然能够减少页面提交的HTTP请求...

    w候人兮猗

扫码关注云+社区

领取腾讯云代金券