程序與頁面

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

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

{

"pages":[

"pages/index/index",

"pages/logs/logs"

]

}

這(zhè)個配置說明(míng)在 QuickStart 項目定義了(le)兩個頁面，分别位于 pages/index/index 和(hé) pages/logs/logs。而寫在 pages 字段的第一個頁面就是這(zhè)個小(xiǎo)程序的首頁（打開(kāi)小(xiǎo)程序看(kàn)到(dào)的第一個頁面）。

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

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

App({

onLaunch: function () {

// 小(xiǎo)程序啓動之後 觸發

}

})

整個小(xiǎo)程序隻有一個 App 實例，是全部頁面共享的，更多的事(shì)件回調參考文(wén)檔 注冊程序 App 。

接下(xià)來(lái)我們簡單看(kàn)看(kàn)小(xiǎo)程序的一個頁面是怎麽寫的。

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

Page({

data: { // 參與頁面渲染的數據

logs: []

},

onLoad: function () {

// 頁面渲染後 執行

}

})

Page 是一個頁面構造器，這(zhè)個構造器就生成了(le)一個頁面。在生成頁面的時(shí)候，小(xiǎo)程序框架會(huì)把 data 數據和(hé) index.wxml 一起渲染出最終的結構，于是就得到(dào)了(le)你(nǐ)看(kàn)到(dào)的小(xiǎo)程序的樣子。

在渲染完界面之後，頁面實例就會(huì)收到(dào)一個 onLoad 的回調，你(nǐ)可以在這(zhè)個回調處理(lǐ)你(nǐ)的邏輯。