微信小程序開(kāi)發(fā)入門(mén)（三）

任亞飛

之前我們已經(jīng)了解了小程序的發(fā)展及前景、開(kāi)發(fā)環(huán)境、目錄結(jié)構(gòu)。

下面來(lái)了解小程序重要的全局配置文件。一個(gè)小程序會(huì)包括最基本的兩種配置文件，全局的app.json 和頁(yè)面自己的page.json。特別注意：配置文件中不能出現(xiàn)注釋。

全局配置app.json 是當(dāng)前小程序的全局配置，包括了小程序的所有頁(yè)面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部tab 等。更多配置信息請(qǐng)參考微信開(kāi)發(fā)者文檔， 初學(xué)者要多寫(xiě)多練多看官方文檔（https：//developers.weixin.qq.com/miniprogram/dev/framework/config.html）。

一、全局配置字段

1.pages字段

用于描述當(dāng)前小程序所有頁(yè)面路徑，這是為了讓微信客戶端知道當(dāng)前你的小程序頁(yè)面定義在哪個(gè)目錄?？梢钥吹皆赑ages 下面有index 和logs 兩個(gè)子頁(yè)面。

這跟目錄Pages 里面的首頁(yè)和日志頁(yè)面是相對(duì)應(yīng)的（如圖1）。

假設(shè)我想打開(kāi)程序就能看到日志頁(yè)面，那么就把“pages/logs/logs”和“pages/index/index”互換位置。如果想增加一個(gè)子頁(yè)面，就在pages 字段中增加一行，如“pages/diyi/diyi”，pages 是它的開(kāi)頭，diyi 是它的名字，保存后觀察模擬器看是否起效（注意：引號(hào)和逗號(hào)是半角）。同樣如果想把diyi 頁(yè)面指定為首頁(yè)，就把這行放在Pages 字段第一行。

2.window 段

定義小程序所有頁(yè)面的頂部背景顏色、文字顏色等。app.json 中的部分配置，也可以對(duì)單個(gè)頁(yè)面進(jìn)行定義。一般用頁(yè)面對(duì)應(yīng)的.json 文件來(lái)控制本頁(yè)面的表現(xiàn)，優(yōu)先級(jí)更高會(huì)覆蓋app.json 中相同的配置項(xiàng)（樣式相關(guān)的配置項(xiàng)屬于app.json 中的window屬性，但這里不需要額外指定window 字段），具體的取值和含義可參考微信小程序開(kāi)發(fā)者全局配置文檔中的說(shuō)明。通過(guò)圖1的2號(hào)框，我們能夠清楚地看到app.json 配置里面的window 字段，這里面有4 個(gè)屬性，分別為：

"backgroundTextStyle"："light"，

"navigationBarBackgroundColor"："#fff"，

"navigationBarTitleText"： "Weixin"，

"navigationBarTextStyle"："black"

后三個(gè)屬性都用來(lái)配置navigationBar，就是控制導(dǎo)航欄外觀：

"navigationBarBackgroundColor"："#fff"， 導(dǎo)航欄背景顏色屬性。#fff 表示為背景顏色是白色，如果我們不清楚導(dǎo)航欄背景在哪里，可以用藍(lán)色#0094ff 來(lái)替換，保存后在模擬器看發(fā)生的變化，就知道改變背景顏色的效果了，更多顏色屬性可自行百度。

" navigation Bar Title Text " ："Weixin"， 標(biāo)題名稱。模擬器上方正中間Weixin 字樣就是標(biāo)題，注意更改時(shí)不要少了引號(hào)。

"navigationBarTextStyle"："black" 文字顏色，black 黑色。默認(rèn)文字顏色為黑色，你可以改成白色white 試試看。這里的字體顏色只能是黑色和白色。

"backgroundTextStyle"："light"， 是下拉loading 的樣式，僅支持 dark / light 這兩個(gè)屬性，默認(rèn)屬性是light?？梢钥刂葡吕Ч霈F(xiàn)的小圓點(diǎn)顏色。

我在這個(gè)字段里增加兩行代碼，能起什么作用呢：

"enablePullDownRefresh"：true

"backgroundColor"："#CCFF00

"enablePullDownRefresh 是否開(kāi)啟當(dāng)前頁(yè)面下拉刷新?tīng)顟B(tài)，有兩個(gè)狀態(tài)屬性，false 否/true是。

backgroundColor 是下拉窗口背景色。

