小程序的開發者們好消息來了，目前，以為開發者透露，其已受邀參加今日頭條小程序內測，如果不出意外，今日頭條小程序平臺很快就會發布。如果今日頭條發佈小程序，將是繼BAT後，第四家發佈小程序的互聯網平臺。這也證明小程序的重要性，不然各大廠商紛紛加碼小程序幹嘛，或許這就是下一個互聯網的風口，用雷軍的一句話就是站在風口豬都能飛起來，所以，大家抓緊這個風口趕緊投入小程序的開發吧。
今天給大家介紹微信小程序的配置中的全局配置。其實這配置很簡單就是一個json文件，下面詳細介紹每一項的具體配置情況：
一、配置文件位置
二、pages頁面路徑列表配置
用於指定小程序由哪些頁面組成，每一項都對應一個頁面的 路徑+文件名 信息。文件名不需要寫文件後綴，框架會自動去尋找對於位置的 .json, .js, .wxml, .wxss 四個文件進行處理。
注意：數組的第一項代表小程序的初始頁面（首頁）。小程序中新增/減少頁面，都需要對
pages 數組進行修改。
這個頁面路徑列表就相當於整個小程序的每一個頁面的鏈接，和vue框架中的路由是一回事，另外要注意的是之前小程序的路由活動層級有限制，一旦超過限制就不起作用了，小編自己在開發過程中曾經遇到過此問題，不知道限制限制解除了沒有。
就那官方的默認demo代碼來說，總共有兩個頁面一個是首頁，一個是日誌記錄頁面，所以他的pages配置如下：
另外給大家的小技巧就是開發的時候因為每次都要刷新看效果，如果頁面很多我要看效果的頁面入口不好找怎麼辦？其實這個很好辦只需要我們將要看效果的頁面的地址移動到pages中的第一個位置，然後你每次刷新看到的就是了。
三、window全局的默認窗口表現
用於設置小程序的狀態欄、導航條、標題、窗口背景色。這裡有很多設置項，我就不一一講解，請看官方文檔如下：
下面這幾個是我們開發中會常修改的，其他的幾乎用的不多
另外還有兩個重要項enablePullDownRefresh和onReachBottomDistance，這兩個第一個是下拉刷新的，不過通常都是在需要下拉刷新的頁面設置而沒必要全局設置，第二個是上拉觸底距離底部多少時觸發事件，這個大家可以根據自己的實際情況設置，不過通常小編都是默認的即不設置。
四、tabbar配置
如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。
它的配置項不多如下：
雖然配置項不多，但是每個配置項都很重要，開發中如果用到的話，基本上都是需要修改這個的幾乎是每一個都要修改的，最為重要的就是list這個配置項瞭如下：
這幾個配置項是開發中必須會修改的，這裡呢我們就用一個例子來說明其用法，比如我們要做如下這種效果的tabbar：
那麼整個tabbar的代碼如下：
"tabBar": {
"color":"#aeb6bd",
"selectedColor":"#f35150",
"backgroundColor":"#ffffff",
"borderStyle":"black",
"list": [{
"pagePath": "pages/custom/custom",
"text": "預約",
"iconPath":"/images/custom.png",
"selectedIconPath":"/images/custom_in.png"
},{
"pagePath": "pages/coupon/coupon",
"text": "活動",
"iconPath":"/images/coupon.png",
"selectedIconPath":"/images/coupon_in.png"
},{
"pagePath": "pages/bigcms/bigcms",
"text": "作品",
"iconPath":"/images/cms.png",
"selectedIconPath":"/images/cms_in.png"
},{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath":"/images/my.png",
"selectedIconPath":"/images/my_in.png"
}]
}
運行以上代碼就得到開始我們想要的效果了，其實這個不能主要就是幾句配置一些，然後將顏色和圖標對應好久可以了。但是在開發過程中往往有很多需求是很奇葩的，這個時候如果官方的tabbar不能滿足你的要求，其實我們完全可以自己寫一個自定義的tabbar不如我們將上面的tabbar去掉，用自定義的方式來完成這個tabbar，代碼如下：
首先是結構如下：
<view>
<view>
<image>
<text>預約/<text>
/<view>
<view>
<image>
<text>活動/<text>
/<view>
<view>
<image>
<text>作品/<text>
/<view>
<view>
<image>
<text>我的/<text>
/<view>
/<view>
然後是樣式，這裡我把樣式放在了app.wxss裡面，畢竟這個tabbar其他頁面還需要用到，代碼如下：
.tabbar{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: #ccc;
}
.tabbar view{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 10rpx 0;
}
.tabbar image{
width: 80rpx;
height: 80rpx;
}
到這裡你會發現我們做的更本就沒有功能不能點擊跳轉，這裡就需要我們使用到路由了，將代碼修改如下：
<view>
<view>
<image>
<text>預約/<text>
/<view>
<navigator>
<image>
<text>活動/<text>
/<navigator>
<navigator>
<image>
<text>作品/<text>
/<navigator>
<navigator>
<image>
<text>我的/<text>
/<navigator>
/<view>
樣式修改如下：
.tabbar{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: #ccc;
}
.tabbar view,.tabbar navigator{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 10rpx 0;
}
.tabbar image{
width: 80rpx;
height: 80rpx;
}
這個時候但我們點擊時就可以跳轉了，當跳轉到其他頁面時複製這段代碼然後修改相應頁面的圖片即可，如當我點擊user時跳轉到user頁面的代碼如下：
<view>
<navigator>
<image>
<text>預約/<text>
/<navigator>
<navigator>
<image>
<text>活動/<text>
/<navigator>
<navigator>
<image>
<text>作品/<text>
/<navigator>
<view>
<image>
<text>我的/<text>
/<view>
/<view>
效果如下：
到這裡代碼就差不多了，但是還有個問題就是我們每點擊一次都會將路由入棧一次，導致棧裡面保存太多路由了，所以需要在每個路由上加上一個開放屬性如下圖：
五、networkTimeout
網路請求超時時間配置，有時在網絡不好的情況下可能會出現網絡請求超時，這裡我們可以統一配置超時的時間，配置項如下;
這裡根據自己的實際項目來看，基本上請求是都會有的，畢竟你需要調用接口所以請求需要設置，其他的根據實際情況考慮即可。
六、debug
可以在開發者工具中開啟 debug 模式，在開發者工具的控制檯面板，調試信息以 info 的形式給出，其信息有Page的註冊，頁面路由，數據更新，事件觸發等。可以幫助開發者快速定位一些常見的問題。這個主要是為了方便開發者調試，所以開發的時候記得開啟，開發完成記得關閉即可。在真機上跑的時候這個功能還是很好用的，所以大家一定記得有調試這個功能的哦。
後面的這幾個就不多介紹了，有的一般用不上，如果有用上的看看文檔也就八九不離十了
到處全局配置就完了，看吧內容很多，其實還是簡單的，記住幾個重點就可以了，今天我們就完全了小程序的基本設置以及tabbar的使用和自定義。
最後感謝大家支持！如果覺得有幫助請點贊、收藏和轉發！
閱讀更多 程序猿肸哥 的文章
