線程架構(gòu)

　　從前面的章節(jié)我們可以知道，.js文件是頁面邏輯處理層。我們可以按需在app.js和page.js中添加程序在生命周期的每個階段相應(yīng)的事件。如在頁面的onLoad時進(jìn)行數(shù)據(jù)的下載，onShow的時候進(jìn)行數(shù)據(jù)的更新。

　　典型的app.js代碼結(jié)構(gòu)如下：

App({
  onLaunch: function(){
    //啟動時執(zhí)行的初始化工作
  },
  onShow: function(){
    //小程序從后臺進(jìn)入前臺時，觸發(fā)執(zhí)行的操作
  },
  onHide: function(){
    //小程序從前臺進(jìn)入后臺時，觸發(fā)執(zhí)行的操作
  },
  globalConf: {
    indexDate:'',
    matchdata:''
  },
  dataCache:[],
  globalData:'I am global data'
})

　　典型的頁面page.js代碼結(jié)構(gòu)如下：

Page({
  Data:{
    Text:'This is page data.'
  },
  onLoad: function(options){
    //頁面加載時執(zhí)行的初始化工作
  },
  onReady: function(){
    //頁面就緒后觸發(fā)執(zhí)行的操作
  },
  onShow: function(){
    //頁面打開時，觸發(fā)執(zhí)行的操作
  },
  onHide: function(){
    //頁面隱藏時，觸發(fā)執(zhí)行的操作
  },
  onUnload: function(){
    //頁面關(guān)閉時，觸發(fā)執(zhí)行的操作
  },
  //Event Handler
  viewTap: function(){
    this.setData({
      text:'set some data for updating view.'
    })
  },
})

　　app.js文件中有3個生命周期函數(shù)：onLaunch、onShow、onHide（還有一個onError，程序出現(xiàn)錯誤時觸發(fā)）

　　page.js文件中有5個生命周期函數(shù)：onLoad、onReady、onShow、onHide、onUnload。

　　一個page的生命周期從onLoad開始，整個生命周期內(nèi)onLoad、onReady、onUnload這三個時間僅執(zhí)行一次，而onHide和onShow在每次頁面隱藏和顯示時都會觸發(fā)。當(dāng)用戶手動觸發(fā)左上角的退出箭頭時，小程序僅觸發(fā)app.onHide，下次進(jìn)入小程序時會觸發(fā)app.onShow以及當(dāng)前page.onShow.僅當(dāng)小程序在后臺運(yùn)行超過一定時間未被喚起、或者用戶手動在小程序的控制欄里點(diǎn)擊退出程序、或者小程序內(nèi)存占用過大被關(guān)閉時，小程序?qū)⒈讳N毀，會觸發(fā)page.onUnload事件。

　　每個小程序分為2個線程，view與appServer。其中view線程負(fù)責(zé)解析渲染頁面（wxml和wxss），而appServer線程負(fù)責(zé)運(yùn)行js。由于js不跑在web-view里，就不能直接操縱DOM和BOM，這就是小程序沒有window全局變量的原因。

開發(fā)步驟

　　理解小程序的線程架構(gòu)后，我們基本上可以歸納出一個小程序開發(fā)的主要步驟，涉及兩大步驟：

　　1）創(chuàng)建小程序?qū)嵗ǘx、配置及頁面執(zhí)行關(guān)聯(lián)）。即編寫3個app前綴的文件，它們共通描述了整個小程序主體邏輯、生命周期及頁面構(gòu)成、樣式等。小程序?qū)嵗龑⒂蒩ppServer線程運(yùn)行。

　　2）創(chuàng)建頁面（頁面結(jié)構(gòu)與事務(wù)處理邏輯）。在小程序中一個完整的頁面（page）是由.js、.json、.wxml、.wxss這四個文件組成。小程序頁面由view線程執(zhí)行。

為Hello WXapplet添加新頁面示例：

　　1)創(chuàng)建一個page頁

　　2）在app.json中注冊該page頁的路徑。

　　3）在適當(dāng)頁面的.wxml中添加該頁面的入口。例如，在index.wxml中添加到demo頁面入口展現(xiàn)的代碼

　　4）在index.js中添加bindViewDemo事件處理邏輯：

　　通過demo頁面的編寫，我們成功地為Hello WXapplet小程序新增了一個功能頁。