微信客戶端在打開(kāi)小(xiǎo)程序之前，會把整個小(xiǎo)程序的代碼包下(xià)載到本地。

緊接着通過 app.json 的 pages 字段就可以知(zhī)道你當前小(xiǎo)程序的所有頁面路徑:

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

這個配置說明在 QuickStart 項目定義了兩個頁面，分(fēn)别位于 pages/index/index 和 pages/logs/logs。而寫在 pages 字段的第一(yī)個頁面就是這個小(xiǎo)程序的首頁（打開(kāi)小(xiǎo)程序看到的第一(yī)個頁面）。

于是微信客戶端就把首頁的代碼裝載進來，通過小(xiǎo)程序底層的一(yī)些機制，就可以渲染出這個首頁。

小(xiǎo)程序啓動之後，在 app.js 定義的 App 實例的 onLaunch 回調會被執行:

App({
  onLaunch() { // 小(xiǎo)程序啓動之後 觸發 }
}) 

整個小(xiǎo)程序隻有一(yī)個 App 實例，是全部頁面共享的。

程序與頁面

你可以觀察到 pages/logs/logs 下(xià)其實是包括了4種文件的，微信客戶端會先根據 logs.json 配置生(shēng)成一(yī)個界面，頂部的顔色和文字你都可以在這個 json 文件裏邊定義好。緊接着客戶端就會裝載這個頁面的 WXML 結構和 WXSS 樣式。最後客戶端會裝載 logs.js，你可以看到 logs.js 的大(dà)體(tǐ)内容就是:

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

Page 是一(yī)個頁面構造器，這個構造器就生(shēng)成了一(yī)個頁面。在生(shēng)成頁面的時候，小(xiǎo)程序框架會把 data 數據和 index.wxml 一(yī)起渲染出最終的結構，于是就得到了你看到的小(xiǎo)程序的樣子。

在渲染完界面之後，頁面實例就會收到一(yī)個 onLoad 的回調，你可以在這個回調處理你的邏輯。