微信小程序開發（四）線程架構和開發步驟

線程架構

　　從前面的章節咱們能夠知道，.js文件是頁面邏輯處理層。咱們能夠按需在app.js和page.js中添加程序在生命週期的每一個階段相應的事件。如在頁面的onLoad時進行數據的下載，onShow的時候進行數據的更新。

　　典型的app.js代碼結構以下：

App({
  onLaunch: function(){
    //啓動時執行的初始化工做
  },
  onShow: function(){
    //小程序從後臺進入前臺時，觸發執行的操做
  },
  onHide: function(){
    //小程序從前臺進入後臺時，觸發執行的操做
  },
  globalConf: {
    indexDate:'',
    matchdata:''
  },
  dataCache:[],
  globalData:'I am global data'
})

　　典型的頁面page.js代碼結構以下：

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

　　app.js文件中有3個生命週期函數：onLaunch、onShow、onHide（還有一個onError，程序出現錯誤時觸發）

　　page.js文件中有5個生命週期函數：onLoad、onReady、onShow、onHide、onUnload。

　　

　　一個page的生命週期從onLoad開始，整個生命週期內onLoad、onReady、onUnload這三個事件僅執行一次，而onHide和onShow在每次頁面隱藏和顯示時都會觸發。當用戶手動觸發左上角的退出箭頭時，小程序僅觸發app.onHide，下次進入小程序時會觸發app.onShow以及當前page.onShow僅當小程序在後臺運行超過必定時間未被喚起、或者用戶手動在小程序的控制欄裏點擊退出程序、或者小程序內存佔用過大被關閉時，小程序將被銷燬，會觸發page.onUnload事件。

　　每一個小程序分爲2個線程，view與appServer。其中view線程負責解析渲染頁面（wxml和wxss），而appServer線程負責運行js。因爲js不跑在web-view裏，就不能直接操縱DOM和BOM，這就是小程序沒有window全局變量的緣由。

 

開發步驟

　　理解小程序的線程架構後，咱們基本上能夠概括出一個小程序開發的主要步驟，涉及兩大步驟：

　　1）建立小程序實例（定義、配置及頁面執行關聯）。即編寫3個app前綴的文件，它們共同描述了整個小程序主體邏輯、生命週期及頁面構成、樣式等。小程序實例將由appServer線程運行。

　　2）建立頁面（頁面結構與事務處理邏輯）。在小程序中一個完整的頁面（page）是由.js、.json、.wxml、.wxss這四個文件組成。小程序頁面由view線程執行。

　　

爲Hello WXapplet添加新頁面示例：

　　1)建立一個page頁

　　

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

　　

　　3）在適當頁面的.wxml中添加該頁面的入口。例如，在index.wxml中添加到demo頁面入口展示的代碼

 　　

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

　　

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