一、生命周期(包含小程序生命周期和页面生命周期)
1. 应用（小程序）生命周期：onLaunch--onShow--onHide
用户首次打开小程序，触发 onLaunch（全局只触发一次）
小程序初始化完成后，触发onShow方法，监听小程序显示
小程序从前台进入后台，触发 onHide方法
小程序从后台进入前台显示，触发 onShow方法
小程序后台运行一定时间，或系统资源占用过高，会被销毁
前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台
app.js文件
App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
* 启动程序
*/
onLaunch: function () {
console.log('onLaunch >>> ');
},
/**
* 当小程序启动，或从后台进入前台显示，会触发 onShow
* 启动完成
*/
onShow: function (options) {
console.log('onShow >>> ');
},
/**
* 当小程序从前台进入后台，会触发 onHide
*/
onHide: function () {
console.log('onHide >>> ');
},
})
2. 页面生命周期：onLoad--onShow--onReady--onHide--onUnload
小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次
页面载入后触发onShow方法，显示页面
首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次
当小程序后台运行或跳转到其他页面时，触发onHide方法
当小程序由后台进入到前台运行或重新进入页面时，触发onShow方法
当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触onUnload
页面js文件中直接使用，无需引入
Page({
/**
* 页面的初始数据
*/
data: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('life onLoad ');
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('life onReady ');
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log('life onShow ');
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log('life onHide ');
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log('life onUnload ');
},
})
3. 自定义组件生命周期：created--attached--ready--moved--detached--error
lifetimes节点中定义
created组件实例刚刚被创建，但是组件实例还没被放到小程序页面中，此时还不能调用setData
attached在组件实例初始化完毕，进入页面节点树后执行，此时this.data已经被初始化完毕，大多数初始化工作在这个时机进行
ready在组件渲染完成后执行
moved在组件实例被移动到节点树另一个位置时执行
detached在组件实例被从页面节点树移除时执行（组件销毁）
error每当组件方法抛出错误时执行
4. 自定义组件所在页面的生命周期：show--hide--resize
pageLifetimes节点中定义
show组件所在的页面被展示时执行
hide组件所在的页面被隐藏时执行
resize组件所在的页面尺寸变化时执行
自定义组件js文件
Component({
data: {},
methods: {},
lifetimes:{
created(){},
attached(){},
detached(){},
},
pageLifetimes:{
show: function () {},
hide: function () {},
resize: function (size) {},
}
})
二、路由API（页面导航）
1. 在小程序中所有页面的路由全部由框架进行管理，框架以栈的形式维护了当前的所有页面。可以使用 getCurrentPages() 函数获取当前页面栈。
- 当发生路由切换的时候，页面栈的表现如下：
| 路由方式 | 页面栈表现 |
|---|---|
| 初始化 | 新页面入栈 |
| 打开新页面 | 新页面入栈 |
| 页面重定向 | 当前页面出栈，新页面入栈 |
| 页面返回 | 页面不断出栈，直到目标返回页 |
| Tab 切换 | 页面全部出栈，只留下新的 Tab 页面 |
| 重加载 | 页面全部出栈，只留下新的页面 |
- 对于路由的触发方式以及页面生命周期函数如下：
| 路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
|---|---|---|---|
| 初始化 | 小程序打开的第一个页面 | onLoad, onShow | |
| 打开新页面 | 调用 API wx.navigateTo使用组件 | onHide | onLoad, onShow |
| 页面重定向 | 调用 API wx.redirectTo使用组件 | onUnload | onLoad, onShow |
| 页面返回 | 调用 API wx.navigateBack使用组件用户按左上角返回按钮 | onUnload | onShow |
| Tab 切换 | 调用 API wx.switchTab使用组件 用户切换 Tab | ||
| 重启动 | 调用 API wx.reLaunch使用组件 | onUnload | onLoad, onShow |
2. 实现页面导航有两种方式：
①声明式导航:页面上声明一个<navigator>导航组件,点击组件实现页面跳转
1. 跳转到tabbar页面<navigator url="/pages/index/index" open-type="switchTab"></navigator>
2. 跳转到非tabbar页面<navigator url="/pages/index/index" open-type="navigate"></navigator>
3. 后退到上一页或多级页面<navigator url="/pages/index/index" open-type="navigateBack" delta="1"></navigator>
url:要跳转的页面的地址，以/开头。
open-type：跳转方式(跳转到tabbar页面用switchTab；跳转到非tabbar页面用navigate或直接省略open-type属性；后退用navigateBack)。
delta：要后退的层级（数字）,默认1，如果后退到上一页可省略delta属性。
②编程式导航:调用小程序的路由API，实现页面的跳转
1. 导航到tabbar页面 <button bindtap:"gotoMessag"></button>
gotoMessage(){ wx.switchTab({url:'/pages/message/message'}) }
2. 导航到非tabbar页面 <button bindtap:"gotoMessag"></button>
gotoMessage(){ wx.navigateTo({url:'/pages/message/message'}) }
3. 后退到上一页或多级页面 <button bindtap:"gotoMessag"></button>
gotoMessage(){ wx.navigateBack({delta:2})//默认1 }
wx.navigateTo({url:’../index/index’})保留当前页面（onHide)，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
wx.navigateBack({delta:1})关闭当前页面（onUnload），返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。默认1，返回的页面数，如果 delta 大于现有页面数，则返回到首页。
wx.redirectTo({url:’’})关闭当前页面（onUnload），跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面
wx.switchTab({url:’’})跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch({url:’’})关闭所有页面，打开到应用内的某个页面
3. 导航传参
url中路径后通过？参数键=参数值传参，如果传多个参数用&分隔
①声明式导航传参
<navigator url="/pages/index/index?name=jon&age=20" open-type="navigate"></navigator>
②编程式导航传参
wx.navigateTo({url:'/pages/index/index?id=10&age=18'})
onLoad生命周期中通过options来接收参数
onLoad:function(options){console.log(options)}
