微信小程序開發,線程架構與開發步驟解析

2018/4/19 18:59:52
摘要: 在進入到微信小程序開發階段之前,首先我們可以通過了解它的線程架構,來分析得出創建一個小程序功能也大概的開發

在進入到微信小程序開發階段之前,首先我們可以通過了解它的線程架構,來分析得出創建一個小程序功能頁大概的開發步驟。本文先對它的現成架構進行展示與分析、說明,最后再整理出小程序功能頁的開發步驟。

1、線程架構的說明與示例

  從小程序的框架目錄上看,我們可以知道.js文件是頁面邏輯處理層,開發者可以按照需求在app.js和page.js中添加程序在生命周期的每個階段相應的事件。比如在頁面的onLoad時進行數據的下載,onShow的時候進行數據的更新。下面貼出一些典型的代碼結構:

 (1)典型的app.js代碼結構如下:

App({

  onLaunch: function(){

    //啟動時執行的初始化工作

  },

  onShow: function(){

    //小程序從后臺進入前臺時,觸發執行的操作

  },

  onHide: function(){

    //小程序從前臺進入后臺時,觸發執行的操作

  },

  globalConf: {

    indexDate:'',

    matchdata:''

  },

  dataCache:[],

  globalData:'I am global data'

})

 (2)典型的頁面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.'

    })

  },

})

 (3)app.js與page.js文件說明

 app.js文件中有3個生命周期函數:onLaunch、onShow、onHide。還有一個onError,只會在程序出現錯誤時觸發。

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

image.png

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

 (4)線程框架說明

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

  2、開發步驟教程

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

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

(3)開發示例,為Hello WXapplet添加新頁面

1) 創建一個page頁

image.png

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

image.png

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

image.png

4)在index.js中添加bindViewDemo事件處理邏輯,通過demo頁面的編寫,實現Hello WXapplet小程序新增一個功能頁。

image.png


聲明:文章"微信小程序開發,線程架構與開發步驟解析"為互誠科技—微信小程序開發公司的原創文章,轉載請注明出處,謝謝合作!
標簽:小程序干貨
電話咨詢:18011971195(黃先生)
在線留言:
微信掃碼,關注我們
相關文章
  • 微信小程序開發教程之自定義toast實例

    自從小程序發布以后,越來越多的開發者投入到小程序的開發當中去,而且微信有著相當完善的API和組件,使用起來簡單

  • 微信小程序開發結合什么商業模式會更有利于其發展

    隨著微信小程序的高調崛起,各類行業的需求開發者也在逐漸將目光看向小程序開發。

  • 企業進行微信小程序開發,一定要考慮的那些方面

    企業在微信小程序開發之前以及過程之中,除了要考慮如何去滿足企業本身的需求之外,還要考慮最終的成果是否能滿足用戶的體驗需求,只有將這兩個方面充分考慮到并且有充足的準備,才能在后續上線時能有較好的發展。而這兩個方面又可以延伸出

  • 為什么微信小程序會成為新一輪的商業機遇

    從微信小程序未出現之前,它的消息已經放出就已經引起業內的極大關注,很多人認為它將掀起一輪新的商業發展風暴。而在小程序沉淀后的爆發中

  • 培養客戶忠誠度,用微信小程序會員積分系統就好

    微信小程序商城系統不僅是一個可以展示商品、銷售商品的系統,而且為了解決一般電商系統吸引新粉絲難、維護老粉絲難的問題,還同時配備了會員積分管理等系統,來為企業商家或者個人開發者開發后增加客戶粘性、培養客戶忠誠度起到一個工具性的作用。

  • 微信小程序開發難不難,廣州互誠科技告訴你

    在百度網頁上,很多人在詢問微信小程序開發難不難,小編也一樣用這樣的文字去搜尋答案

上海快三走势图上海快3形态走势