在上一(yi)章中，我們通過開發者(zhe)工具快速創建了(le)一(yi)個 QuickStart 項目。你可以留意到(dao)這(zhe)個項目里邊生(sheng)成了(le)不同類(lei)型的文件:

1. .json 后綴的(de) JSON 配置文件

2. .wxml 后綴的 WXML 模板(ban)文件

3. .wxss 后綴的 WXSS 樣式文件

4. .js 后綴的 JS 腳本(ben)邏輯(ji)文件

接下(xia)來我們分別看看這(zhe)4種文(wen)件的作用。

JSON 配置

我(wo)們(men)可(ke)以看到在項目的(de)根目錄有(you)一個 app.json 和 project.config.json，此(ci)外(wai)在 pages/logs 目錄下(xia)還(huan)有(you)一個 logs.json，我(wo)們(men)依次來說明一下(xia)他們(men)的(de)用途。

小程序配置 app.json

app.json 是對當前小(xiao)程序的全局配(pei)置(zhi)，包括了小(xiao)程序的所(suo)有頁面路徑、界面表(biao)現、網絡超時時間、底部 tab 等。QuickStart 項目里邊的 app.json 配(pei)置(zhi)內容如下：

{  "pages":[    "pages/index/index",    "pages/logs/logs"
  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle":"black"
  }
}

我們(men)簡單(dan)說(shuo)一下這個配置各個項的含(han)義:

1. pages字段 —— 用于描述當(dang)前小(xiao)程序所有頁面路徑，這是為了讓微信(xin)客戶端(duan)知道當(dang)前你(ni)的(de)小(xiao)程序頁面定義(yi)在(zai)哪個(ge)目錄。

2. window字段 —— 小程序所有頁面的頂部背景顏色(se)，文字顏色(se)定義(yi)在這里(li)的。

其他配置(zhi)項細節可以參(can)考(kao)文(wen)檔(dang) 小程(cheng)序的配置(zhi) app.json 。

工具配置 project.config.json

通常大家在使(shi)用一個(ge)工具的時候，都會針對各自喜好做一些個(ge)性化(hua)配置(zhi)(zhi)，例如界面顏色、編譯配置(zhi)(zhi)等等，當(dang)你換了另外一臺電腦重新(xin)安裝(zhuang)工具的時候，你還要(yao)重新(xin)配置(zhi)(zhi)。

考(kao)慮到(dao)這點，小程序(xu)開發(fa)(fa)者(zhe)工具(ju)在每(mei)個(ge)(ge)(ge)項目(mu)(mu)(mu)的(de)根目(mu)(mu)(mu)錄都(dou)會生成一(yi)個(ge)(ge)(ge) project.config.json，你(ni)在工具(ju)上(shang)做的(de)任何(he)配(pei)置都(dou)會寫入(ru)到(dao)這個(ge)(ge)(ge)文件(jian)，當你(ni)重新安裝工具(ju)或(huo)者(zhe)換電腦(nao)工作時(shi)(shi)，你(ni)只要載入(ru)同一(yi)個(ge)(ge)(ge)項目(mu)(mu)(mu)的(de)代碼包，開發(fa)(fa)者(zhe)工具(ju)就自(zi)動會幫你(ni)恢(hui)復到(dao)當時(shi)(shi)你(ni)開發(fa)(fa)項目(mu)(mu)(mu)時(shi)(shi)的(de)個(ge)(ge)(ge)性化配(pei)置，其中會包括編輯器的(de)顏色(se)、代碼上(shang)傳時(shi)(shi)自(zi)動壓縮等等一(yi)系(xi)列(lie)選項。

其他配置(zhi)項(xiang)細節(jie)可以參考文檔 開發者工具(ju)的配置(zhi) 。

頁面配置 page.json

 這里的(de) page.json 其實用(yong)來表示 pages/logs 目錄下的(de) logs.json 這類和小程序頁面相關的(de)配置。

