上一(yi)(yi)章中我們把(ba)小(xiao)程(cheng)序涉(she)及到(dao)的(de)文(wen)件類型闡述了一(yi)(yi)遍，我們結合(he) QuickStart 這個項目來(lai)講一(yi)(yi)下這些文(wen)件是怎(zen)么配合(he)工作(zuo)的(de)。

小程序的啟動

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

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

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

這個(ge)配(pei)置(zhi)說明在 QuickStart 項目(mu)定義(yi)了兩(liang)個(ge)頁(ye)面，分別位于 pages/index/index 和 pages/logs/logs 目(mu)錄。而寫(xie)在 pages 字段的第一(yi)個(ge)頁(ye)面就是這個(ge)小(xiao)程(cheng)序(xu)的首頁(ye)(打開小(xiao)程(cheng)序(xu)看到的第一(yi)個(ge)頁(ye)面)。

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

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

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

整個(ge)小程序只有一(yi)個(ge) App 實例，是全部頁面(mian)共(gong)享的，更多的事件回調(diao)參考(kao)文(wen)檔 注(zhu)冊程序 App 。

接下來我們簡單看看小程序的一(yi)個頁面(mian)是怎(zen)么寫(xie)的。

程序與頁面

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

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

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

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

有關于(yu) Page 構造器更多詳細的文檔參考(kao) 注冊頁(ye)面 Page 。

組件

小(xiao)程(cheng)序提供(gong)了豐富的(de)基礎組件給開發者，開發者可以(yi)像搭積(ji)木一樣，組合(he)各(ge)種組件拼(pin)合(he)成自(zi)己的(de)小(xiao)程(cheng)序。

就(jiu)像 HTML 的 div, p 等標(biao)(biao)簽(qian)一(yi)樣，在(zai)小(xiao)程(cheng)序里(li)邊，你(ni)(ni)只需要(yao)在(zai) WXML 寫上(shang)(shang)對(dui)應的組(zu)件標(biao)(biao)簽(qian)名字就(jiu)可(ke)以把該組(zu)件顯(xian)示在(zai)界面上(shang)(shang)，例如，你(ni)(ni)需要(yao)在(zai)界面上(shang)(shang)顯(xian)示地(di)圖，你(ni)(ni)只需要(yao)這樣寫即可(ke)：

<map>map>

使用組(zu)件(jian)的(de)時候，還可以通(tong)過屬(shu)性傳遞值給組(zu)件(jian)，讓組(zu)件(jian)可以以不同的(de)狀態(tai)去展現(xian)，例(li)如(ru)，我們希(xi)望地圖一開始的(de)中心的(de)經緯度是廣州，那么你需要聲明地圖的(de) longitude(中心經度) 和 latitude(中心緯度) 兩個屬(shu)性:

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

組件(jian)的內(nei)部行為(wei)也(ye)會通過事(shi)件(jian)的形式讓(rang)開發者可以感(gan)知，例如用戶點擊了地圖上的某個標記，你可以在 js 編寫 markertap 函數來(lai)處(chu)理：

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

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

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

API

為了讓開發(fa)(fa)者(zhe)可以很方便的調起(qi)微(wei)信(xin)(xin)提供的能力(li)，例如獲(huo)取(qu)用戶(hu)信(xin)(xin)息、微(wei)信(xin)(xin)支付等等，小程序(xu)提供了很多 API 給開發(fa)(fa)者(zhe)去使用。

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

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

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

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

需要(yao)注意的(de)是：多(duo)數 API 的(de)回(hui)調都是異(yi)步，你(ni)需要(yao)處理好代碼邏輯的(de)異(yi)步問題。

更多的 API 能力見 小程序的API 。

通過這個(ge)章節你已(yi)經大概(gai)了(le)解了(le)小程序運行(xing)的一些基本概(gai)念，當(dang)你開發(fa)完(wan)一個(ge)小程序之后(hou)，你就需要發(fa)布(bu)你的小程序。在下個(ge)章節，你會知(zhi)道發(fa)布(bu)前需要做什么準(zhun)備。