微信小程序開發教程(四)線程架構與開發步驟


線程架構

  從前面的章節我們可以知道,.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小程序新增了一個功能頁。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM