微信小程式的生命週期例項演示 —— 微信小程式教程系列（2）
上篇教程
微信小程式的生命週期函式有2個
一個是App的生命週期
另一個是Page的生命週期
App的生命週期
示例：演示App的生命週期函式
app.js：
App({
onLaunch: function () {
console.log("App生命週期函式——onLaunch函式");
},
onShow: function () {
console.log("App生命週期函式——onShow函式");
},
onHide: function () {
console.log("App生命週期函式——onHide函式");
},
onError: function (msg) {
console.log("App生命週期函式——onError函式");
}
})
執行：
（1）程式啟動時，會觸發以下2個函式
第一執行onLauch函式——當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）
第二執行onShow函式——當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow
（2）當點選“後臺”時，會觸發以下函式（即程式被轉到後臺時）
onHide函式——當小程式從前臺進入後臺，會觸發 onHide
當點選“前臺”時，就會再次觸發onShow函式
示例： 演示Page的生命週期函式
home.js：
Page({
data:{ },
onLoad:function(options){
// 生命週期函式--監聽頁面載入
console.log("Page onLoad函式");
},
onReady:function(){
// 生命週期函式--監聽頁面初次渲染完成
console.log("Page onReady函式");
},
onShow:function(){
// 生命週期函式--監聽頁面顯示
console.log("Page onShow函式");
},
onHide:function(){
// 生命週期函式--監聽頁面隱藏
console.log("Page onHide函式");
}
})
執行：
（1）
當啟動home頁面時，會觸發以下3個函式
第一執行onLoad函式——在文件載入的時候會執行
第二執行onShow函式——在頁面顯示的時候會執行
第三執行onReady函式——在頁面初次渲染完成時執行
（2）在Home頁面時，當點選左上角“返回”，會觸發以下函式
onUnload函式——在頁面銷燬時執行
（3）在Home頁面時，當點選“後臺”時，會觸發以下函式（即程式被轉到後臺時）
onHide函式——在頁面隱藏時會執行
（4）在Home頁面時，當點選“前臺”時，會觸發以下函式（即程式從後臺被重新轉回前臺時）
onShow函式——在頁面顯示時會執行
示例：演示App生命週期函式和Page生命週期函式的結合使用
app.js：
在app.js檔案新增以下幾個生命週期函式
App({
onLaunch: function () {
console.log("App生命週期函式——onLaunch
},
onShow: function () {
console.log("App生命週期函式——onShow函式");
},
onHide: function () {
console.log("App生命週期函式——onHide函式");
},
onError: function (msg) {
console.log("App生命週期函式——onError函式");
}
})
index.js：
在index.js檔案新增以下幾個生命週期函式
Page({
data:{ },
onLoad:function(options){
// 生命週期函式--監聽頁面載入
console.log("Page onLoad函式");
},
onReady:function(){
// 生命週期函式--監聽頁面初次渲染完成
console.log("Page onReady函式");
},
onShow:function(){
// 生命週期函式--監聽頁面顯示
console.log("Page onShow函式");
},
onHide:function(){
// 生命週期函式--監聽頁面隱藏
console.log("Page onHide函式");
},
onUnload:function(){
// 生命週期函式--監聽頁面解除安裝
console.log("Page onUnload函式");
}
})
執行：
（1）程式啟動時
首先執行的是App的生命週期函式
接著再執行Page的生命週期函式
（2）當點選“後臺”時，會觸發以下函式（即程式被轉到後臺時）
首先執行Page的onHide生命週期函式
再執行App的onHide生命週期函式
（3）當點選“前臺”時（即程式返回前臺時）
首先執行Page的onShow生命週期函式
再執行App的onShow生命週期函式
微信小程式教程系列
註冊上線篇
------------------------------------------------------------
基礎篇
------------------------------------------------------------
實戰篇
------------------------------------------------------------
電商篇
------------------------------------------------------------
未完待續。。。