微信小程式開發記錄02_執行機制

gdutllf2006發表於2019-12-22


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/,如需轉載,請註明出處,否則將追究法律責任。

相關文章