上(shang)一章中我們把小程序涉及到的文件類型(xing)闡述了一遍，我們結合 QuickStart 這個(ge)項(xiang)目來講一下這些文件是怎么(me)配合工作(zuo)的。

小程序的啟動

微信(xin)客(ke)戶端在打開小程序之前，會把(ba)整個小程序的(de)代碼包下載到本地。

緊接著通(tong)過 app.json 的 pages 字(zi)段就可以(yi)知道你當前小程序的所有頁面路徑:

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

這個(ge)(ge)配置說明(ming)在(zai) QuickStart 項目(mu)定義(yi)了兩個(ge)(ge)頁面(mian)，分別位于 pages/index/index 和(he) pages/logs/logs 目(mu)錄。而(er)寫在(zai) pages 字段的(de)第一個(ge)(ge)頁面(mian)就是這個(ge)(ge)小程序的(de)首頁(打(da)開小程序看到的(de)第一個(ge)(ge)頁面(mian))。

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

小程序啟動之(zhi)后，在 app.js 定義的 App 實例的 onLaunch 回調會(hui)被執(zhi)行:

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

 整個小程序只有(you)一個 App 實例(li)，是(shi)全部頁(ye)面共享的，更多(duo)的事件回調參考(kao)文(wen)檔 注冊程序 App 。

接下來我們簡單看看小程序的(de)一個(ge)頁面是怎么寫的(de)。

程序與頁面

你(ni)可以(yi)觀察到(dao) pages/logs/logs 下其實(shi)是(shi)(shi)包括(kuo)了4種文(wen)(wen)件(jian)的(de)，微信客戶(hu)端(duan)會先根據 logs.json 配(pei)置生成一個(ge)界面(mian)，頂部的(de)顏(yan)色和文(wen)(wen)字你(ni)都可以(yi)在這(zhe)個(ge) json 文(wen)(wen)件(jian)里邊(bian)定(ding)義好。緊接(jie)著(zhu)客戶(hu)端(duan)就會裝載(zai)這(zhe)個(ge)頁面(mian)的(de) WXML 結構和 WXSS 樣式。最后客戶(hu)端(duan)會裝載(zai) logs.js，你(ni)可以(yi)看到(dao) logs.js 的(de)大(da)體內容(rong)就是(shi)(shi):

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

Page 是(shi)一(yi)個頁(ye)(ye)面(mian)構(gou)(gou)造器，這個構(gou)(gou)造器就生成了一(yi)個頁(ye)(ye)面(mian)。在生成頁(ye)(ye)面(mian)的(de)時候，小程序框(kuang)架會把 data 數據(ju)和 index.wxml 一(yi)起渲染出最終的(de)結構(gou)(gou)，于(yu)是(shi)就得到了你看到的(de)小程序的(de)樣(yang)子。

在渲染(ran)完界面之后，頁面實例(li)就會收到一個 onLoad 的(de)回(hui)調，你(ni)可以(yi)在這個回(hui)調處(chu)理你(ni)的(de)邏輯。

有關于 Page 構造器(qi)更多詳(xiang)細的文檔參(can)考 注冊頁面 Page 。

組件

小程(cheng)(cheng)序提供了豐富的基礎組件給(gei)開(kai)(kai)發者，開(kai)(kai)發者可以像搭(da)積木一樣，組合各種組件拼合成自己的小程(cheng)(cheng)序。

就像 HTML 的(de)(de) div, p 等標(biao)(biao)簽一樣，在(zai)(zai)(zai)小程序(xu)里邊，你只需(xu)要在(zai)(zai)(zai) WXML 寫上對應(ying)的(de)(de)組(zu)件標(biao)(biao)簽名字就可以把該組(zu)件顯示在(zai)(zai)(zai)界面(mian)上，例(li)如，你需(xu)要在(zai)(zai)(zai)界面(mian)上顯示地圖，你只需(xu)要這樣寫即(ji)可：

<map>map>

使用組(zu)件(jian)的時(shi)候，還可(ke)以(yi)通過屬(shu)性(xing)傳遞值給(gei)組(zu)件(jian)，讓組(zu)件(jian)可(ke)以(yi)以(yi)不(bu)同的狀(zhuang)態去展現，例如，我們希望地圖一(yi)開始的中心的經(jing)緯度(du)是廣州(zhou)，那么(me)你(ni)需(xu)要聲(sheng)明地圖的 longitude(中心經(jing)度(du)) 和 latitude(中心緯度(du)) 兩個屬(shu)性(xing):

<map longitude="廣州經度" latitude="廣州緯度">map>

組件(jian)的內部行為也會通(tong)過事(shi)件(jian)的形式讓開發(fa)者可(ke)以(yi)感知，例如(ru)用戶點擊了地圖(tu)上的某個標(biao)記，你可(ke)以(yi)在 js 編寫 markertap 函(han)數來處理：

<map bindmarkertap="markertap" longitude="廣州經度" latitude="廣州緯度">map>

當然(ran)你(ni)也可以通過 style 或者(zhe) class 來控制組件(jian)的外層樣式，以便適應你(ni)的界面(mian)寬度高度等等。

更多的組件可以參考 小(xiao)程序的組件 。

API

為了讓開發者可以很(hen)方便的調起微信(xin)提供的能力，例如獲取用(yong)戶信(xin)息、微信(xin)支付等等，小程序提供了很(hen)多 API 給(gei)開發者去使用(yong)。

要獲取用戶的(de)地理位置時，只需要：

wx.getLocation({
  type: 'wgs84',
  success: (res) => {    var latitude = res.latitude // 經度
    var longitude = res.longitude // 緯度
  }
})

調用微信(xin)掃(sao)一掃(sao)能力，只(zhi)需要：

wx.scanCode({
  success: (res) => {    console.log(res)
  }
})

需要注意(yi)的(de)(de)是：多數 API 的(de)(de)回調都(dou)是異步，你需要處理好(hao)代碼邏(luo)輯(ji)的(de)(de)異步問題。

更多(duo)的 API 能力見(jian) 小(xiao)程序的API 。

通過這個章節你(ni)已經大概了解了小程(cheng)序(xu)運行的一(yi)些基本概念，當你(ni)開發完一(yi)個小程(cheng)序(xu)之后，你(ni)就需要發布(bu)你(ni)的小程(cheng)序(xu)。在下個章節，你(ni)會知道發布(bu)前需要做(zuo)什么準備。