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

緊接著通過(guò) app.json 的 pages 字段就可以知道你當(dāng)前小程序的所有頁(yè)面路徑:

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

這個(gè)配置說(shuō)明在 QuickStart 項(xiàng)目定義了兩個(gè)頁(yè)面，分別位于 pages/index/index 和 pages/logs/logs。而寫在 pages 字段的第一個(gè)頁(yè)面就是這個(gè)小程序的首頁(yè)（打開(kāi)小程序看到的第一個(gè)頁(yè)面）。

于是微信客戶端就把首頁(yè)的代碼裝載進(jìn)來(lái)，通過(guò)小程序底層的一些機(jī)制，就可以渲染出這個(gè)首頁(yè)。

小程序啟動(dòng)之后，在 app.js 定義的 App 實(shí)例的 onLaunch 回調(diào)會(huì)被執(zhí)行:

App({
  onLaunch() { // 小程序啟動(dòng)之后 觸發(fā) }
}) 

整個(gè)小程序只有一個(gè) App 實(shí)例，是全部頁(yè)面共享的。

程序與頁(yè)面

你可以觀察到 pages/logs/logs 下其實(shí)是包括了4種文件的，微信客戶端會(huì)先根據(jù) logs.json 配置生成一個(gè)界面，頂部的顏色和文字你都可以在這個(gè) json 文件里邊定義好。緊接著客戶端就會(huì)裝載這個(gè)頁(yè)面的 WXML 結(jié)構(gòu)和 WXSS 樣式。最后客戶端會(huì)裝載 logs.js，你可以看到 logs.js 的大體內(nèi)容就是:

Page({ data: { // 參與頁(yè)面渲染的數(shù)據(jù) logs: []
  },
  onLoad() { // 頁(yè)面渲染后 執(zhí)行 }
}) 

Page 是一個(gè)頁(yè)面構(gòu)造器，這個(gè)構(gòu)造器就生成了一個(gè)頁(yè)面。在生成頁(yè)面的時(shí)候，小程序框架會(huì)把 data 數(shù)據(jù)和 index.wxml 一起渲染出最終的結(jié)構(gòu)，于是就得到了你看到的小程序的樣子。

在渲染完界面之后，頁(yè)面實(shí)例就會(huì)收到一個(gè) onLoad 的回調(diào)，你可以在這個(gè)回調(diào)處理你的邏輯。