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

目录：

• 小程序的生命周期
• 页面路由

一、小程序的生命周期

小程序的生命周期： 应用生命周期 ， 页面生命周期

• 应用生命周期

加载过程描述：

初始化： 第一次进入，客户端会帮我们初始化小程序的运行环境，同时会从CDN上下载，或者本地缓存中拿到我们小程序的代码包，注入到运行环境里。

加载程序： 初始化完毕后，微信客户端会给我们逻辑层的app. js的app实例，来派发onLaunch事件。逻辑层的app.js 的app 构造器参数里面的onLaunch方法就会被调用，

加载完成： 进入小程序后，用户就可以点击我们左上角的关闭或者手机home键来离开小程序，小程序进入后台，逻辑层app 构造函数的onHide 方法被调用，再次回到前台，调用onShow.

小程序脚本错误，或者api调用失败，会触发app构造器的onError方法，给这个方法传入一些错误信息。

globalData:小程序应用的全局数据.

代码样例：小程序默认的文件代码

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

• 小程序页面的生命周期

代码样例：代码只需要看对应的方法，其他可以忽略
//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

当页面初次加载的时候，微信客户端会给我们在逻辑层定义的配载实例派发一个onLoad事件，配置构造器参数所定义的onLoad方法就会被调用，onLoad方法，在页面没被销毁之前，只会调用一次。在onload回调中我们可以拿到当前页面所调用的打开参数。当页面显示后，配置构造器它参数所定义的onShow方法就会被调用。

onShow有2中情况，从别的页面返回当前页面，当前页的onshow方法同样会被调用，当页面初次渲染完成后，配置构造器参数里面所定义的onRead方法，就会被调用，onRead在onShow之后调用，他和onLoad方法都在页面没被销毁之前都只能调用一次， 当onRead触发后，逻辑层和视图层就可以交互了，如果我们在当前页面的基础上打开新的页面，当前页面会触发onHide方法，如果我们关闭了当前页，触发onUnload.

data:当前页的数据

• 小程序的启动流程
  
  小程序由两大线程组成：页面视图的view线程， 处理数据和服务的服务线程 AppService ,协同工作，完成小程序页面生命周期的调用。

小程序首次启动之后，这两个线程会同时创建，当appService线程创建后，他会一次调用onLoad ,onShow方法，在这两个方法内，我们可以请求服务器数据。

页面生命周期流程过程描述：

View线程在初始化完毕后会告诉我们appService线程我已经初始化好了，这个时候appService线程会发送页面初始化数据，View线程拿到这个初始化数据，触发首次渲染，渲染完成再告诉appService 线程，然后appService线程会接收到onReady调用，这个调用后,我们从服务器上拿到的数据也就回来了。这个时候appService 线程会拿到数据发送给view线程的视图层，View线程拿到这个数据后会帮我们再次渲染这个视图层。

二、页面路由

多页面的小程序里面，所有页面的路由由框架进行管理。框架以栈的形式维护了小程序的页面。小程序总共有6种路由，6种页面栈的表现。

简要说明其中几种路由方式：其实和app的导航栏推送界面和推出界面差不多。

初始化：假设经过初始化后，有个page1页面，当前的页面栈只有一个pageA

打开新页面：在pageA的基础上在打开pageB, pageB入栈 - 栈里面： pageA pageB

当前的pageB页面跳转到pageC - pageB出，pageC 进栈 - pageA pageC

tab切换，重加载： 所有的页面出栈

页面路由的触发方式，页面生命周期的函数