微信小程序全局配置参数详解app.json
全局配置
cc文件内容为一个 JSON 对象，有以下属性：
配置项
entryPagePath
指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。
{"entryPagePath": "pages/index/index"}pages
用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json,.js,.wxml,.wxss 四个文件进行处理。
未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。
小程序中新增/减少页面，都需要对 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 中写
{"pages": ["pages/index/index", "pages/logs/logs"]}window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
- 注 1：HexColor（十六进制颜色值），如"#ff00ff"
restartStrategy
基础库 2.8.0 开始支持，低版本需做兼容处理。
重新启动策略配置
|
可选值 |
含义 |
|
homePage |
（默认值）如果从这个页面退出小程序，下次将从首页冷启动 |
|
homePageAndLatestPage |
如果从这个页面退出小程序，下次冷启动后立刻加载这个页面， 页面的参数保持不变（不可用于 tab 页） |
例如：
{
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
tabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
|
属性 |
类型 |
必填 |
默认值 |
描述 |
|
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， |
- 其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：
|
属性 |
类型 |
必填 |
说明 |
|
pagePath |
string |
是 |
页面路径，必须在 pages 中先定义 |
|
text |
string |
是 |
tab 上按钮文字 |
|
iconPath |
string |
否 |
图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 |
|
selectedIconPath |
string |
否 |
选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 |
networkTimeout
各类网络请求的超时时间，单位均为毫秒。
|
属性 |
类型 |
必填 |
默认值 |
说明 |
|
request |
number |
否 |
60000 |
wx.request的超时时间，单位：毫秒。 |
|
connectSocket |
number |
否 |
60000 |
wx.connectSocket的超时时间，单位：毫秒。 |
|
uploadFile |
number |
否 |
60000 |
wx.uploadFile的超时时间，单位：毫秒。 |
|
downloadFile |
number |
否 |
60000 |
wx.downloadFile的超时时间，单位：毫秒。 |
debug
可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。
functionalPages
基础库 2.1.0 开始支持，低版本需做兼容处理。
插件所有者小程序需要设置这一项来启用插件功能页。
subpackages
微信客户端 6.6.0 ，基础库 1.7.3 及以上版本支持
启用分包加载时，声明项目分包结构。
写成 subPackages 也支持。
workers
基础库 1.9.90 开始支持，低版本需做兼容处理。
使用Worker处理多线程任务时，设置 Worker 代码放置的目录
requiredBackgroundModes
微信客户端 6.7.2 及以上版本支持
申明需要后台运行的能力，类型为数组。目前支持以下项目：
- audio: 后台音乐播放
- location: 后台定位
如：
{
"pages": ["pages/index/index"],
"requiredBackgroundModes": ["audio", "location"]
}
注：在此处申明了后台运行的接口，开发版和体验版上可以直接生效，正式版还需通过审核。
plugins
基础库 1.9.6 开始支持，低版本需做兼容处理。
声明小程序需要使用的插件。
preloadRule
基础库 2.3.0 开始支持，低版本需做兼容处理。
声明分包预下载的规则。
resizable
基础库 2.3.0 开始支持，低版本需做兼容处理。
在 iPad 上运行的小程序可以设置支持屏幕旋转。
在 PC 上运行的小程序，用户可以按照任意比例拖动窗口大小，也可以在小程序菜单中最大化窗口
usingComponents
开发者工具 1.02.1810190 及以上版本支持
在 app.json 中声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。
注意：全局声明的自定义组件会视为被所有页面依赖，会在所有页面启动时进行初始化，且会占用主包大小。只被个别页面或分包引用的自定义组件应尽量在页面配置中声明。
permission
微信客户端 7.0.0 及以上版本支持
小程序接口权限相关设置。字段类型为 Object，结构为：
|
属性 |
类型 |
必填 |
默认值 |
描述 |
|
scope.userLocation |
PermissionObject |
否 |
位置相关权限声明 |
PermissionObject 结构
|
属性 |
类型 |
必填 |
默认值 |
说明 |
|
desc |
string |
是 |
小程序获取权限时展示的接口用途说明。最长 30 个字符 |
如：
{
"pages": ["pages/index/index"],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
}
}
}
sitemapLocation
指明sitemap.json的位置；默认为 'sitemap.json' 即在 app.json 同级目录下名字的 sitemap.json 文件
style
基础库 2.8.0 开始支持，低版本需做兼容处理。
微信客户端 7.0 开始，UI 界面进行了大改版。小程序也进行了基础组件的样式升级。app.json 中配置 "style": "v2"可表明启用新版的组件样式。
本次改动涉及的组件有 button icon radio checkbox switch slider。可前往小程序示例进行体验。
useExtendedLib
基础库 2.2.1 开始支持，低版本需做兼容处理。
最新的 nightly 版开发者工具开始支持，同时基础库从支持 npm 的版本（2.2.1）起支持
指定需要引用的扩展库。目前支持以下项目：
- kbone: 多端开发框架
- weui: WeUI 组件库
指定后，相当于引入了对应扩展库相关的最新版本的 npm 包，同时也不占用小程序的包体积。rc工具版本支持分包引用。用法如下：
{
"useExtendedLib": {
"kbone": true,
"weui": true
}
}
entranceDeclare
微信客户端 7.0.9 及以上版本支持，iOS 暂不支持
聊天位置消息用打车类小程序打开，详情参考。
"entranceDeclare": {
"locationMessage": {
"path": "pages/index/index",
"query": "foo=bar"
}
}
darkmode
开发者工具 1.03.2004271 及以上版本支持，基础库 2.11.0 及以上版本支持
微信 iOS 客户端 7.0.12 版本、Android客户端 7.0.13 版本正式支持 DarkMode，可通过配置"darkmode": true表示当前小程序可适配 DarkMode，所有基础组件均会根据系统主题展示不同的默认样式，navigation bar 和 tab bar 也会根据开发者的配置自动切换。
配置后，请根据DarkMode 适配指南自行完成基础样式以外的适配工作。
{
"darkmode": true
}
themeLocation
自定义theme.json的路径，当配置"darkmode":true时，当前配置文件为必填项。
{
"themeLocation": "/path/to/theme.json"
}
lazyCodeLoading
目前仅支持值 requiredComponents，代表开启小程序「按需注入」特性。
{
"lazyCodeLoading": "requiredComponents"
}
singlePage
基础库 2.11.3 及以上版本支持，目前分享到朋友圈 (Beta)后打开会进入单页模式
单页模式相关配置
|
属性 |
类型 |
必填 |
默认值 |
描述 |
|
navigationBarFit |
String |
否 |
默认自动调整，若原页面是自定义导航栏，则为 float，否则为 squeezed |
导航栏与页面的相交状态，值为 float 时表示导航栏浮在页面上，与页面相交；值为 squeezed 时表示页面被导航栏挤压，与页面不相交 |
embeddedAppIdList
指定小程序可通过wx.openEmbeddedMiniProgram打开的小程序名单。
{
"embeddedAppIdList": ["wxe5f52902cf4de896"]
}
halfPage
|
属性 |
类型 |
必填 |
默认值 |
描述 |
|
firstPageNavigationStyle |
string |
否 |
视频号直播打开的第一个页面的全屏状态使用自定义顶部，支持default/custom |
{
"halfPage": {
"firstPageNavigationStyle": "custom"
}
}
debugOptions
小程序调试相关配置项
|
属性 |
类型 |
必填 |
默认值 |
描述 |
|
enableFPSPanel |
boolean |
否 |
false |
是否开启 FPS 面板 |
{
"debugOptions": {
"enableFPSPanel": "custom"
}
}
enablePassiveEvent
touch 相关事件默认的 passive 为 false。如果小程序不使用 catchtouch* 事件时，可以通过这个选项将 passive 置为 true，以提高滚动性能。具体原理可参考MDN。
可以直接设置这个选项为 true，也可以分别控制某个事件。
{
"enablePassiveEvent": true
}
|
属性 |
类型 |
必填 |
默认值 |
描述 |
|
touchstart |
boolean |
否 |
false |
是否设置 touchstart 事件为 passive |
|
touchmove |
boolean |
否 |
false |
是否设置 touchmove 事件为 passive |
|
wheel |
boolean |
否 |
false |
是否设置 wheel 事件为 passive |
{
"enablePassiveEvent": {
"touchstart": true
}
}
注意
开启了 enablePassiveEvent 之后，使用以下内置组件可能会导致出现非预期的行为，但不会导致页面白屏。
touchmove 设置为 true，如下内置组件可能会出现非预期表现：
- movable-area
- movable-view
- vedio
- canvas（windows、mac 小程序）
- picker-view-column
wheel 设置为 true，如下内置组件可能会出现非预期表现：
- swiper（mac 小程序）
- map
推荐在用到如上组件的页面中将对应事件的 enablePassiveEvent 设置为 false 以避免非预期行为。
resolveAlias
使用 resolveAlias 配置项用来自定义模块路径的映射规则。
配置了之后，会对 require 里的模块路径进行规则匹配并映射成配置的路径。
如果命中多条映射规则，则取最长的命中规则。
{
"resolveAlias": {
"~/*": "/*",
"~/origin/*": "origin/*"
"@utils/*": "utils/*",
"subBUtils/*": "subpackageB/utils/*"
}
}
注意
- resolveAlias 进行的是路径匹配，其中的 key 和 value 须以 /* 结尾。
配置了上述路径映射规则，会做如下匹配并转换
- ~/mod.js -> mod.js
- ~/origin/mod.js -> origin/mod.js
- @utils/mod.js -> utils/mod.js
- subBUtils/mod.js -> subpackageB/utils/mod.js
- 如果在 project.config.json 中指定了 miniprogramRoot，则 /* 指代的根目录是 miniprogramRoot 对应的路径，而不是开发者工具项目的根目录
配置示例
{
"pages": ["pages/index/index", "pages/logs/index"],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
}
微信小程序全局配置参数详解app.json相关推荐
- php小程序开发实例,微信小程序全局配置开发实例
本文主要和大家分享微信小程序全局配置开发实例,主要以代码的形式和大家分享,希望能帮助到大家. 一.app.json 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设 ...
- php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml 显 ...
- 逆战之微信小程序全局配置
微信小程序之全局配置-1 小程序的配置分为全局配置.页面配置及sitemap 配置 全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置.文件内容为一个 JSON 对象,有以 ...
- 微信小程序系列4——传值详解
前言 在开发程序过程中,会遇到各种各样的传值的情景,例如:页面之间的传值.回调.代理.通知等.而在微信小程序中,传值的方式和Android和iOS的方式有一定的异同. 微信小程序使用的数据传值方式 ...
- 微信小程序框架(一)-全面详解（学习总结---从入门到深化）
目录 小程序与普通网页开发的区别 体验小程序 微信小程序账号申请 微信小程序开发者工具 下载安装 创建项目 开发者工具说明 小程序目录结构 描述整体的 app 描述各自页面的 page 全局配置_Pa ...
- 微信小程序框架(四)-全面详解（学习总结---从入门到深化）
目录 路由_navigateTo 页面跳转 携带参数 返回上一级页面 路由_redirectTo 页面跳转 路由_reLaunch 页面跳转 路由_switchTab 实现 tabbar 页面跳转 交 ...
- 微信小程序框架(二)-全面详解（学习总结---从入门到深化）
目录 组件_基础视图 容器 view 文本 text 图片 image 组件_滑块视图容器 基本实现 Swiper常用属性说明 组件_滚动视图区域 水平滚动 垂直滚动 常用属性 组件_icon 图标使 ...
- uni-app 微信小程序全局配置分享好友、朋友圈...
使用uni-app在实际项目中开发微信小程序,经常会遇到给项目添加分享给微信好友.朋友圈...功能,一般来说要将某个页面分享出去,就要在当前页面添加: <template> <vie ...
- 微信小程序框架(五)-全面详解（学习总结---从入门到深化）
目录 UI框架_TDesign 引入TDesign UI框架_TDesign组件 Rate 评分 Toast 轻提示 UI框架_Vant 使用方式 引入组件 UI框架_Vant组件 Overlay 遮 ...
最新文章
- JavaScript 各种遍历方式详解
- linux标准daemon编写方式
- 构建Chua 混沌电路 - 基本测试
- JS框架设计之命名空间设计一种子模块
- 周围剃光头顶留长发型_为什么很多秃头的人，宁愿周围留一圈头发，也不愿剃成光头？...
- 除了BAT，国内还有哪些值得关注的人工智能公司？
- 数字图像处理：第十三章 图象复原
- CDN关键技术研究与应用—内容路由技术
- 文档过期打不开怎么办_4 个超实用金山文档小技巧，很强大也很简单，赶紧收藏！...
- oracle脚本如何写,怎样写sql脚本
- NB-IOT ---5G时代三兄弟，NB-IoT到底有多少优势？
- （Arxiv-2021）掩码自编码器是可扩展的视觉学习者
- Maven项目管理实战(二)--pom.xml
- java sqrt函数源码_Java sqrt源码解析
- 学生的知识管理工具：有道云笔记、幕布和 Effie
- overleaf表格_latex编写表格.doc
- java租车_Java 哒哒租车系统(控制台)
- Android P （9.0）刘海屏(DisplayCutout)适配方法
- 校园综合服务平台-微信小程序
- 判断系统是centos还是ubuntu的linux命令