微信小程序 - app.json

app.json

 

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

 

App.json配置项有五个属性：pages、window、tabBar、networkTimeout、debug。

 

Pages

 

接受一个数组，每一项都是字符串，代表对应页面的【路径+文件名】信息，数组第一项为初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

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

 

"pages":[

    "pages/index/index"

    "pages/logs/logs"

]

 

 

window

 

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

 

"window":{

    "navigationBarBackgroundColor": "#000000",

    "navigationBarTextStyle": "white",

    "navigationBarTitleText": "微信接口功能演示",

    "backgroundColor": "#ffffff",

    "backgroundTextStyle": "dark",

    "enablePullDownRefresh": false

}

 

其中，navigationBarTextStyle，仅支持black/white，backgroundTextStyle仅支持dark/light

 

 

tabBar

 

我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

 

"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"

}