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

Posted 2021-09-13 追到梦的魔术师

一、路由

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

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被释放了，首页并没有释放，由此可以证实官方描述:关闭当前页面，跳转到应用内的某个页面。