教你理解微信小程序的生命周期和運行原理
轉自：http://blog.csdn.net/tsr106/article/details/53052879
寫微信小程序，他的生命周期不能不知道，不知道小程序就會出現各種bug而無法解決。小助君公眾號帶你學習小程序的生命周期和運行原理。
小程序由兩大線程組成：負責界面的線程（view thread）和服務線程（appservice thread），各司其職由互相配合
小程序的生命周期借鑒了Android的生命周期，如果你了解過Android的APP開發，那麽理解小程序的就會很簡單。
界面線程有四大狀態：
1. 初始化狀態：初始化界面線程所需要的工作，包括工作機制，基本和我們開發者沒有關系，等初始化完畢就向 “服務線程”發送初始化完畢信號，然後進入等待傳回初始化數據
2.首次渲染狀態：收到“服務線程”發來的初始化數據後（就是 json和js中的data數據），就開始渲染小程序界面，渲染完畢後，發送“首次渲染完畢信號”給服務線程，並將頁面展示給用戶。
3.持續渲染狀態：此時界面線程繼續一直等待“服務線程”通過this.setdata（）函數發送來的界面數據，只要收到就重新局部渲染，也因此只要更新數據並發送信號，界面就自動更新。
4.結束狀態：你懂得。
服務線程五大狀態：
1 初始化狀態：無需和其他模塊交流，跟小程序開發也沒多大關聯，此階段就是啟動服務線程所需的基本功能，比如信號發送模塊。系統的初始化工作完畢，就調用自定義的onload和onshow，
然後等待界面線程的“界面線程初始化完成”信號。
onload是只會首次渲染的時候執行一次，onshow是每次界面切換都會執行，簡單理解，這就是唯一差別。
2 等待激活狀態：接收到“界面線程初始化完成”信號後，將初始化數據發送給“界面線程”，等待界面線程完成初次渲染。
3.激活狀態：收到界面線程發送來的“首次渲染完成”信號後，就進入激活狀態既程序的正常運行狀態，並調用自定義的onReady()函數。
此狀態下就可以通過 this.setData 函數發送界面數據給界面線程進行局部渲染，更新頁面。
4.後臺運行狀態：如果界面進入後臺，服務線程就進入後臺運行狀態，從目前的官方解讀來說，這個狀態挺奇怪的，和激活狀態是相同的，也可以通過setdata函數更新界面的。畢竟小程序的框架剛推出，應該後續會有很大不同吧。
“小助君公眾號”是幫助大家運營公眾號的公眾號，歡迎大家來交流小程序和公眾號運營。
==============================================================================
微信小程序 生命周期和頁面的生命周期詳細介紹
轉自：http://www.jb51.net/article/103586.htm
微信小程序 生命周期和頁面的生命周期詳解：
1.小程序的生命周期——App.js
App() 必須在 app.js 中註冊，且不能註冊多個。所以App（）方法在一個小程序中有且僅有一個。
App() 函數用來註冊一個小程序。接受一個 object 參數，其指定小程序的生命周期函數等。先上代碼：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
App({
onLaunch: function () {
console.log(‘App onLaunch‘);
},
onShow:function (){
console.log(‘App onShow‘);
},
onHide:function(){
console.log(‘App onHide‘);
},
onError:function(){
console.log(‘App onError‘);
},
getPics: function() {
return this.globalData.picList;
},
globalData:{
picList: [] // 圖片列表
},
globalName: ‘tangdekun‘
});
|
最外層的整個{ }就是一個object 參數。
通過表格的形式看App()中的object參數說明：
| 屬性 | 類型 | 描述 | 觸發時機 |
|---|---|---|---|
| onLaunch | Function | 生命周期函數–監聽小程序初始化 | 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）。 |
| onShow | Function | 生命周期函數–監聽小程序顯示 | 當小程序啟動，或從後臺進入前臺顯示，會觸發 onShow |
| onHide | Function | 生命周期函數–監聽小程序隱藏 | 當小程序從前臺進入後臺，會觸發 onHide |
| onError | Function | 錯誤監聽函數 | 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息 |
| 其他 | Any | 開發者可以添加任意的函數或數據到 Object 參數中，用 this 可以訪問，上面的getPics就是函數， globalName是數據，這裏面的函數和數據都是全局的。調用方式：在Pager中通過getApp()方法得到App對象並獲得全局的數據和調用全局的函數 |
將原有的app.js中替換為上面的代碼，首次打開小程序，可以在Log信息中看到以下Log信息,會看到onShow（）方法會執行兩次
- App onLaunch
- App onShow()
- App onShow()
前臺、後臺定義： 當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序並沒有直接銷毀，而是進入了後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺。
只有當小程序進入後臺一定時間，或者系統資源占用過高，才會被真正的銷毀。
註意：
1.不要在定義於 App() 內的函數中調用 getApp() ，使用 this 就可以拿到 app 實例。
2.不要在 onLaunch 的時候調用 getCurrentPage()，此時 page 還沒有生成。
3.通過 getApp() 獲取實例之後，不要私自調用生命周期函數。
2.頁面的生命周期
Page() 函數用來註冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。
生命周期函數
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
onLoad: 頁面加載
一個頁面只會調用一次。
接收頁面參數 可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。
onShow: 頁面顯示
每次打開頁面都會調用一次。
onReady: 頁面初次渲染完成
一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。
onHide: 頁面隱藏
當navigateTo或底部tab切換時調用。
onUnload: 頁面卸載
當redirectTo或navigateBack的時候調用。
|
其中APP的生命周期和頁面的生命周期是相互交叉的：舉例：
我們有頁面Test和Test1，我們在test.js,test1.js和App.js的生命周期方法中都打印log，代碼如下：
test1.js
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
Page({
data:{
names:"tangdekun test1"
},
onLoad:function(options){
// 生命周期函數--監聽頁面加載
console.log("test1 onLoad");
},
onReady:function(){
// 生命周期函數--監聽頁面初次渲染完成
console.log("test1 onReady");
},
onShow:function(){
// 生命周期函數--監聽頁面顯示
console.log("test1 onShow");
},
onHide:function(){
// 生命周期函數--監聽頁面隱藏
console.log("test1 onHide");
},
onUnload:function(){
// 生命周期函數--監聽頁面卸載
console.log("test1 onUnload");
},
onPullDownRefresh: function() {
// 頁面相關事件處理函數--監聽用戶下拉動作
console.log("test1 onPullDownRefresh");
},
onReachBottom: function() {
// 頁面上拉觸底事件的處理函數
console.log("test1 onReachBottom");
}
})
|
test.js
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
Page({
data:{
name:"test"
},
onLoad:function(options){
// 生命周期函數--監聽頁面加載
console.log("test onLoad");
},
onReady:function(){
// 生命周期函數--監聽頁面初次渲染完成
console.log("test onReady");
},
onShow:function(){
// 生命周期函數--監聽頁面顯示
console.log("test onShow");
},
onHide:function(){
// 生命周期函數--監聽頁面隱藏
console.log("test onHide");
},
onUnload:function(){
// 生命周期函數--監聽頁面卸載
console.log("test onUnload");
},
onPullDownRefresh: function() {
// 頁面相關事件處理函數--監聽用戶下拉動作
console.log("test onPullDownRefresh");
},
onReachBottom: function() {
// 頁面上拉觸底事件的處理函數
console.log("test onReachBottom");
},
onShareAppMessage: function() {
// 用戶點擊右上角分享
return {
title: ‘分享頁面‘, // 分享標題
desc: ‘這是一個分享的測試‘, // 分享描述
path: ‘pages/waimai/waimai‘ // 分享路徑
}
},
navigateToPageB: function() {
wx.navigateTo({
url: ‘../../pages/pageB/pageB?id=3‘,
success: function(res){
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
redirectToPageA : function(){
wx.redirectTo({
url: ‘../../pages/pageA/pageA?id=4‘,
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
},
switchTabToTest1:function(){
wx.switchTab({
url: ‘../../pages/test1/test1‘,
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
}
})
|
app.js
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
//app.js
App({
onLaunch: function () {
console.log(‘App onLaunch‘);
},
onShow:function (){
console.log(‘App onShow1‘+this.globalName);
},
onHide:function(){
console.log(‘App onHide‘);
},
onError:function(){
console.log(‘App onError‘);
},
getPics: function() {
return this.globalData.picList;
},
globalData:{
picList: [] // 圖片列表
},
globalName: ‘tangdekun‘
});
|
我們將test頁面設置為首頁【在app.json中設置】，程序會自動加載test頁面，調用test.js中的生命周期方法，打印Log信息如下： 
然後點擊菜單欄【作業中心】test1，會調用test 的onHide,test1的onLoad,onShow,onReady，打印Log信息如下：
在點擊【朋友圈】test，會調用test1的onHide方法，test的onshow方法，而不會調用test的onLoad,onReady方法，log信息如下：
通過實例我們一起理解一下官方的小程序頁面的生命周期： 
View thread是我們的wxml文件，AppServiceThread就是我們js文件中研究的頁面的生命周期。這裏我們可以看到每個生命周期方法的調用順序以及和Wxml之間的信息交流。大家可以簡略的看一下就好。
因為頁面的生命周期和頁面的路由【即頁面之間的跳轉方式】有關，所以接下來我會向大家展示頁面跳轉的三種方式和各種跳轉方式之下的生命周期方法的調度。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
教你理解微信小程序的生命周期和運行原理