微信小程序的页面导航问题

发布时间:2019-07-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了微信小程序的页面导航问题脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

小程序提供了 navigator组件 及功能相对应的 API 用于页面导航,不同的导航操作形成不同的页面栈信息,详细见官网文档路由的说明,但是官方文档不推荐也没有提供修改页面栈的API

导航方式

oPEn-type="navigate" 或 api: wx.navigateTo
open-type="redirect" 或 api: wx.redirectTo
open-type="swITchTab" 或 api: wx.switchTab
open-type="reLaunch" 或 api: wx.reLaunch
open-type="navigateBack" 或 api: wx.navigateBack

页面栈形态

  • navigate 和 redirect 的区别:前者在页面栈保留跳转前页面,再将跳转后的页面推入页面栈,可以通过 navigateBack 返回页面栈前面的页面,delta可设置返回的层数;后者不保留跳转前页面,将其出栈,而后跳转后页面入栈,此时若用 navigateBack,返回的是页面栈里保存的其他页面,如果没有其他页面,则仍在此页面;用符号语言表示为:
navigate:A -> B 其页面栈依次为:A - AB

redirect: A -> B 其页面栈依次为:A - B

看几个例子,都是在实际项目开发中抽象出来的:

  • A navigateTo-> B navigateBack(1)-> A 页面栈为:A-AB-A
  • A navigateTo-> B navigateTo-> C navigateBack(2)-> A 页面栈为:A-AB-abc-A
  • A redirectTo-> B navigateBack-> B(栈内无其他页面) 页面栈为:A-B-B
  • A navigateTo-> B redirectTo-> C navigateBack-> A 页面栈为:A-AB-AC-A
  • A navigateTo-> B redirectTo-> A navigateTo-> C redirectTo-> A navigateTo-> D redirectTo-> A navigateTo-> E redirectTo-> A navigateTo->(无效了,因为此时页面栈已到达限制:5) 页面栈为:A-AB-AA-AAC-AAA-AAAD-AAAA-AAAAE-AAAAA
  • R redirectTo-> B/C/D/E redirectTo-> A 页面栈为:E- B/C/D/E-A

小结

  • 在能够形成相对独立闭环的页面间方才使用navigate导航,这样可以保证每个页面可以单独分享而不影响页面导航关系,比如某表单页面-选择省份城市-回到表单页面,这种类型就是一个闭环,其中,省份城市选择的页面不会被单独访问。
  • 在各自独立的页面间用redirect导航,比如这种需求:首页有去其他各个模块的入口,每个模块都有返回首页的按钮,而这些模块的入口不只是首页,也有其他,如登录成功后直接进入某模块页面,在公众号菜单有分别进入各个模块的入口,这种情况下,每个模块虽然与首页之间有父子关系,但却不适合用 navigate 和 navigateBack 导航。
  • 2017-05-25补充:发现一篇文章《小程序基础篇之页面路由》, 对于页面栈形态给了图解,看起来更直观

页面导航逻辑 - 某项目

  1. 各功能页返回首页方式看情况判断:若从首页进入则navigateBack返回首页;若是直接打开功能页的,则redirect打开首页;
  2. 绑定与否过滤控制页面访问权限:已绑定直接访问,未绑定redirect到绑定页面,绑定成功后自动回到原进入的页面;(该小程序功能需绑定对应数据方可使用)
  3. 微信授权判断:未授权或已失效重新发起授权,授权成功后刷新原页面;授权流程见小程序文档(下方有个授权流程图)
  4. 用户拒绝授权:弹框引导其重新打开授权;(打开设置API: wx.openSetting: success (res.authSetting['scope.userInfo'])
  • 前提:保存打开小程序的初始路径,作为以上各种情况页面跳转依据;打开app的路径可在app启动关于显示的时候获取,具体见文档:框架-逻辑层-注册程序 app: onLaunch/onShow(options.path)

更新:小程序授权规则有更改,直接查看其文档,此处附上一实际项目中使用的授权流程:

微信小程序的页面导航问题


微信小程序的页面导航问题

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序的页面导航问题全部内容,希望文章能够帮你解决微信小程序的页面导航问题所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。