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

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(黃先生)
在線留言:
微信掃碼,關注我們
相關文章
  • 企業進行微信小程序開發,一定要考慮的那些方面

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

  • 廣州微信小程序開發,是否會顛覆應用格局

    微信小程序被開發后,不管以后會不會給應用界帶來顛覆性的影響,但首先我們能確定

  • 微信小程序開發——企業品牌宣傳推動力

    企業擁有自己的品牌,隨之而來的工作就是進行宣傳推廣,而企業品牌策劃實施的要點,主要就分為三個部分:方式創新、體驗滿意跟促進分享。這每一個方面都是樹立品牌形象、提升品牌知名度的必要過程,依靠微信小程序開發區推動企業品牌宣傳也必須如此。

  • 微信小程序與APP之間的優劣勢具體是什么?

    自從微信小程序被開發出來之后,被稱之為“原生App”,就一直與APP之間存在話題,類似小程序取代APP、開發小程序還是開發APP等話題層出不窮,但其實,兩者并非全是優勢或者全是劣勢,需求開發者更是要對比兩者的優劣勢之后,才能做出開發APP還是小程序的決策。

  • 案例論證廣州微信小程序開發后實現商業轉化?

    微信小程序剛被開發出來的時候,是將其定位成為工具性的產品。而很多一開始開發的工具性小程序,是比較難去實現商業性轉化的,很多開發者在初涉小程序的時候

  • 小程序入口總結:哪些入口效率比較高

    微信小程序從一開始的沒有固定入口到現在已經發展成為多個入口結合一起發展的形式。不過,有很多入口,當然就會存在流量大的入口與流量較小的入口,企業商家掌握這些入口的大概效率,就能去較好地選擇宣傳方式與陣地

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