如果你(ni)整個(ge)小程序的(de)風格(ge)是(shi)藍色(se)調，那(nei)么你(ni)可以在 app.json 里邊聲明(ming)頂部顏色(se)是(shi)藍色(se)即可。實際情況可能(neng)不(bu)是(shi)這樣，可能(neng)你(ni)小程序里邊的(de)每個(ge)頁面(mian)(mian)都(dou)有不(bu)一(yi)(yi)樣的(de)色(se)調來區分(fen)不(bu)同功(gong)能(neng)模塊，因此我們提供了 page.json，讓開發者(zhe)可以獨立定義每個(ge)頁面(mian)(mian)的(de)一(yi)(yi)些屬性，例如剛剛說的(de)頂部顏色(se)、是(shi)否(fou)允許下拉刷新等(deng)等(deng)。

其他配置項(xiang)細節可(ke)以參考(kao)文檔 小程序的配置 page.json 。

WXML 模板

從事過(guo)網(wang)頁(ye)編(bian)程(cheng)的(de)(de)(de)人知道，網(wang)頁(ye)編(bian)程(cheng)采用(yong)的(de)(de)(de)是(shi) HTML + CSS + JS 這樣的(de)(de)(de)組(zu)合，其中 HTML 是(shi)用(yong)來描(miao)述當(dang)前這個頁(ye)面的(de)(de)(de)結(jie)構，CSS 用(yong)來描(miao)述頁(ye)面的(de)(de)(de)樣子，JS 通常是(shi)用(yong)來處(chu)理這個頁(ye)面和用(yong)戶的(de)(de)(de)交互。

同(tong)樣(yang)道(dao)理，在小程序中(zhong)也有同(tong)樣(yang)的(de)角(jiao)色，其(qi)中(zhong) WXML 充(chong)當(dang)的(de)就是類似(si) HTML 的(de)角(jiao)色。打開 pages/index/index.wxml，你會看到(dao)以下的(de)內容:

    獲取頭像昵稱        
      {{userInfo.nickName}}        {{motto}}

和 HTML 非常相似，有標簽、屬性等(deng)等(deng)構成。但是也有很多不一(yi)(yi)樣的地方，我們(men)來(lai)一(yi)(yi)一(yi)(yi)闡述一(yi)(yi)下：

1. 標簽(qian)(qian)名字有(you)點不(bu)(bu)一(yi)樣(yang) 往往寫 HTML 的(de)時候(hou)，經常會用到(dao)的(de)標簽(qian)(qian)是(shi)(shi) div, p, span，開發者在寫一(yi)個頁(ye)面的(de)時候(hou)可(ke)(ke)以(yi)根(gen)據(ju)這些基礎的(de)標簽(qian)(qian)組(zu)合(he)出(chu)不(bu)(bu)一(yi)樣(yang)的(de)組(zu)件(jian)，例如日歷、彈(dan)窗(chuang)等(deng)(deng)(deng)(deng)等(deng)(deng)(deng)(deng)。換個思路(lu)，既然(ran)大家(jia)都需要這些組(zu)件(jian)，為什么我們(men)不(bu)(bu)能(neng)把這些常用的(de)組(zu)件(jian)包裝(zhuang)起來(lai)，大大提高我們(men)的(de)開發效(xiao)率。 從上邊的(de)例子可(ke)(ke)以(yi)看到(dao)，小(xiao)程(cheng)序的(de) WXML 用的(de)標簽(qian)(qian)是(shi)(shi) view, button, text 等(deng)(deng)(deng)(deng)等(deng)(deng)(deng)(deng)，這些標簽(qian)(qian)就是(shi)(shi)小(xiao)程(cheng)序給(gei)開發者包裝(zhuang)好的(de)基本能(neng)力(li)，我們(men)還(huan)提供了地(di)圖、視頻、音(yin)頻等(deng)(deng)(deng)(deng)等(deng)(deng)(deng)(deng)組(zu)件(jian)能(neng)力(li) 更(geng)多詳細(xi)的(de)組(zu)件(jian)講述參(can)考下(xia)個章節(jie) 小(xiao)程(cheng)序的(de)能(neng)力(li)

