一、全局配置 app.json
{
"pages":[
"pages/index/index",
"pages/img/img",
"pages/mine/mine",
"pages/search/search"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icon/home.png",
"selectedIconPath": "icon/home_active.png"
},
{
"pagePath": "pages/img/img",
"text": "图片",
"iconPath": "icon/img.png",
"selectedIconPath": "icon/img_active.png"
},
{
"pagePath": "pages/mine/mine",
"text": "个人中心",
"iconPath": "icon/mine.png",
"selectedIconPath": "icon/mine_active.png"
},
{
"pagePath": "pages/search/search",
"text": "搜索",
"iconPath": "icon/search.png",
"selectedIconPath": "icon/search_active.png"
}],
"selectedColor":"#1296db",
"backgroundColor":"#cdcdcd"
}
}
字段的含义
1.pages——用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。新建页面时,在pages字段中定义好页面路径,小程序会自动创建该页面的.wxml,.wxss,.js,.json文件,无需自己动手创建。
2.window——定义小程序所有页面的顶部导航栏背景颜色,标题颜色,标题文字内容,导航栏样式,窗口的背景色,下拉loading的样式(即下拉时表示正在加载的三个点的样式),是否开启全局下拉刷新(enablePullDownRefresh:true),窗口颜色(下拉loading区域的颜色)等。
3.tabBar——用于配置tab页(导航栏)的跳转路径,名称,position(top/bottom,将tab导航栏设置为top时,图标会失效,这是微信规定的),被选中后的文字颜色,未被选中时的图标 以及 被选中时的图标等。
4.style——微信客户端 7.0 开始,UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 "style": "v2"可表明启用新版的组件样式。
二、页面配置
每一个小程序页面也可以使用 .json 文件(如pages/index/index.json文件,配置项只对自身页面生效)来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象,有以下属性,以下的所有属性只对自身页面生效:
配置项
属性 |
类型 |
默认值 |
描述 |
navigationBarBackgroundColor |
HexColor |
#000000 |
导航栏背景颜色,如 #000000 |
navigationBarTextStyle |
string |
white |
导航栏标题颜色,仅支持 black / white |
navigationBarTitleText |
string |
导航栏标题文字内容 |
|
navigationStyle |
string |
default |
导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮 |
backgroundColor |
HexColor |
#ffffff |
窗口的背景色 |
backgroundTextStyle |
string |
dark |
下拉 loading 的样式,仅支持 dark / light |
backgroundColorTop |
string |
#ffffff |
顶部窗口的背景色,仅 iOS 支持 |
backgroundColorBottom |
string |
#ffffff |
底部窗口的背景色,仅 iOS 支持 |
enablePullDownRefresh |
boolean |
false |
是否开启当前页面下拉刷新。 |
onReachBottomDistance |
number |
50 |
页面上拉触底事件触发时距页面底部距离,单位为px。 |
pageOrientation |
string |
portrait |
屏幕旋转设置,支持 auto/ portrait / landscape 详见 响应显示区域变化 |
disableScroll |
boolean |
false |
设置为 true 则页面整体不能上下滚动。 只在页面配置中有效,无法在 app.json 中设置 |
usingComponents |
Object |
否 |
页面自定义组件配置 |
style |
string |
default |
启用新版的组件样式 |
三、sitemap配置
微信现已开放小程序内搜索,开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。
小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有 sitemap.json ,则默认为所有页面都允许被索引;sitemap.json 有以下属性:
配置项
属性 |
类型 |
必填 |
描述 |
rules |
Object[] |
是 |
索引规则列表 |