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

一、页面的生命周期

小程序的执行顺序是先从app.js执行起走，然后再到其他页面，所以我们可以打印看一下它的生命周期的顺序
app.js

//app.js
App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    console.log('>>>>>>>app onLaunch')
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log('>>>>>>>app onShow')
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    console.log('>>>>>>>app onHide')
  },
})

然后再看一下index.js

//index.js
//获取应用实例
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

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

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

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

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

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

然后再打印看一下执行顺序

从上图可以看到初始页面index.js启动后会从app.js的生命周期方法开始调用，执行的顺序由上图所示。

上图演示的是小程序进入后台的生命周期，可以很明显看到index.js先调用onHide，app.js再调用onHide。从后台进入前台则是app.js先调用onShow，index.js再调用onShow，如下图所示

所以该在什么阶段写什么代码就很清楚了。

二、页面路由

路由方式：

路由方式
由上图可以很清晰看到：假设从A页面跳转到B页面，A页面执行的生命周期函数是onHide，B页面执行的生命周期函数是onLoad>onShow。页面重定向和页面返回等等也可以如图示。