2. 多(duo)了(le)一(yi)些 wx:if 這(zhe)樣的(de)(de)(de)屬性以及 {{ }} 這(zhe)樣的(de)(de)(de)表達式 在網頁的(de)(de)(de)一(yi)般開發流程(cheng)中，我們通(tong)(tong)常(chang)會(hui)通(tong)(tong)過(guo) JS 操(cao)(cao)作 DOM (對應 HTML 的(de)(de)(de)描述產(chan)生(sheng)的(de)(de)(de)樹)，以引起界(jie)面(mian)(mian)的(de)(de)(de)一(yi)些變化響應用(yong)(yong)戶(hu)的(de)(de)(de)行(xing)為(wei)。例如(ru)(ru)，用(yong)(yong)戶(hu)點擊某(mou)個(ge)按鈕的(de)(de)(de)時候(hou)(hou)，JS 會(hui)記錄一(yi)些狀態(tai)到(dao) JS 變量(liang)(liang)里邊，同時通(tong)(tong)過(guo) DOM API 操(cao)(cao)控(kong) DOM 的(de)(de)(de)屬性或者行(xing)為(wei)，進(jin)而引起界(jie)面(mian)(mian)一(yi)些變化。當項目越(yue)來越(yue)大的(de)(de)(de)時候(hou)(hou)，你(ni)的(de)(de)(de)代碼(ma)會(hui)充斥著非常(chang)多(duo)的(de)(de)(de)界(jie)面(mian)(mian)交(jiao)互(hu)邏輯和(he)(he)程(cheng)序的(de)(de)(de)各(ge)種狀態(tai)變量(liang)(liang)，顯(xian)然這(zhe)不是(shi)一(yi)個(ge)很好(hao)的(de)(de)(de)開發模(mo)式，因此(ci)就(jiu)有了(le) MVVM 的(de)(de)(de)開發模(mo)式(例如(ru)(ru) React, Vue)，提(ti)倡把渲染(ran)和(he)(he)邏輯分(fen)離。簡(jian)單來說(shuo)就(jiu)是(shi)不要再(zai)讓 JS 直接操(cao)(cao)控(kong) DOM，JS只需要管理狀態(tai)即可，然后再(zai)通(tong)(tong)過(guo)一(yi)種模(mo)板語法來描述狀態(tai)和(he)(he)界(jie)面(mian)(mian)結構的(de)(de)(de)關(guan)系(xi)即可。 小程(cheng)序的(de)(de)(de)框架(jia)也是(shi)用(yong)(yong)到(dao)了(le)這(zhe)個(ge)思路，如(ru)(ru)果(guo)你(ni)需要把一(yi)個(ge) Hello World 的(de)(de)(de)字(zi)符串顯(xian)示在界(jie)面(mian)(mian)上。 WXML 是(shi)這(zhe)么寫 :

   JS 只需要(yao)管理狀態即可:

   this.setData({ msg: "Hello World" })

   通(tong)過 {{ }} 的(de)語法把一個變量綁定到界面(mian)上(shang)，我(wo)們稱為(wei)數據(ju)綁定。僅(jin)僅(jin)通(tong)過數據(ju)綁定還(huan)不夠(gou)完整(zheng)的(de)描(miao)述狀態和(he)界面(mian)的(de)關系(xi)，還(huan)需要 if/else, for等控(kong)制(zhi)能力(li)，在小(xiao)程序里邊，這些控(kong)制(zhi)能力(li)都(dou)用 wx: 開頭的(de)屬(shu)性來(lai)表達。 更詳細的(de)文(wen)檔可(ke)以參(can)考 WXML

WXSS 樣式

WXSS 具(ju)有 CSS 大(da)部(bu)分的特性，小程序(xu)在 WXSS 也做了一些(xie)擴充和(he)修(xiu)改。