修改后用鼠標(biāo)左鍵按住標(biāo)題下拉，就會(huì)看到效果。

3.tabbar 字段

如果小程序是一個(gè)多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面），可以通過(guò) tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及tab切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。它跟window、pages 字段同層級(jí)。通過(guò)列表tab、列表list 來(lái)交互頁(yè)面之間的聯(lián)系（注意：tab 的列表，最少 2個(gè)、最多5個(gè)tab）。請(qǐng)參考下面的代碼，雙斜杠后為注釋。

"tabBar"： {

"list"： [{ //tab 列表list

"pagePath"： "pages/zhuye/zhuye"，

// 關(guān)聯(lián)的頁(yè)面，也就是pages 字段里面的頁(yè)面

"text"： " 主頁(yè)"， // 底部導(dǎo)航欄的名字

"iconPath"： "icon/zhuyehong.png"，// 選中后底部導(dǎo)航欄的主頁(yè)圖標(biāo)

" s e l e c t e d I c o n P a t h " ： " i c o n /zhuyehui.png"http:// 未選中底部導(dǎo)航欄的主頁(yè)圖標(biāo)

}，

作者在小程序項(xiàng)目文件里增加了一個(gè)icon 文件夾存放icon 圖片，圖片文件夾可在壹零社公眾號(hào)中下載。

下面這幾個(gè)屬性跟列表list 同層級(jí)，雙斜杠后面為注釋。其實(shí)大家注意發(fā)現(xiàn)一個(gè)問(wèn)題沒(méi)有，同層級(jí)的語(yǔ)法它們顏色是一樣的。

"color"："#003333"，//tab 底部導(dǎo)航欄文字默認(rèn)顏色，僅支持十六進(jìn)制顏色。

" selected Color"：" #330000 " ， / /tab 底部導(dǎo)航欄的文字選中時(shí)的顏色， 僅支持十六進(jìn)制顏色。"backgroundColor"："#FFFFCC"，//tab 底部導(dǎo)航欄背景色，僅支持十六進(jìn)制顏色。

"position"："bottom"http://tabBar 的位置，僅支持 bottom（ 底部） / top（ 頂部）， 默認(rèn)bottom。

保存后在模擬器上查看效果，若編譯出現(xiàn)錯(cuò)誤極有可能是標(biāo)點(diǎn)符號(hào)，字母大小寫(xiě)，查看調(diào)試器報(bào)錯(cuò)問(wèn)題所在（如圖2）。

頁(yè)面配置：每一個(gè)小程序頁(yè)面也可以使用同名.json 文件來(lái)對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置，頁(yè)面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)（如圖3）。

注意，app.json 的 window 配置項(xiàng)和Pages 中的"pages/zhuye/zhuye" 頁(yè)面里的json 是一樣的配置項(xiàng)。也就是說(shuō)Pages 中的每一頁(yè)我們可以去單獨(dú)配置。紅色框?yàn)閍pp.json； 綠色框?yàn)?pages/zhuye/zhuye" 頁(yè)面里的json，只是頁(yè)面不同。

"pages/zhuye/zhuye" 頁(yè)面的json配置了頂部背景顏色、標(biāo)題、標(biāo)題字體顏色。

4.sitemap 配置

小程序內(nèi)搜索可以通過(guò) sitemap.json配置或者打開(kāi)管理后臺(tái)頁(yè)面收錄開(kāi)關(guān)（小程序管理后臺(tái)→功能→頁(yè)面內(nèi)容接入→頁(yè)面收錄開(kāi)關(guān)），讓微信來(lái)索引。

當(dāng)開(kāi)發(fā)者允許微信索引時(shí)，微信會(huì)通過(guò)爬蟲(chóng)為小程序的頁(yè)面內(nèi)容建立索引。當(dāng)用戶的搜索詞條觸發(fā)該索引時(shí)，小程序的頁(yè)面將可能展示在搜索結(jié)果中。爬蟲(chóng)訪問(wèn)小程序內(nèi)頁(yè)面時(shí)，會(huì)攜帶特定的 useragent：mpcrawler 及場(chǎng)景值：1129。需要注意的是，若小程序爬蟲(chóng)發(fā)現(xiàn)的頁(yè)面數(shù)據(jù)和真實(shí)用戶的呈現(xiàn)不一致，那么該頁(yè)面將不會(huì)進(jìn)入索引中。

sitemap 配置會(huì)在發(fā)布上線的章節(jié)具體講解。