app.json
The app.json file configures the WeChat applet globally, determines the path of the page file, the window performance, sets the network timeout, and sets multiple tabs .
The App.json configuration item has five properties: pages , window , tabBar , networkTimeout , debug .
Pages
Accepts an array, each item is a string , representing the [path + file name] information of the corresponding page, the first item of the array is the initial page. To add / remove pages in the applet , you need to modify the pages array.
The file name does not need to write a file suffix, because the framework will automatically find the four files of the path .json, .js, .wxml, and .wxss for integration.
| "pages":[ "pages/index/index" "pages/logs/logs" ] |
window
Used to set the status bar, navigation bar, title, and window background color of the applet.
| "window":{ "navigationBarBackgroundColor": "#000000", "navigationBarTextStyle": "white", "navigationBarTitleText": "WeChat interface function demonstration", "backgroundColor": "#ffffff", "backgroundTextStyle": "dark", "enablePullDownRefresh": false } |
Among them, navigationBarTextStyle only supports black/white , and backgroundTextStyle only supports dark/light
tabBar
We can specify the performance of the tab bar and the corresponding page displayed when the tab is switched through the tabBar configuration item. tabBar is an array, which can only be configured with a minimum of 2 and a maximum of 5 tabs, and the tabs are sorted in the order of the array.
| "tabBar": { "color": "#ccc", "selectedColor": "#35495e", "backgroundColor": "#fafafa", "borderStyle": "black", "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "images/index.png", "selectedIconPath": "images/index-actived.png" }, { "pagePath": "pages/logs/logs", "text": "日志", "iconPath": "images/log.png", "selectedIconPath": "images/log-actived.png" }], "position": "bottom" } |
其中，borderStyle，仅支持black/white，position值为top/bottom，iconPath和selectedIconPath图片大小限制为40kb
networkTimeout
微信小程序提供四种网络请求，而该属性可以设置各种网络请求的超时时间，单位毫秒
（1）普通HTTPS请求(wx.request)
（2）WebSocket通信(wx.connectSocket)
（3）上传文件(wx.uploadFile)
（4）下载文件(wx.downloadFile)
| "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 } |
Debug
可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。
| "debug": true |
参照豆瓣电影微信小程序的一个完整的app.json如下：
| { "pages": [ "pages/featured/featured", "pages/splash/splash", "pages/movie/movie", "pages/usbox/usbox", "pages/search/search", "pages/profile/profile" ], "window": { "navigationBarBackgroundColor": "#000000", "navigationBarTextStyle": "white", "navigationBarTitleText": "豆瓣电影", "backgroundColor": "#ffffff", "backgroundTextStyle": "dark", "enablePullDownRefresh": false }, "tabBar": { "color": "#ccc", "selectedColor": "#35495e", "borderStyle": "white", "backgroundColor": "#fafafa", "position": "bottom", "list": [ { "text": "推荐电影", "pagePath": "pages/featured/featured", "iconPath": "images/featured.png", "selectedIconPath": "images/featured-actived.png" }, { "text": "正在上映", "pagePath": "pages/usbox/usbox", "iconPath": "images/usbox.png", "selectedIconPath": "images/usbox-actived.png" }, { "text": "搜索", "pagePath": "pages/search/search", "iconPath": "images/search.png", "selectedIconPath": "images/search-actived.png" }, { "text": "资讯", "pagePath": "pages/splash/splash", "iconPath": "images/news.png", "selectedIconPath": "images/news-actived.png" }, { "text": "我的", "pagePath": "pages/profile/profile", "iconPath": "images/profile.png", "selectedIconPath": "images/profile-actived.png" } ] }, "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, "debug": true } |
另外，每一个小程序页面也可以使用page.json文件对本页面的窗口表现进行配置。 页面中配置项会覆盖 app.json 的 window 中相同的配置项。因为只能设置 window 相关的配置项，所以无需写 window 这个键，如：
| { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" } |