1.  新增了(le)尺寸單(dan)位(wei)。在寫 CSS 樣式(shi)時(shi)，開(kai)發者需(xu)要考慮到手(shou)機設(she)備(bei)的(de)屏幕(mu)會有不同的(de)寬度(du)和設(she)備(bei)像素比，采用(yong)一(yi)些(xie)技巧(qiao)來換算(suan)(suan)一(yi)些(xie)像素單(dan)位(wei)。WXSS 在底層支持新的(de)尺寸單(dan)位(wei) rpx ，開(kai)發者可(ke)以免去(qu)換算(suan)(suan)的(de)煩惱，只要交給小程序底層來換算(suan)(suan)即可(ke)，由于換算(suan)(suan)采用(yong)的(de)浮點數(shu)運算(suan)(suan)，所以運算(suan)(suan)結果會和預(yu)期結果有一(yi)點點偏差。

2. 提供了全局的樣(yang)式(shi)和局部樣(yang)式(shi)。和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作(zuo)為全局樣(yang)式(shi)，會(hui)作(zuo)用于當前小程序的所有頁(ye)面，局部頁(ye)面樣(yang)式(shi) page.wxss 僅對當前頁(ye)面生效。

3. 此外 WXSS 僅支(zhi)持(chi)部(bu)分 CSS 選擇器

更詳細(xi)的文檔可以(yi)參考 WXSS 。

JS 交互邏輯

一個服務僅(jin)(jin)僅(jin)(jin)只(zhi)有(you)界面(mian)展示是不夠的(de)(de)，還需(xu)要和(he)用(yong)戶做(zuo)交互：響應用(yong)戶的(de)(de)點(dian)擊、獲取用(yong)戶的(de)(de)位置(zhi)等(deng)等(deng)。在小程(cheng)序里邊，我們就通過編寫 JS 腳(jiao)本文件(jian)來處理用(yong)戶的(de)(de)操作。

{{ msg }}點擊我

點(dian)擊 button 按鈕的時候，我們(men)希望把界面上 msg 顯示成 "Hello World"，于是我們(men)在 button 上聲明一個屬性: bindtap ，在 JS 文件里邊聲明了 clickMe 方法來響應這次點(dian)擊操作：

Page({
  clickMe: function() {    this.setData({ msg: "Hello World" })
  }
})

響(xiang)應用(yong)戶(hu)的操作就是這么簡單，更詳細(xi)的事件可以參考(kao)文檔(dang) WXML - 事件 。

此外你還可以在(zai) JS 中(zhong)調(diao)用(yong)(yong)(yong)小程序(xu)提供(gong)的(de)(de)豐富的(de)(de) API，利用(yong)(yong)(yong)這(zhe)些 API 可以很方便的(de)(de)調(diao)起微(wei)信(xin)提供(gong)的(de)(de)能力，例如獲(huo)(huo)取用(yong)(yong)(yong)戶(hu)信(xin)息、本地(di)存儲、微(wei)信(xin)支付等。在(zai)前邊(bian)的(de)(de) QuickStart 例子中(zhong)，在(zai) pages/index/index.js 就(jiu)調(diao)用(yong)(yong)(yong)了 wx.getUserInfo 獲(huo)(huo)取微(wei)信(xin)用(yong)(yong)(yong)戶(hu)的(de)(de)頭(tou)像和昵稱，最(zui)后通過 setData 把獲(huo)(huo)取到(dao)的(de)(de)信(xin)息顯示到(dao)界面上。更多 API 可以參(can)考文(wen)檔(dang) 小程序(xu)的(de)(de)API 。

通(tong)過這(zhe)個(ge)章(zhang)節(jie)，你(ni)了解(jie)了小(xiao)程序涉及到的(de)文件(jian)類型以及對應的(de)角色，在下個(ge)章(zhang)節(jie)中，我們(men)把這(zhe)一(yi)章(zhang)所涉及到的(de)文件(jian)通(tong)過 “小(xiao)程序的(de)框架(jia)” 給 “串(chuan)” 起來，讓他們(men)都工作起來。