微信小程序 app.json 文件配置

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

以下是一个包含了部分常用配置选项的 app.json

{
  "pages": [
    "pages/index/index",
    "pages/mine/mine"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle": "white",
    "navigationStyle": "default",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icon/home_1.png",
        "selectedIconPath": "icon/home.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "个人",
        "iconPath": "icon/mine_1.png",
        "selectedIconPath": "icon/mine.png"
      }
    ],
    "backgroundColor": "#fff"
  },
  "entryPagePath": "pages/index/index",
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

Pages

小程序中新增/减少页面，都需要对 pages 数组进行修改。

page存放的是文件路径，在pages文件夹下，每新增或者减少页面，pages数组要做相对应的修改，否则报错。

也可以在“app.json”文件里面的pages添加里直接添加文件，pages文件夹会自动生成文件，比如生成一个alone文件，就直接在此添加页面，点击快捷键ctrl+s保存

然后就在pages文件夹下自动创建文件啦

在pages文件夹下每创建一个文件，将它对应的路径添加到pages里，相当于路由。

window

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

代码如下：


backgroundTextStyle: 文本背景颜色,这里可以填“light”和“dark”两个变量。navigationBarBackgroundColor：为导航栏背景颜色。navigationBarTitleText：为导航栏标题文字。navigationBarTextStyle：为导航栏标题颜色，仅支持"black"或"white"。

tabBar

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

=》所谓图标按钮，那肯定是要有图标，我使用的是阿里巴巴矢量图标库，上链接( 阿里巴巴矢量图标库.)，搜索自己想要的图标就可以了，然后下载，存放到根目录image文件夹下
配置tabBar，配置代码如下：

color：文字颜色。
selectedColor：文字选中时的颜色。
backgroundColor：背景颜色。
borderStyle：tabBar上边框的颜色进行设置。
其中 list 接收一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其中：“pagePath”为页面路径，必须在 pages 中先定义。“text”就是tab 上按钮文字。“iconPath”就是图片路径，不支持网络图片。“selectedIconPath”就是我们选中时的图片路径，不支持网络图片。

上面的代码，具体实现情况如下：

注： *.json格式文件不能添加注释的，添加注释的快捷键是“ctrl+？”

networkTimeout
各类网络请求的超时时间，单位均为毫秒。
配置的代码如下：

"networkTimeout": {
   "request": 10000,
   "downloadFile": 10000
 }

完整的app.json配置代码如下：

{
  "pages": [
    "pages/index/index",
    "pages/mine/mine",
    "pages/alone/alone"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle": "white",
    "navigationStyle": "default",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#000",
    "selectedColor": "#56abe4",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icon/home_1.png",
        "selectedIconPath": "icon/home.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "个人",
        "iconPath": "icon/mine_1.png",
        "selectedIconPath": "icon/mine.png"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "entryPagePath": "pages/index/index",
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

app.json是对全局的配置, 还可以进行页面配置，每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

例如：

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