目录:
- 小程序的生命周期
- 页面路由
一、小程序的生命周期
小程序的生命周期: 应用生命周期 , 页面生命周期
- 应用生命周期
加载过程描述:
初始化: 第一次进入,客户端会帮我们初始化小程序的运行环境,同时会从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切换,重加载: 所有的页面出栈
页面路由的触发方式,页面生命周期的函数