app.json文件详解

最新推荐文章于 2025-09-04 22:52:37 发布

原创最新推荐文章于 2025-09-04 22:52:37 发布 · 6k 阅读

23 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

1 篇文章

订阅专栏

app.json文件的详解

1. 属性说明

1. 属性说明

pages属性说明

页面配置

项目文件构成

示例

代码

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "ccblogs",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

window属性说明

navigationBarTitleText：导航栏标题文字内容
navigationBarBackgroundColor：导航栏背景颜色
navigationBarTextStyle：导航栏标题颜色

示例

代码

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "ccblogs",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

效果

enablePullDownRefresh：是否开启当前页面下拉刷新。
backgroundColor：设置背景色
backgroundTextStyle：下拉 loading 的样式，仅支持 dark / light

示例

代码

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "ccblogs",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#ddd"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

效果

单页面修改
1. 单页面修改内容需要在单页面的json中修改，比如修改日志界面需要在logs.json文件中修改，属性和全局app.json一致，index.json不需要设置，默认使用logs.json
2. 示例
  1. 代码
```
// logs.json
{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {}
}
```
  2. 效果
  3. 代码
```
// index.json
{
  "usingComponents": {}
}
```

底部触摸栏

list：Tabbar的项的数组，按照规范，至少要有2个Tabbar项
selectedColor：tab 上的文字选中时的颜色
borderStyle：tabBar上边框的颜色，仅支持 black/white
pagePath：跳转页面的路径
text：Tabbar项的标题
iconPath：Tabbar项的icon图片路径，建议使用绝对路径，相对路径要相对于组件所在目录的。
selectedIconPath：Tabbar项选中时的icon，建议使用绝对路径，相对路径要相对于组件所在目录的。

示例

代码

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "ccblogs",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#ddd"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "selectedColor": "#1AAD19",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/index/index",
      "borderStyle": "black",
      "text": "首页",
      "iconPath": "images/index.png",
      "selectedIconPath": "images/index_selected.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "images/log.png",
      "selectedIconPath": "images/log_selected.png"
    }]
  }
}

效果

网络请求的超时时间，单位：毫秒

request：普通 HTTPS 请求
connectSocket：WebSocket 通信
uploadFile：上传文件
downloadFile：下载文件
debug：设置为true，可以在调试器控制台打印出程序调试信息

示例

代码

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "ccblogs",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#ddd"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "selectedColor": "#1AAD19",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/index/index",
      "borderStyle": "black",
      "text": "首页",
      "iconPath": "images/index.png",
      "selectedIconPath": "images/index_selected.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "images/log.png",
      "selectedIconPath": "images/log_selected.png"
    }]
  },
  "networkTimeout": {
    "request": 20000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  },
  "debug": true
}