全局配置
小程序根目录下的app.json文件用来对小程序进行全局配置,决定页面的窗口表现、设置多 tab ,设置权限等。
配置示例:
{
"window": {
"navigationStyle": "default",
"navigationBarBackgroundColor": "#2DBCFE",
"navigationBarTitleText": "小程序列表",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#000000",
"selectedColor": "#0000FF",
"backgroundColor": "#FFFFF0",
"borderStyle": "black",
"list": [
{
"pagePath": "index.js",
"text": "首页",
"iconPath": "img/wx.png",
"selectedIconPath": "img/wxfriend.png"
},
{
"pagePath": "feedback.js",
"text": "服务",
"iconPath": "img/wx.png",
"selectedIconPath": "img/wxfriend.png"
}
]
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
},
"scope.userInfo": {
"desc": "你的用户信息将用于小程序用户展示"
}
}
}
app.json配置项列表
属性 | 类型 | 必填 | 描述 | 最低版本 |
---|---|---|---|---|
window | Object | 否 | 全局的默认窗口表现 | |
tabBar | Object | 否 | 底部 tab 栏的表现 | |
permission | Object | 否 | 小程序接口权限相关设置 |
表4-1
- window用于设置小程序的状态栏、导航条、标题、窗口背景色。
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationStyle | String | default | 导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏,只保留右上角胶囊按 |
navigationBarBackgroundColor | String | #FF00FF | 导航栏背景颜色 和 状态栏背景色 如 "#FF00FF" |
navigationBarTitleText | String | 导航栏标题文字内容 | |
navigationBarTextStyle | String | white | 导航栏标题颜色,胶囊按钮的颜色。仅支持 black / white |
表4-2
- tabBar如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
color | String | tab 上的文字默认颜色 | |
selectedColor | String | tab 上的文字选中时的颜色 | |
backgroundColor | String | tab 的背景色 | |
borderStyle | String | black | tabbar上边框的颜色, 仅支持 black / white |
list | Array | tab 的列表,详见 list 属性说明,最少2个、最多5个 tab |
表4-3
其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
pagePath | String | 是 | 页面路径,必须在 pages 中先定义 |
text | String | 是 | tab 上的文字选中时的颜色 |
iconPath | String | 否 | 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。 |
selectedIconPath | String | 否 | 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。 |
表4-4
图4-1
- permission
小程序接口权限相关设置。字段类型为 Object,结构为
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
scope.userLocation | PermissionObject | 否 | 位置相关权限声明 |
表4-5
PermissionObject 结构
属性 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
desc | String | 是 | 小程序获取权限时展示的接口用途说明。最长30个字符 |
表4-6
如:
{
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
},
"scope.userInfo": {
"desc": "你的用户信息将用于界面展示"
}
}
}
授权:
部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个 scope ,用户选择对 scope 来进行授权,当授权给一个 scope 之后,其对应的所有接口都可以直接使用。
部分接口需要获得用户授权同意后才能调用。此类接口调用时:
如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口;
如果用户已授权,可以直接调用接口;
如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。
获取用户授权设置(暂未实现)
开发者可以使用 moduleName.getSetting 获取用户当前的授权状态。
打开设置界面(暂未实现)
用户可以在小程序设置界面(「右上角」 - 「关于」 - 「右上角」 - 「设置」)中控制对该小程序的授权状态。
开发者可以调用 moduleName.openSetting 打开设置界面,引导用户开启授权。
提前发起授权请求
开发者可以使用 moduleName.authorize 在调用需授权 API 之前,提前向用户发起授权请求。
scope 列表
scope | 对应接口 | 描述 |
---|---|---|
scope.userInfo | moduleName.getUserInfo | 用户信息 |
scope.userLocation | moduleName.getLocation | 地理信息 |
scope.userCamera | moduleName.captureImage moduleName.captureVideo moduleName.scanCode | 摄像头 |
表4-7