微信小程序開發入門（三）

任亞飛

之前我們已經了解了小程序的發展及前景、開發環境、目錄結構。

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

全局配置app.json 是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部tab 等。更多配置信息請參考微信開發者文檔， 初學者要多寫多練多看官方文檔（https：//developers.weixin.qq.com/miniprogram/dev/framework/config.html）。

一、全局配置字段

1.pages字段

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

這跟目錄Pages 里面的首頁和日志頁面是相對應的（如圖1）。

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

2.window 段

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

"backgroundTextStyle"："light"，

"navigationBarBackgroundColor"："#fff"，

"navigationBarTitleText"： "Weixin"，

"navigationBarTextStyle"："black"

后三個屬性都用來配置navigationBar，就是控制導航欄外觀：

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

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

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

"backgroundTextStyle"："light"， 是下拉loading 的樣式，僅支持 dark / light 這兩個屬性，默認屬性是light。可以控制下拉效果出現的小圓點顏色。

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

"enablePullDownRefresh"：true

"backgroundColor"："#CCFF00

"enablePullDownRefresh 是否開啟當前頁面下拉刷新狀態，有兩個狀態屬性，false 否/true是。

backgroundColor 是下拉窗口背景色。

修改后用鼠標左鍵按住標題下拉，就會看到效果。

3.tabbar 字段

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

"tabBar"： {

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

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

// 關聯的頁面，也就是pages 字段里面的頁面

"text"： " 主頁"， // 底部導航欄的名字

"iconPath"： "icon/zhuyehong.png"，// 選中后底部導航欄的主頁圖標

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

}，

作者在小程序項目文件里增加了一個icon 文件夾存放icon 圖片，圖片文件夾可在壹零社公眾號中下載。

下面這幾個屬性跟列表list 同層級，雙斜杠后面為注釋。其實大家注意發現一個問題沒有，同層級的語法它們顏色是一樣的。

"color"："#003333"，//tab 底部導航欄文字默認顏色，僅支持十六進制顏色。

" selected Color"：" #330000 " ， / /tab 底部導航欄的文字選中時的顏色， 僅支持十六進制顏色。"backgroundColor"："#FFFFCC"，//tab 底部導航欄背景色，僅支持十六進制顏色。

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

保存后在模擬器上查看效果，若編譯出現錯誤極有可能是標點符號，字母大小寫，查看調試器報錯問題所在（如圖2）。

頁面配置：每一個小程序頁面也可以使用同名.json 文件來對本頁面的窗口表現進行配置，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項（如圖3）。

注意，app.json 的 window 配置項和Pages 中的"pages/zhuye/zhuye" 頁面里的json 是一樣的配置項。也就是說Pages 中的每一頁我們可以去單獨配置。紅色框為app.json； 綠色框為"pages/zhuye/zhuye" 頁面里的json，只是頁面不同。

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

4.sitemap 配置

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

當開發者允許微信索引時，微信會通過爬蟲為小程序的頁面內容建立索引。當用戶的搜索詞條觸發該索引時，小程序的頁面將可能展示在搜索結果中。爬蟲訪問小程序內頁面時，會攜帶特定的 useragent：mpcrawler 及場景值：1129。需要注意的是，若小程序爬蟲發現的頁面數據和真實用戶的呈現不一致，那么該頁面將不會進入索引中。

sitemap 配置會在發布上線的章節具體講解。