微信小程序開發(fā)入門（三）

任亞飛

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

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

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

一、全局配置字段

1.pages字段

用于描述當(dāng)前小程序所有頁面路徑，這是為了讓微信客戶端知道當(dāng)前你的小程序頁面定義在哪個(gè)目錄。可以看到在Pages 下面有index 和logs 兩個(gè)子頁面。

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

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

2.window 段

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

"backgroundTextStyle"："light"，

"navigationBarBackgroundColor"："#fff"，

"navigationBarTitleText"： "Weixin"，

"navigationBarTextStyle"："black"

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

"navigationBarBackgroundColor"："#fff"， 導(dǎo)航欄背景顏色屬性。#fff 表示為背景顏色是白色，如果我們不清楚導(dǎo)航欄背景在哪里，可以用藍(lán)色#0094ff 來替換，保存后在模擬器看發(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。可以控制下拉效果出現(xiàn)的小圓點(diǎn)顏色。

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

"enablePullDownRefresh"：true

"backgroundColor"："#CCFF00

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

backgroundColor 是下拉窗口背景色。

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

3.tabbar 字段

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

"tabBar"： {

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

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

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

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

"iconPath"： "icon/zhuyehong.png"，// 選中后底部導(dǎo)航欄的主頁圖標(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)航欄的主頁圖標(biāo)

}，

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

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

"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)，字母大小寫，查看調(diào)試器報(bào)錯(cuò)問題所在（如圖2）。

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

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

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

4.sitemap 配置

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

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

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