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

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

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

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

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

接(jie)下來我們分(fen)別看看這4種文(wen)件(jian)的作用(yong)。

JSON 配置

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

小程序配置 app.json

app.json 是對當前小程序的全(quan)局配(pei)置，包(bao)括了(le)小程序的所有(you)頁面路(lu)徑(jing)、界面表現、網絡超(chao)時(shi)(shi)時(shi)(shi)間、底部 tab 等。QuickStart 項(xiang)目里邊的 app.json 配(pei)置內容如下(xia)：

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

我們簡(jian)單說一下這(zhe)個配置各個項的含義:

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

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

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

工具配置 project.config.json

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

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

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

頁面配置 page.json

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

如(ru)果(guo)你整(zheng)個小(xiao)程序(xu)的(de)(de)風(feng)格(ge)是藍(lan)色(se)(se)(se)(se)調，那么(me)你可(ke)以在 app.json 里邊聲明頂(ding)部顏色(se)(se)(se)(se)是藍(lan)色(se)(se)(se)(se)即可(ke)。實(shi)際情況可(ke)能不是這樣(yang)，可(ke)能你小(xiao)程序(xu)里邊的(de)(de)每個頁面(mian)都有不一樣(yang)的(de)(de)色(se)(se)(se)(se)調來區分不同功能模塊，因此我們提供了 page.json，讓開發者可(ke)以獨立定義每個頁面(mian)的(de)(de)一些屬性(xing)，例如(ru)剛剛說的(de)(de)頂(ding)部顏色(se)(se)(se)(se)、是否(fou)允許下拉刷(shua)新等等。

其他配置項細(xi)節可以參(can)考文檔 小程(cheng)序(xu)的配置 page.json 。

WXML 模板

從事過網頁(ye)(ye)編(bian)(bian)程(cheng)的(de)(de)(de)(de)人知道(dao)，網頁(ye)(ye)編(bian)(bian)程(cheng)采用的(de)(de)(de)(de)是 HTML + CSS + JS 這樣的(de)(de)(de)(de)組合(he)，其中(zhong) HTML 是用來(lai)描述(shu)當前這個(ge)頁(ye)(ye)面(mian)的(de)(de)(de)(de)結構(gou)，CSS 用來(lai)描述(shu)頁(ye)(ye)面(mian)的(de)(de)(de)(de)樣子，JS 通(tong)常是用來(lai)處理這個(ge)頁(ye)(ye)面(mian)和用戶的(de)(de)(de)(de)交互。

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

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

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

1. 標(biao)簽(qian)名(ming)字有點不(bu)(bu)一樣 往往寫 HTML 的(de)(de)時(shi)候，經(jing)常會用(yong)到的(de)(de)標(biao)簽(qian)是 div, p, span，開發者在寫一個頁面的(de)(de)時(shi)候可以根據這(zhe)些(xie)(xie)基礎的(de)(de)標(biao)簽(qian)組(zu)合(he)出不(bu)(bu)一樣的(de)(de)組(zu)件(jian)(jian)，例如日歷、彈窗等(deng)(deng)等(deng)(deng)。換個思(si)路，既然(ran)大家都(dou)需要這(zhe)些(xie)(xie)組(zu)件(jian)(jian)，為什(shen)么(me)我們(men)不(bu)(bu)能把這(zhe)些(xie)(xie)常用(yong)的(de)(de)組(zu)件(jian)(jian)包(bao)裝起來，大大提(ti)高我們(men)的(de)(de)開發效率(lv)。 從上邊(bian)的(de)(de)例子可以看(kan)到，小(xiao)(xiao)程(cheng)序的(de)(de) WXML 用(yong)的(de)(de)標(biao)簽(qian)是 view, button, text 等(deng)(deng)等(deng)(deng)，這(zhe)些(xie)(xie)標(biao)簽(qian)就是小(xiao)(xiao)程(cheng)序給開發者包(bao)裝好(hao)的(de)(de)基本能力(li)，我們(men)還提(ti)供了地(di)圖、視頻、音頻等(deng)(deng)等(deng)(deng)組(zu)件(jian)(jian)能力(li) 更多詳細的(de)(de)組(zu)件(jian)(jian)講述參(can)考(kao)下個章節 小(xiao)(xiao)程(cheng)序的(de)(de)能力(li)

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

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

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

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

WXSS 樣式

WXSS 具有(you) CSS 大部(bu)分的特性(xing)，小(xiao)程序在 WXSS 也做了(le)一些(xie)擴充和修改。

1. 新增了尺寸單(dan)位。在(zai)寫 CSS 樣式(shi)時，開發者需要考慮(lv)到(dao)手機設(she)備的(de)屏幕會(hui)有不同的(de)寬度和(he)設(she)備像素(su)比，采(cai)用(yong)一(yi)些(xie)技巧來換(huan)算(suan)一(yi)些(xie)像素(su)單(dan)位。WXSS 在(zai)底層支持新的(de)尺寸單(dan)位 rpx ，開發者可以免(mian)去換(huan)算(suan)的(de)煩惱，只(zhi)要交(jiao)給小程序底層來換(huan)算(suan)即可，由于(yu)換(huan)算(suan)采(cai)用(yong)的(de)浮點數(shu)運算(suan)，所以運算(suan)結果(guo)會(hui)和(he)預(yu)期結果(guo)有一(yi)點點偏(pian)差(cha)。

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

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

更詳(xiang)細的文檔可以參考(kao) WXSS 。

JS 交互邏輯

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

{{ msg }}點擊我

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

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

響應用戶的操作就是這么簡(jian)單(dan)，更詳細(xi)的事件可以(yi)參考文(wen)檔 WXML - 事件 。

此外你(ni)還可以在 JS 中調用(yong)小程序提供的(de)(de)豐富的(de)(de) API，利用(yong)這些 API 可以很方便的(de)(de)調起微信提供的(de)(de)能力，例(li)如獲(huo)取(qu)用(yong)戶(hu)信息、本地存(cun)儲(chu)、微信支(zhi)付等。在前邊(bian)的(de)(de) QuickStart 例(li)子(zi)中，在 pages/index/index.js 就調用(yong)了 wx.getUserInfo 獲(huo)取(qu)微信用(yong)戶(hu)的(de)(de)頭像和昵稱，最(zui)后(hou)通(tong)過 setData 把(ba)獲(huo)取(qu)到的(de)(de)信息顯示到界面上。更多 API 可以參考文檔 小程序的(de)(de)API 。

通過(guo)這(zhe)個章節，你了(le)解了(le)小(xiao)程序涉(she)及(ji)到(dao)的(de)文件類(lei)型以及(ji)對應的(de)角(jiao)色(se)，在下個章節中，我(wo)們(men)把這(zhe)一章所(suo)涉(she)及(ji)到(dao)的(de)文件通過(guo) “小(xiao)程序的(de)框架” 給 “串” 起(qi)來，讓他(ta)們(men)都工作起(qi)來。