微信小程序从入门到学会第二天-------小程序的配置

一、前言

上篇文章我们谈到了关于小程序的项目文件结构，了解到小程序的运行流程，其中小程序的项目各种配置是很重要的，他直接决定了项目的布局和功能，下面我们一起来看下小程序中的一些配置文件的使用方法吧。

二、项目配置文件

文件名为project.config.json，这个文件被用来记录所有在开发者工具上所做的配置，这个文件中的配置一般不需要我们来手动修改，因此可以跳过。

三、全局配置文件

可以将这些配置参数应用到所有的文件当中去，文件名为app.json，如图：

图片

该文件一般来说可以配置页面上的很多选项，并且是通过设置常用的属性来进行功能的实现的。常用属性如下：

属性 类型 必填 描述 最低版本
entryPagePath string 否 小程序默认启动首页
pages string[] 是 页面路径列表
window Object 否 全局的默认窗口表现
tabBar Object 否 底部 tab 栏的表现
networkTimeout Object 否 网络超时时间
debug boolean 否 是否开启 debug 模式，默认关闭
functionalPages boolean 否 是否启用插件功能页，默认关闭 2.1.0
subpackages Object[] 否 分包结构配置 1.7.3
workers string 否 Worker 代码放置的目录 1.9.90
requiredBackgroundModes string[] 否 需要在后台使用的能力，如「音乐播放」
plugins Object 否 使用到的插件 1.9.6
preloadRule Object 否 分包预下载规则 2.3.0
resizable boolean 否 PC 小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋转。默认关闭 2.3.0
usingComponents Object 否 全局自定义组件配置 开发者工具 1.02.1810190
permission Object 否 小程序接口权限相关设置 微信客户端 7.0.0
sitemapLocation string 是 指明 sitemap.json 的位置
style string 否 指定使用升级后的weui样式 2.8.0
useExtendedLib Object 否 指定需要引用的扩展库 2.2.1
entranceDeclare Object 否 微信消息用小程序打开 微信客户端7.0.9
darkmode boolean 否 小程序支持 DarkMode 2.11.0
themeLocation string 否 指明 theme.json 的位置，darkmode为true为必填 开发者工具 1.03.2004271
lazyCodeLoading string 否 配置自定义组件代码按需注入 2.11.1
singlePage Object 否 单页模式相关配置 2.12.0
supportedMaterials Object 否 聊天素材小程序打开相关配置 2.14.3
serviceProviderTicket string 否 定制化型服务商票据
embeddedAppIdList string[] 否 内嵌小程序 appId

这些属性同时又对应有很多选项，如下：

entryPagePath

指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。

<pre spellcheck="false" lang="json" cid="n178" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"entryPagePath": "pages/index/index"
}</pre>

pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

小程序中新增/减少页面，都需要对 pages 数组进行修改。

如开发目录为：

<pre spellcheck="false" lang="text" cid="n184" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ ├── logs.wxml
│ └── logs.js
└── utils</pre>

则需要在 app.json 中写

<pre spellcheck="false" lang="json" cid="n186" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"pages": ["pages/index/index", "pages/logs/logs"]
}</pre>

window

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

属性 类型 默认值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000
navigationBarTextStyle string white 导航栏标题颜色，仅支持 black / white
navigationBarTitleText string
导航栏标题文字内容
navigationStyle string default 导航栏样式，仅支持以下值：default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。 iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持
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)
restartStrategy string homePage 重新启动策略配置 2.8.0
initialRenderingCache string
页面初始渲染缓存配置，支持 static / dynamic 2.11.1
visualEffectInBackground string none 切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none 2.15.0

  • 注 1：HexColor（十六进制颜色值），如"#ff00ff"

  • 注 2：关于

    <pre spellcheck="false" lang="" cid="n285" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">navigationStyle</pre>

  • iOS/Android 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。

  • iOS/Android 客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效

  • 开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉

  • Windows 客户端 3.0 及以上版本，为了给用户提供更符合桌面软件的使用体验，统一了小程序窗口的导航栏，navigationStyle: custom 不再生效

restartStrategy

基础库 2.8.0 开始支持，低版本需做兼容处理。

重新启动策略配置

可选值 含义
homePage （默认值）如果从这个页面退出小程序，下次将从首页冷启动
homePageAndLatestPage 如果从这个页面退出小程序，下次冷启动后立刻加载这个页面，页面的参数保持不变（不可用于 tab 页）

如：

<pre spellcheck="false" lang="json" cid="n310" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}</pre>

图片

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，见详情 2.5.0

其中 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。
图片

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: 后台定位

如：

<pre spellcheck="false" lang="json" cid="n458" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"pages": ["pages/index/index"],
"requiredBackgroundModes": ["audio", "location"]
}</pre>

注：在此处申明了后台运行的接口，开发版和体验版上可以直接生效，正式版还需通过审核。

plugins

基础库 1.9.6 开始支持，低版本需做兼容处理。

声明小程序需要使用的插件。

preloadRule

