在上一篇我們介紹了微信小程序的注冊(cè)和基本使用方式，并且寫出了一個(gè)簡(jiǎn)單的頁(yè)面，但是依然沒有解釋目錄中的各種.json文件是做什么的。這篇我們就來(lái)認(rèn)識(shí)一下各種JSON配置文件及其配置項(xiàng)。
一 認(rèn)識(shí)JSON
首先先來(lái)認(rèn)識(shí)一下JSON是什么。
- JSON 指的是 JavaScript 對(duì)象表示法（JavaScript?Object?Notation）
- JSON 是輕量級(jí)的文本數(shù)據(jù)交換格式
- JSON 獨(dú)立于語(yǔ)言：JSON 使用 Javascript語(yǔ)法來(lái)描述數(shù)據(jù)對(duì)象，但是 JSON 仍然獨(dú)立于語(yǔ)言和平臺(tái)。JSON 解析器和 JSON 庫(kù)支持許多不同的編程語(yǔ)言。 目前非常多的動(dòng)態(tài)（PHP，JSP，.NET）編程語(yǔ)言都支持JSON。
- JSON 具有自我描述性，更易理解
- 關(guān)于JSON的使用可以參考 JSON 教程 | 菜鳥教程 (runoob.com)
簡(jiǎn)單來(lái)說(shuō)，JSON對(duì)象是一個(gè)無(wú)序的鍵值對(duì)的集合，名稱與值直接使用“：”進(jìn)行分隔，成對(duì)出現(xiàn)，鍵值對(duì)之間使用“，”進(jìn)行分隔，以{}作為起始，允許嵌套和空格。
JSON中的value可以是數(shù)組、數(shù)字、字符串、布爾類型，也可以是另一個(gè)JSON對(duì)象，還可以為null。具體規(guī)定如下：
復(fù)合類型的值只能是數(shù)組或?qū)ο螅?strong>不能是函數(shù)、正則表達(dá)式對(duì)象、日期對(duì)象。
原始類型的值只有四種：字符串、數(shù)值（必須以十進(jìn)制表示）、布爾值和
null（不能使用NaN,?Infinity,?-Infinity和undefined）。字符串必須使用雙引號(hào)表示，不能使用單引號(hào)。
對(duì)象的鍵名必須放在雙引號(hào)里面。
數(shù)組或?qū)ο笞詈笠粋€(gè)成員的后面，不能加逗號(hào)。
?以下是常見的JSON對(duì)象舉例
["abc", "def", "qwe"]
{ "age": 18, "height": 189 }
{"names": ["張三", "李四"] }
[ { "name": "張三"}, {"name": "李四"} ]二 JSON配置文件
認(rèn)識(shí)了JSON是什么，再來(lái)看一下什么是JSON配置文件。顧名思義，JSON配置文件就是使用JSON書寫的配置文件，對(duì)于配置文件而言，適合書寫與可表達(dá)數(shù)據(jù)的復(fù)雜度通常不可兼得，數(shù)據(jù)表達(dá)能力越強(qiáng)，自組織能力越強(qiáng)，越不適合人類書寫。通常用于做配置文件的這些，如conf、ini、toml、json、xml、yaml等，各有優(yōu)劣，conf、ini就是更側(cè)重適合書寫性，yaml、xml則更側(cè)重表達(dá)能力。而json就是比較折中的選擇了，讀寫都很方便，最大的缺點(diǎn)就是不能添加注釋。
微信小程序框架中包括四種不同的json配置文件，分別是：
- 項(xiàng)目根目錄中的 app.json 配置文件
- 項(xiàng)目根目錄中的 project.config.json 配置文件
- 項(xiàng)目根目錄中的 sitemap.json 配置文件
- 每個(gè)頁(yè)面文件夾中的 .json 配置文件
?接下來(lái)我們一一進(jìn)行介紹。
三?app.json 配置文件
app.json負(fù)責(zé)進(jìn)行整個(gè)小程序的全局配置，包括了小程序的所有頁(yè)面路徑、窗口外觀、界面表現(xiàn)、?tab區(qū)域等。demo 項(xiàng)目里邊的 app.json 配置內(nèi)容如下：
?可以看到，該文件中包括了四個(gè)配置項(xiàng)，分別是：
- pages：用來(lái)記錄當(dāng)前小程序所有頁(yè)面的路徑
- window：全局定義小程序所有頁(yè)面的背景色、文字顏色等
- style：全局定義小程序組件所使用的樣式版本
- sitemapLocation：用來(lái)指明 sitemap.json 的位置
在上一篇微信小程序新手入門教程一：零基礎(chǔ)上手-CSDN博客中，我們體驗(yàn)了在pages中直接添加路徑的方式快速創(chuàng)建了新的頁(yè)面，并實(shí)現(xiàn)了頁(yè)面視圖切換。pages就是記錄所有頁(yè)面路徑的一個(gè)列表，每一項(xiàng)都對(duì)應(yīng)一個(gè)頁(yè)面的路徑信息。需要注意的是，pages為string類型的數(shù)組，因此每一行內(nèi)容都需要“”括起來(lái)，用“，”分隔，整體用[]表示數(shù)組。文件名也不需要寫文件后綴，框架會(huì)自動(dòng)去尋找對(duì)應(yīng)位置的?.json,?.js,?.wxml,?.wxss?四個(gè)文件進(jìn)行處理。entryPagePath屬性則是指定小程序的默認(rèn)啟動(dòng)路徑（首頁(yè)），如果未指定entryPagePath?，則由pages數(shù)組的第一項(xiàng)作為小程序的首頁(yè)。
window配置項(xiàng)用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色相關(guān)。下面列舉幾個(gè)較為常用的屬性：
navigationBarBackgroundColor：設(shè)置導(dǎo)航欄背景顏色，需要用十六進(jìn)制表示
navigationBarTextStyle：導(dǎo)航欄標(biāo)題、狀態(tài)欄顏色，僅支持white/black
navigationBarTitleText：可以設(shè)置導(dǎo)航欄標(biāo)題文字內(nèi)容
backgroundColor：設(shè)置窗口的背景色
backgroundColorTop/ backgroundColorBottom：設(shè)置頂部/底部窗口的背景色
其他用法可參照官方文檔小程序配置 / 全局配置 (qq.com)?。
"window": {
"navigationBarBackgroundColor":"#227700",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "小程序",
"backgroundColor": "#0000FF",
"backgroundColorTop": "#00FFFF",
"backgroundTextStyle":"dark"
}
?此外，我們也可以通過tabBar來(lái)設(shè)置tab欄實(shí)現(xiàn)頁(yè)面切換，通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。
示例代碼展示如下：
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁(yè)",
"iconPath": "icon/home.png",
"selectedIconPath": "icon/s_home.png"
},
{
"pagePath": "pages/news/news",
"text": "新聞",
"iconPath": "icon/news.png",
"selectedIconPath": "icon/s_news.png"
},
{
"pagePath": "pages/add/add",
"text": "發(fā)布",
"iconPath": "icon/add.png",
"selectedIconPath": "icon/s_add.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "icon/message.png",
"selectedIconPath": "icon/s_message.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "icon/my.png",
"selectedIconPath": "icon/s_my.png"
}
],
"color": "#ffffff",
"backgroundColor": "#227700"
},其中l(wèi)ist為中為tab欄頁(yè)面的詳細(xì)信息，至少有兩項(xiàng)，可以通過text設(shè)置展示文字，iconPath設(shè)置圖標(biāo)樣式，selectedIconPath設(shè)置選中時(shí)圖標(biāo)樣式。
此外還可以通過color和selectedColor設(shè)置tab上文字及其被選中時(shí)的顏色，backgroundColor設(shè)置tab欄背景色，position設(shè)置tab欄所在位置，僅支持top和button（但是如果設(shè)置為top則不會(huì)顯示圖標(biāo)，只能顯示文字了）。
上述代碼效果如上。這里推薦iconfont-阿里巴巴矢量圖標(biāo)庫(kù)查找下載圖標(biāo)，里面有許多不同種類的圖標(biāo)，還可以自定義顏色。
簡(jiǎn)單的學(xué)習(xí)這些就夠用了，其他內(nèi)容可以結(jié)合官方教程自行探索????小程序配置 / 全局配置 (qq.com)
?
?四?project.config.json 文件
project.config.json 是項(xiàng)目配置文件，這個(gè)文件相對(duì)來(lái)說(shuō)就簡(jiǎn)單多了，主要用于記錄一些個(gè)性化配置。
在setting中記錄的是編譯相關(guān)的配置， projectname為項(xiàng)目名稱.......這里不多贅述。
五?sitemap.json 文件
這個(gè)文件就更簡(jiǎn)單了，里面只有不到十行代碼。簡(jiǎn)單看一下內(nèi)容就可以知道它主要用來(lái)設(shè)置小程序是否允許微信索引。當(dāng)開發(fā)者允許微信索引時(shí)，微信會(huì)通過爬蟲為小程序的頁(yè)面內(nèi)容建立索引。當(dāng)用戶的搜索關(guān)鍵字和頁(yè)面的索引匹配成功的時(shí)候，小程序的頁(yè)面將可能展示在搜索結(jié)果中。sitemap 的索引提示是默認(rèn)開啟的，可以在?project.config.json 的 setting 中配置字段 checkSiteMap 為 false來(lái)關(guān)閉。
六?頁(yè)面的 .json 配置文件
這些配置文件就是獨(dú)屬于每個(gè)頁(yè)面的了，用法與app.json相同，可以幫助我們對(duì)不同頁(yè)面進(jìn)行個(gè)性化設(shè)置，如果在該頁(yè)面和app.json中的相同配置項(xiàng)設(shè)置了不同的內(nèi)容，則該頁(yè)面中的配置項(xiàng)會(huì)覆蓋app.json中的。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-854589.html
以上就是關(guān)于json配置文件的全部介紹了，下一篇我們進(jìn)行語(yǔ)法和樣式的學(xué)習(xí)~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-854589.html
到了這里，關(guān)于微信小程序新手入門教程二：認(rèn)識(shí)JSON配置文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
