微信小程序-页面路由及页面生命周期

Posted 追到梦的魔术师

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序-页面路由及页面生命周期相关的知识,希望对你有一定的参考价值。

一、路由

路由常用跳转方式有三种:

1、wx.navigateTo(Object object)

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

页面跳转之后,会有一个返回按钮,新页面覆盖在当前页面

2、wx.reLaunch(Object object)

关闭所有页面,打开到应用内的某个页面

页面跳转之后,会有一个home按钮,之前路由列表里面的所有页面都被销毁

3、wx.redirectTo(Object object)

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

页面跳转之后,会有一个home按钮,跳转的其实页面会被新页面替换掉

二、页面生命周期

官网链接:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

由于可以看到,微信小程序页面启动时,会开启两个线程:View Thread 和 AppService Thread

View Thread 初始化中向 AppService Thread 发通知,而AppService Thread执行完 onLoad 和 onShow后便等待通知的到来,收到通知后,数据发送给View Thread ,然后执行onReady。

在页面的生命周期函数中,打印log:

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) 
    console.log('onLoad 生命周期函数--监听页面加载')
  ,

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () 
    console.log('onReady 生命周期函数--监听页面初次渲染完成')
  ,

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () 
    console.log('onShow 生命周期函数--监听页面显示')
  ,

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () 
    console.log('onHide 生命周期函数--监听页面隐藏')
  ,

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () 
    console.log('onUnload 生命周期函数--监听页面卸载')
  ,

运行小程序,控制台输出如下:

由此可见,页面周期的生命周期函数执行顺序:
onLoad --> onShow --> onReady

实验:路由跳转

新建两个页面,分别是page2、page3

实验一

当动第一个页面navigateTo到page2时,查看控制台

触发可onHide方法;此时返回到首页:
会发现onShow又重新被触发

实验二

更改跳转方式:
当动第一个页面reLaunch到page2时,查看控制台


会发现首页已经被销毁了

此时点击由上面的按钮,退到首页,控制太打印如下:

会发现,page2销毁,首页又被创建出来了

重新跑一遍程序:执行 首页reLaunch-> page2 reLaunch->page3,查看控制太如下:

会发现 page2到page3的时候,page2也同样被释放了

重新跑一遍程序:执行 首页 navigateTo-> page2 reLaunch->page3,查看控制太如下:
可以看到 page2 -> page3时,首页和page2都被释放了,由此可以证实官方描述:关闭所有页面,打开到应用内的某个页面。

实验三

更改跳转方式:
执行 首页navigateTo-> page2 ->page3,查看控制太如下:
可以看到 page2 -> page3时,只有page2被释放了,首页并没有释放,由此可以证实官方描述:关闭当前页面,跳转到应用内的某个页面。

以上是关于微信小程序-页面路由及页面生命周期的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序-页面路由及页面生命周期

微信小程序--路由变化对页面生命周期的影响

微信小程序的生命周期和路由

微信小程序常用api及语法

微信小程序生命周期

微信小程序生命周期学习笔记-页面篇