基础库 2.3.0 开始支持，低版本需做兼容处理。

声明分包预下载的规则。

resizable

基础库 2.3.0 开始支持，低版本需做兼容处理。

在 iPad 上运行的小程序可以设置支持屏幕旋转。

在 PC 上运行的小程序，用户可以按照任意比例拖动窗口大小，也可以在小程序菜单中最大化窗口

usingComponents

开发者工具 1.02.1810190 及以上版本支持

在此处声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。

permission

微信客户端 7.0.0 及以上版本支持

小程序接口权限相关设置。字段类型为 Object，结构为：

属性 类型 必填 默认值 描述
scope.userLocation PermissionObject 否
位置相关权限声明

PermissionObject 结构

属性 类型 必填 默认值 说明
desc string 是
小程序获取权限时展示的接口用途说明。最长 30 个字符

如：

<pre spellcheck="false" lang="json" cid="n509" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"pages": ["pages/index/index"],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
}
}
}</pre>

图片

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工具版本支持分包引用。用法如下：

<pre spellcheck="false" lang="json" cid="n530" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"useExtendedLib": {
"kbone": true,
"weui": true
}
}</pre>

entranceDeclare

微信客户端 7.0.9 及以上版本支持，iOS 暂不支持

聊天位置消息用打车类小程序打开，详情参考。

<pre spellcheck="false" lang="json" cid="n535" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">"entranceDeclare": {
"locationMessage": {
"path": "pages/index/index",
"query": "foo=bar"
}
}</pre>

darkmode

开发者工具 1.03.2004271 及以上版本支持，基础库 2.11.0 及以上版本支持

微信iOS客户端 7.0.12 版本、Android客户端 7.0.13 版本正式支持 DarkMode，可通过配置"darkmode": true表示当前小程序可适配 DarkMode，所有基础组件均会根据系统主题展示不同的默认样式，navigation bar 和 tab bar 也会根据开发者的配置自动切换。

配置后，请根据DarkMode 适配指南自行完成基础样式以外的适配工作。

<pre spellcheck="false" lang="json" cid="n541" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"darkmode": true
}</pre>

themeLocation

自定义 theme.json 的路径，当配置"darkmode":true时，当前配置文件为必填项。

<pre spellcheck="false" lang="json" cid="n544" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"themeLocation": "/path/to/theme.json"
}</pre>

lazyCodeLoading

目前仅支持值 requiredComponents，代表开启小程序「按需注入」特性。

<pre spellcheck="false" lang="json" cid="n547" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"lazyCodeLoading": "requiredComponents"
}</pre>

singlePage

基础库 2.11.3 及以上版本支持，目前分享到朋友圈 (Beta) 后打开会进入单页模式

单页模式相关配置

属性 类型 必填 默认值 描述
navigationBarFit String 否 默认自动调整，若原页面是自定义导航栏，则为 float，否则为 squeezed 导航栏与页面的相交状态，值为 float 时表示导航栏浮在页面上，与页面相交；值为 squeezed 时表示页面被导航栏挤压，与页面不相交

配置示例

<pre spellcheck="false" lang="json" cid="n566" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"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,
}</pre>

embeddedAppIdList

指定小程序可通过wx.openEmbeddedMiniProgram打开的小程序名单。

<pre spellcheck="false" lang="json" cid="n569" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"embeddedAppIdList": ["wxe5f52902cf4de896"]
}</pre>

四、页面配置文件

每个我们所创建的页面文件都会有这么一个文件，它的文件名是"文件夹名.json"，如图：

图片

这就是单页面的配置文件，我们都知道一个项目是由一个个页面组合而成的，所以每个页面不能用同一个配置，因此我们可以给每个页面不同的配置，相当于是局部配置，所以只能作用于当前页面，常用的属性如下：

属性 类型 默认值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000
navigationBarTextStyle string white 导航栏标题颜色，仅支持 black / white
navigationBarTitleText string
导航栏标题文字内容
navigationStyle string default 导航栏样式，仅支持以下值：default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 1。 iOS/Android 微信客户端 7.0.0，Windows 微信客户端不支持
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)
disableScroll boolean false 设置为 true 则页面整体不能上下滚动。只在页面配置中有效，无法在 app.json 中设置
usingComponents Object 否 页面自定义组件配置 1.6.3
initialRenderingCache string
页面初始渲染缓存配置，支持 static / dynamic 2.11.1
style string default 启用新版的组件样式 2.10.2
singlePage Object 否 单页模式相关配置 2.12.0
restartStrategy string homePage 重新启动策略配置 2.8.0

页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。

  • 注 1：关于

    <pre spellcheck="false" lang="" cid="n689" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">navigationStyle</pre>

  • iOS/Android 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。

  • iOS/Android 客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效

  • 开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉

  • Windows 客户端 3.0 及以上版本，为了给用户提供更符合桌面软件的使用体验，统一了小程序窗口的导航栏，navigationStyle: custom 不再生效

singlePage

