微信小程序（二）原理

渲染層和邏輯層
首先，我們來簡單瞭解下小程序的運行環境。小程序的運行環境分成渲染層和邏輯層，其中 WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。

小程序的渲染層和邏輯層分別由2個線程管理：渲染層的界面使用了WebView 進行渲染；邏輯層採用JsCore線程運行JS腳本。一個小程序存在多個界面，所以渲染層存在多個WebView線程，這兩個線程的通信會經由微信客戶端（下文中也會採用Native來代指微信客戶端）做中轉，邏輯層發送網絡請求也經由Native轉發，小程序的通信模型下圖所示。

程序與頁面
微信客戶端在打開小程序之前，會把整個小程序的代碼包下載到本地。
緊接着通過 app.json 的 pages 字段就可以知道你當前小程序的所有頁面路徑:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

這個配置說明在 QuickStart 項目定義了兩個頁面，分別位於 pages/index/index 和 pages/logs/logs。而寫在 pages 字段的第一個頁面就是這個小程序的首頁（打開小程序看到的第一個頁面）。
於是微信客戶端就把首頁的代碼裝載進來，通過小程序底層的一些機制，就可以渲染出這個首頁。
小程序啓動之後，在 app.js 定義的 App 實例的 onLaunch 回調會被執行:

App({
  onLaunch: function () {
    // 小程序啓動之後 觸發
  }
})

整個小程序只有一個 App 實例，是全部頁面共享的。
App() 必須在 app.js 中調用，必須調用且只能調用一次。不然會出現無法預期的後果。
接下來我們簡單看看小程序的一個頁面是怎麼寫的。
你可以觀察到 pages/logs/logs 下其實是包括了4種文件的，微信客戶端會先根據 logs.json 配置生成一個界面，頂部的顏色和文字你都可以在這個 json 文件裏邊定義好。緊接着客戶端就會裝載這個頁面的 WXML 結構和 WXSS 樣式。最後客戶端會裝載 logs.js，你可以看到 logs.js 的大體內容就是:

Page({
  data: { // 參與頁面渲染的數據
    logs: []
  },
  onLoad: function () {
    // 頁面渲染後 執行
  }
})

Page 是一個頁面構造器，這個構造器就生成了一個頁面。在生成頁面的時候，小程序框架會把 data 數據和 index.wxml 一起渲染出最終的結構，於是就得到了你看到的小程序的樣子。
在渲染完界面之後，頁面實例就會收到一個 onLoad 的回調，你可以在這個回調處理你的邏輯。