微信小程式開發記錄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)
  }})