微信小程序-----全局配置

1、pages

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置

pages用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息.。

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

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

 

则需要在 app.json 中写。index就为首页展示

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

2、window

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

详见微信开发文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。	微信客户端 6.6.0
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。 详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 auto/ portrait / landscape  详见 响应显示区域变化	2.4.0 (auto) / 2.5.0(landscape)

3、tabbar

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

详见微信开发文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

属性	类型	必填	默认值	描述	最低版本
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 bottom/ top
custom	boolean	否	false	自定义 tabBar，见详情	2.5.0

 

{
  "pages": [
    "pages/index/index",
    "pages/hello/hello",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "飞燕科技",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "tabBar":{
    "color":"#8a8a8a",
    "selectedColor":"#349EDF",
    "list":[
      {
        "pagePath": "pages/index/index",
        "text":"首页"
      },
      {
      "pagePath": "pages/logs/logs",
      "text": "新闻"
      },
      {
        "pagePath": "pages/hello/hello",
        "text": "我的"
      }
    ]
  }
}

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

 icon图表网址：https://www.iconfont.cn/

iconPath图片、selectedIconPath选中图片效果如下：（注意图片各需要两组，一组未选中时颜色，一组选中时颜色）

代码如下：

"tabBar":{
    "color":"#8a8a8a",
    "selectedColor":"#349EDF",
    "list":[
      {
        "pagePath": "pages/index/index",
        "text":"首页",
        "iconPath":"images/tabBar/indent-decrease.png",
        "selectedIconPath":"images/tabBar/indent-decrease-select.png"
      },
      {
      "pagePath": "pages/logs/logs",
      "text": "新闻",
      "iconPath": "images/tabBar/apple.png",
      "selectedIconPath": "images/tabBar/apple-select.png"
      },
      {
        "pagePath": "pages/hello/hello",
        "text": "我的",
        "iconPath": "images/tabBar/safe.png",
        "selectedIconPath": "images/tabBar/safe-select.png"
      }
    ]
  }