任亞飛
之前我們已經(jīng)了解了小程序的發(fā)展及前景、開發(fā)環(huán)境、目錄結(jié)構(gòu)。
下面來了解小程序重要的全局配置文件。一個小程序會包括最基本的兩種配置文件,全局的app.json 和頁面自己的page.json。特別注意:配置文件中不能出現(xiàn)注釋。
全局配置app.json 是當前小程序的全局配置,包括了小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡超時時間、底部tab 等。更多配置信息請參考微信開發(fā)者文檔, 初學者要多寫多練多看官方文檔(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 文件來控制本頁面的表現(xiàn),優(yōu)先級更高會覆蓋app.json 中相同的配置項(樣式相關(guān)的配置項屬于app.json 中的window屬性,但這里不需要額外指定window 字段),具體的取值和含義可參考微信小程序開發(fā)者全局配置文檔中的說明。通過圖1的2號框,我們能夠清楚地看到app.json 配置里面的window 字段,這里面有4 個屬性,分別為:
"backgroundTextStyle":"light",
"navigationBarBackgroundColor":"#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
后三個屬性都用來配置navigationBar,就是控制導航欄外觀:
"navigationBarBackgroundColor":"#fff", 導航欄背景顏色屬性。#fff 表示為背景顏色是白色,如果我們不清楚導航欄背景在哪里,可以用藍色#0094ff 來替換,保存后在模擬器看發(fā)生的變化,就知道改變背景顏色的效果了,更多顏色屬性可自行百度。
" navigation Bar Title Text " :"Weixin", 標題名稱。模擬器上方正中間Weixin 字樣就是標題,注意更改時不要少了引號。
"navigationBarTextStyle":"black" 文字顏色,black 黑色。默認文字顏色為黑色,你可以改成白色white 試試看。這里的字體顏色只能是黑色和白色。
"backgroundTextStyle":"light", 是下拉loading 的樣式,僅支持 dark / light 這兩個屬性,默認屬性是light。可以控制下拉效果出現(xiàn)的小圓點顏色。
我在這個字段里增加兩行代碼,能起什么作用呢:
"enablePullDownRefresh":true
"backgroundColor":"#CCFF00
"enablePullDownRefresh 是否開啟當前頁面下拉刷新狀態(tài),有兩個狀態(tài)屬性,false 否/true是。
backgroundColor 是下拉窗口背景色。
修改后用鼠標左鍵按住標題下拉,就會看到效果。
3.tabbar 字段
如果小程序是一個多 tab 應用(客戶端窗口的底部或頂部有 tab 欄可以切換頁面),可以通過 tabBar 配置項指定 tab 欄的表現(xiàn),以及tab切換時顯示的對應頁面。它跟window、pages 字段同層級。通過列表tab、列表list 來交互頁面之間的聯(lián)系(注意:tab 的列表,最少 2個、最多5個tab)。請參考下面的代碼,雙斜杠后為注釋。
"tabBar": {
"list": [{ //tab 列表list
"pagePath": "pages/zhuye/zhuye",
// 關(guān)聯(lián)的頁面,也就是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 同層級,雙斜杠后面為注釋。其實大家注意發(fā)現(xiàn)一個問題沒有,同層級的語法它們顏色是一樣的。
"color":"#003333",//tab 底部導航欄文字默認顏色,僅支持十六進制顏色。
" selected Color":" #330000 " , / /tab 底部導航欄的文字選中時的顏色, 僅支持十六進制顏色。"backgroundColor":"#FFFFCC",//tab 底部導航欄背景色,僅支持十六進制顏色。
"position":"bottom"http://tabBar 的位置,僅支持 bottom( 底部) / top( 頂部), 默認bottom。
保存后在模擬器上查看效果,若編譯出現(xiàn)錯誤極有可能是標點符號,字母大小寫,查看調(diào)試器報錯問題所在(如圖2)。

頁面配置:每一個小程序頁面也可以使用同名.json 文件來對本頁面的窗口表現(xiàn)進行配置,頁面中配置項會覆蓋 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 配置
小程序內(nèi)搜索可以通過 sitemap.json配置或者打開管理后臺頁面收錄開關(guān)(小程序管理后臺→功能→頁面內(nèi)容接入→頁面收錄開關(guān)),讓微信來索引。
當開發(fā)者允許微信索引時,微信會通過爬蟲為小程序的頁面內(nèi)容建立索引。當用戶的搜索詞條觸發(fā)該索引時,小程序的頁面將可能展示在搜索結(jié)果中。爬蟲訪問小程序內(nèi)頁面時,會攜帶特定的 useragent:mpcrawler 及場景值:1129。需要注意的是,若小程序爬蟲發(fā)現(xiàn)的頁面數(shù)據(jù)和真實用戶的呈現(xiàn)不一致,那么該頁面將不會進入索引中。
sitemap 配置會在發(fā)布上線的章節(jié)具體講解。