基础库 2.11.3 及以上版本支持，目前分享到朋友圈 (Beta) 后打开会进入单页模式

单页模式相关配置

属性 类型 必填 默认值 描述
navigationBarFit String 否 默认自动调整，若原页面是自定义导航栏，则为 float，否则为 squeezed 导航栏与页面的相交状态，值为 float 时表示导航栏浮在页面上，与页面相交；值为 squeezed 时表示页面被导航栏挤压，与页面不相交

restartStrategy

基础库 2.8.0 开始支持，低版本需做兼容处理。

重新启动策略配置，与 app.json 中一致。

配置示例

<pre spellcheck="false" lang="json" cid="n721" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}</pre>

那么当我们要创建其它页面的时候该怎么办了，很简单，如图：

图片

首先新建一个文件夹，比如register，然后新建page，还是register，这样就可以创建一个单页面所要用到的所有文件了，如图：

图片

不过此时我们可以看到，我们是没有能访问该页面的条件的，现在我们给他修改一下，如图：

图片

可以看到，此时显示的就是register页面的默认内容了，实现的方法就是把该页面的地址放在第一位，这样默认启动页面就是register页面了。

五、sitemap配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；sitemap.json 有以下属性：

配置项

属性 类型 必填 描述
rules Object[] 是 索引规则列表

rules

rules 配置项指定了索引规则，每项规则为一个JSON对象，属性如下所示：

属性 类型 必填 默认值 取值 取值说明
action string 否 "allow" "allow"、"disallow" 命中该规则的页面是否能被索引
page string 是
"*"、页面的路径 * 表示所有页面，不能作为通配符使用
params string[] 否 []
当 page 字段指定的页面在被本规则匹配时可能使用的页面参数名称的列表（不含参数值）
matching string 否 "inclusive" 参考 matching 取值说明 当 page 字段指定的页面在被本规则匹配时，此参数说明 params 匹配方式
priority Number 否
优先级，值越大则规则越早被匹配，否则默认从上到下匹配

matching 取值说明

值 说明
exact 当小程序页面的参数列表等于 params 时，规则命中
inclusive 当小程序页面的参数列表包含 params 时，规则命中
exclusive 当小程序页面的参数列表与 params 交集为空时，规则命中
partial 当小程序页面的参数列表与 params 交集不为空时，规则命中

配置示例

<pre spellcheck="false" lang="json" cid="n807" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"rules":[{
"action": "allow",
"page": "path/to/page",
"params": ["a", "b"],
"matching": "exact"
}, {
"action": "disallow",
"page": "path/to/page"
}]
}</pre>

  • path/to/page?a=1&b=2 => 优先索引

  • path/to/page => 不被索引

  • path/to/page?a=1 => 不被索引

  • path/to/page?a=1&b=2&c=3 => 不被索引

  • 其他页面都会被索引

<pre spellcheck="false" lang="json" cid="n821" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"rules":[{
"action": "allow",
"page": "path/to/page",
"params": ["a", "b"],
"matching": "inclusive"
}, {
"action": "disallow",
"page": "path/to/page"
}]
}</pre>

  • path/to/page?a=1&b=2 => 优先索引

  • path/to/page?a=1&b=2&c=3 => 优先索引

  • path/to/page => 不被索引

  • path/to/page?a=1 => 不被索引

  • 其他页面都会被索引

<pre spellcheck="false" lang="json" cid="n835" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"rules":[{
"action": "allow",
"page": "path/to/page",
"params": ["a", "b"],
"matching": "exclusive"
}, {
"action": "disallow",
"page": "path/to/page"
}]
}</pre>

  • path/to/page => 优先索引

  • path/to/page?c=3 => 优先索引

  • path/to/page?a=1 => 不被索引

  • path/to/page?a=1&b=2 => 不被索引

  • 其他页面都会被索引

<pre spellcheck="false" lang="json" cid="n849" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">{
"rules":[{
"action": "allow",
"page": "path/to/page",
"params": ["a", "b"],
"matching": "partial"
}, {
"action": "disallow",
"page": "path/to/page"
}]
}</pre>

  • path/to/page?a=1 => 优先索引

  • path/to/page?a=1&b=2 => 优先索引

  • path/to/page => 不被索引

  • path/to/page?c=3 => 不被索引

  • 其他页面都会被索引

注：没有 sitemap.json 则默认所有页面都能被索引

注：{"action": "allow", "page": "\*"} 是优先级最低的默认规则，未显式指明 "disallow" 的都默认被索引

六、总结

以上的内容大部分均来自于腾讯官方文档，感兴趣可以去看看，这里小编只是加了一些个人的拙见，不够上述内容我们肯定是需要了解并且应用到的。更多精彩好文敬请关注公众号“简易编程网”。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 207,113评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,644评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,340评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,449评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,445评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,166评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,442评论 3赞 401
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,105评论 0赞 261
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,601评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,066评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,161评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,792评论 4赞 323
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,351评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,352评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,584评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,618评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,916评论 2赞 344

推荐阅读更多精彩内容