微信小程序综合配置【app.json 全解】{必须了解}

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

以下是一个包含了所有配置选项的 app.json ：

首先来说说：

App()

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

App({
  onLaunch: function(options) {
    // Do something initial when launch.
},
  onShow: function(options) {
    // Do something when show.
},
  onHide: function() {
    // Do something when hide.
},
  onError: function(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

详情：https://developers.weixin.qq.com/miniprogram/dev/framework/operating-mechanism.html

onLaunch, onShow 参数

onPageNotFound

基础库 1.9.90 开始支持，低版本需做兼容处理

当要打开的页面并不存在时，会回调这个监听器，并带上以下信息：

开发者可以在 onPageNotFound 回调中进行重定向处理，但必须在回调中同步处理，异步处理（例如 setTimeout 异步执行）无效。

示例代码：

App({
  onPageNotFound(res) {
  wx.redirectTo({
      url: 'pages/...'
    }) // 如果是 tabbar 页面，请使用 wx.switchTab
  }
})

注意：

1. 如果开发者没有添加 onPageNotFound 监听，当跳转页面不存在时，将推入微信客户端原生的页面不存在提示页面
2. 如果 onPageNotFound 回调中又重定向到另一个不存在的页面，将推入微信客户端原生的页面不存在提示页面，并且不在回调 onPageNotFound

注意：

• App() 必须在 app.js 中注册，且不能注册多个。
• 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
• 不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
• 通过 getApp() 获取实例之后，不要私自调用生命周期函数。

{
    "pages": [
    "pages/index/index",
    "pages/logs/index"
],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
      "text": "首页"
    }, {
        "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，

数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。

如开发目录为：

pages/
pages/index/index.wxml
pages/index/index.js
pages/index/index.wxss
pages/logs/logs.wxml
pages/logs/logs.js
app.js
app.json
app.wxss

则需要在 app.json 中写：

{
    "pages":[
    "pages/index/index",
    "pages/logs/logs"
]
}

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

注：HexColor（十六进制颜色值），如"#ff00ff"

注：navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用） 可方便切到旧视觉

如 app.json ：

"window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "首页的内容",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  },

效果：

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：

1. 当设置 position 为 top 时，将不会显示 icon
2. tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

,
   "tabBar": {
       "color": "#959394",  //文字默认颜色
           "selectedColor": "#959394",//文字被选中时的颜色
           "backgroundColor": "#f0f0f0",//背景色
           "borderStyle": "white",//TAB栏边框颜色
           "list": [
           {
               "pagePath": "pages/tabOne/tabOne",//导航页面
               "iconPath": "pages/images/1.png",//默认图片路径
               "selectedIconPath": "pages/images/1.png",//被选中时的图片路径
               "text": "首页"
           },
           {
               "pagePath": "pages/tabTwo/tabTwo",
               "iconPath": "pages/images/2.png",
               "selectedIconPath": "pages/images/2.png",
               "text": "朋友"
           },
           {
               "pagePath": "pages/tabThree/tabThree",
               "iconPath": "pages/images/3.png",
               "selectedIconPath": "pages/images/3.png",
               "text": "我的"
           }
       ]
   }

2-3.效果：

networkTimeout

可以设置各种网络请求的超时时间。

debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。

附：

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，如：

{
    "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

注：综合详解App.json，文章参考官方文档