微信小程式開發記錄02_執行機制
01 我們稱微信客戶端給小程式所提供的環境為宿主環境。小程式藉助宿主環境提供的能力,可以完成許多普通網頁無法完成的功能。
02 渲染層與邏輯層
wxml,wxss工作在渲染層, JS 指令碼工作在邏輯層。 小程式的渲染層和邏輯層分別由2個執行緒管理:
渲染層的介面使用了WebView 進行渲染;小程式一般會有多個頁面,所以渲染層存在多個WebView執行緒.
邏輯層採用JsCore執行緒執行JS指令碼。
執行緒間的通訊由Native(微信客戶端)做中轉.
03,程式與頁面
微信客戶端在開啟小程式之前,會把整個小程式的程式碼包下載到本地。
緊接著透過
app.json
的
pages
欄位就可以知道你當前小程式的所有頁面路徑:
{ "pages":[ "pages/index/index", --第一個頁面 "pages/logs/logs" ]}
小程式啟動之後,在
app.js
定義的
App
例項的
onLaunch
回撥會被執行.
整個小程式只有一個 App 例項,是全部頁面共享的
接下來我們簡單看看小程式的一個頁面是怎麼寫的。
你可以觀察到
pages/logs/logs
下其實是包括了4種檔案的,
logs.json,logs.wxml, logs.wxss, logs.js
微信客戶端會先根據
logs.json
配置生成一個介面,頂部的顏色和文字你都可以在這個
json
檔案裡邊定義好。緊接著客戶端就會裝載這個頁面的
WXML
結構和
WXSS
樣式。最後客戶端會裝載
logs.js
,你可以看到
logs.js
的大體內容就是:
Page({ data: { // 參與頁面渲染的資料 logs: [] }, onLoad: function () { // 頁面渲染後 執行 }})
Page
是一個頁面構造器,這個構造器就生成了一個頁面。在生成頁面的時候,小程式框架會把
data
資料和
index.wxml
一起渲染出最終的結構,於是就得到了你看到的小程式的樣子。
在渲染完介面之後,頁面例項就會收到一個
onLoad
的回撥,你可以在這個回撥處理你的邏輯。
04, 元件與API
小程式提供了豐富的元件,比如<map></map>
為了讓開發者可以很方便的調起微信提供的能力,例如獲取使用者資訊、微信支付等等,小程式提供了很多 API 給開發者去使用
需要注意的是:多數 API 的回撥都是非同步,你需要處理好程式碼邏輯的非同步問題。
比如,
要獲取使用者的地理位置時,只需要:
wx.getLocation({ type: 'wgs84', success: (res) => { var latitude = res.latitude // 緯度 var longitude = res.longitude // 經度 }})
呼叫微信掃一掃能力,只需要:
wx.scanCode({ success: (res) => { console.log(res) }})
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/10248702/viewspace-2669909/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 原生微信小程式開發記錄微信小程式
- 微信小程式開發小記微信小程式
- 微信小程式開發記錄_03_開發指南_小程式程式碼組成微信小程式
- 微信小程式開發記錄_01程式碼構成微信小程式
- 淺談小程式執行機制
- 小程式技術科普:執行機制&安全機制
- 微信小程式更新機制微信小程式
- 微信小程式開發相關記錄(2017.07.25)微信小程式
- 微信小程式使用記錄微信小程式
- Session的執行機制及怎樣適用於微信小程式中Session微信小程式
- 微信小程式開發相關記錄(2017.07.23)微信小程式
- 微信小程式踩坑記錄微信小程式
- Java程式執行記憶體機制Java記憶體
- 微信小程式開發01-小程式的執行流程是怎麼樣的?微信小程式
- 微信小程式開發微信小程式
- 微信小程式BLE踩坑記錄微信小程式
- 寒假小軟體開發記錄05--微信分享
- 執行緒池小記錄執行緒
- 微信小程式開發學習筆記[4]微信小程式筆記
- mpvue開發微信小程式踩坑筆記Vue微信小程式筆記
- 微信小程式開發學習筆記[2]微信小程式筆記
- 微信小程式開發學習筆記[3]微信小程式筆記
- 微信小程式的require機制淺析微信小程式UI
- 【小程式】微信小程式開發實踐微信小程式
- 【小程式】微信小程式開發準備微信小程式
- 微信小程式開發教程微信小程式
- 微信小程式開發2微信小程式
- 微信開發與小程式
- 快速開發微信小程式微信小程式
- iOS仿微信小視訊功能開發優化記錄iOS優化
- 微信小程式開發筆記(2017.07.27)微信小程式筆記
- java程式的執行機制Java
- 靈活用工招聘小程式開發的機制
- 微信小程式的執行緒架構微信小程式執行緒架構
- 微信小程式開發總結微信小程式
- 開發微信小程式的作用微信小程式
- 微信小程式藍芽開發微信小程式藍芽
- 微信小程式雲開發6微信小程式