微信小程序之页面路由

简介: 路由方式 简介 对于路由的触发方式以及页面生命周期函数如下: 路由方式触发时机路由前页面路由后页面初始化 小程序打开的第一个页面   onLoad, onSHow 打开新页面 调用 API wx.

路由方式

简介

对于路由的触发方式以及页面生命周期函数如下:

路由方式 触发时机 路由前页面 路由后页面
初始化 小程序打开的第一个页面   onLoad, onSHow
打开新页面 调用 API wx.navigateTo 或使用组件 onHide onLoad, onShow
页面重定向 调用 API wx.redirectTo 或使用组件 onUnload onLoad, onShow
页面返回 调用 API wx.navigateBack 或使用组件或用户按左上角返回按钮 onUnload onShow
Tab 切换 调用 API wx.switchTab 或使用组件 或用户切换 Tab   各种情况请参考下表
重启动 调用 API wx.reLaunch 或使用组件 onUnload onLoad, onShow

 

页面跳转触发的生命周期,实际还存在bug,并不如官网所说的

SwitchTab的跳转BUG

情景:

首页跳转到子页面后,然后子页面使用

'switchTab' url="/pages/index/index" >
    跳转首页

解决办法:

通过js来跳转

class="weui-btn-area">
             class="weui-btn" bindtap="backIndex" type="default">返回主页 
            

跳转成功后,重新调用onload方法

backIndex:function(){
    wx.switchTab({
      url: '/pages/index/index',
      success: function (e) {
        var page = getCurrentPages().pop();
        if (page == undefined || page == null) return;
        page.onLoad();
      }
    })
  },

 

页面路由的其他基础知识请看官方文档 :https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html

 

wx.navigateBack传参

 我们来考虑一下以下场景:

1. 在【页面A】中调用wx.navigateTo方法跳转到【页面B】
2. 然后从【页面B】返回【页面A】, 并将【页面B】中的一些数据传回【页面A】
方法1:使用全局数据存储
  • 将要传递的数据,存储在App对象上(比如globalData属性)。
  • 将要传递的数据,存储在小程序的本地数据缓存(Storage)中。

例如,我们在将要退出页面B的时候,作如下调用:

//=== 1. 存储到app对象上的方式 ========
var app = getApp()
app.globalData.mydata = {a:1, b:2};  //存储数据到app对象上
wx.navigateBack();  //返回上一个页面

//=== 2.存储到数据缓存的方式 =========
wx.setStorage({
  key: "mydata",
  data: {a:1, b:2},
  success: function () {
    wx.navigateBack();   //返回上一个页面
  }
})

这样一来,当返回到上一个页面的时候,可以通过读取这些全局存储区域,来获取到我们需要的数据。

不过,这种方式也是有很明显的缺点的。由于是全局数据存储,所以当你存入了那些数据后,必须谨慎的去管理这些全局数据(何时被销毁),否则一不小心,就会产生副作用。

方法2:从页面路由栈中直接获取和操作目标Page对象

  通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,获取到上一级页面的完整Page对象,从而使直接调用Page对象的属性和方法成为可能。

如下所示:

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面

//直接调用上一个页面的setData()方法,把数据存到上一个页面中去

var newtitle ='It is new title';
prevPage.data.title= newtitle; //不需要页面更新
prevPage.setData({
  title: newtitle
})

 

页面栈

页面栈以栈(先进后出)的形式维护页面与页面之间的关系;
小程序提供了getCurrentPages()函数获取页面栈,第一个元素为首页,最后一个元素为当前页面。

  1. 使用wx.navigateTo每新开一个页面,页面栈大小加1,直到页面栈大小为5为止;

  2. 使用wx.navigateTo重复打开界面

上图中,假如使用wx.navigateTo从四级页面跳转到二级页面,此时会在页面栈顶添加一个与二级页面初始状态一样的界面,但两个页面状态是独立的。页面栈大小会加1,如果页面栈大小为5,则wx.navigateTo无效

  1. 使用wx.redirectTo重定向

上图中,假如使用wx.redirectTo从四级页面重定向到二级页面,此时会将关闭四级页面,并使用二级页面替换四级页面,但两个页面状态是独立的。此时的页面栈大小不变,请注意和使用wx.navigateTo的区别。

  1. 使用wx.navigateBack返回

上图中,假如当前页面为五级页面,使用wx.navigateBack:

  • 当delta为1,关闭五级页面,当前页面为四级页面,页面栈大小减1;
  • 当delta为2,关闭依次五级页面和四级页面,当前页面为三级页面,页面栈大小减2;
  • 以此类推,直到栈底为止,也就是首页。

以上使用wx.navigateTo、wx.redirectTo、wx.navigateBack页面出入栈操作对页面栈的影响,平时不一定用得上,但是还是有必要了解背后的原理。

通过学习页面栈,你至少可以知道:

  • 小程序运行时你可以获取到已经初始化了的页面的属性和方法
  • 动态获取当前页面路径
  • 页面自动跳转
  • 你可以通过getCurrentPages()获取页面page对象,执行非当前页js里的方法

总结

    • wx.navigateTo会增加页面栈大小,直到页面栈大小为5
    • wx.redirectTo不会增加页面栈大小
    • wx.navigateBack会减少页面栈大小,直到页面栈大小为1

 

摘抄来自:

http://www.cnblogs.com/nosqlcoco/p/6195572.html

https://www.cnblogs.com/caicaizi/p/6652103.html

 

欢迎阅读本系列文章:微信小程序开发教程目录

 

相关文章
|
2月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
76 1
|
3月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
4月前
|
小程序
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
3月前
|
小程序 前端开发 生物认证
微信小程序如何将一个按钮放到页面的最底下?
微信小程序如何将一个按钮放到页面的最底下?
382 5
|
3月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
663 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
734 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
137 7
ly~
|
3月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
84 6