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

一、前言

上篇文章我们谈到了关于小法式的项目文件结构，领会到小法式的运转流程，其中小法式的项目各类设置是很重要的，他间接决议了项目标结构和功用，下面我们一路来看下小法式中的一些设置文件的利用方式吧。


二、项目设置文件

文件名为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 列表的第一项。不支持带页面途径参数。
{ "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

用于设备小法式的状态栏、导航条、题目、窗口布风景。

属性	范例	默许值	描写	最低版本
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：关于navigationStyle

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 页）

如：
{ "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，见详情	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: 背景定位

如：
{ "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 及以上版本支持

在此处声明的自界说组件视为全局自界说组件，在小法式内的页面或自界说组件中可以间接利用而无需再声明。
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 时暗示页面被导航栏挤压，与页面不订交

设置示例

{ "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,}embeddedAppIdList

指定小法式可经过wx.openEmbeddedMiniProgram翻开的小法式名单。
{ "embeddedAppIdList": ["wxe5f52902cf4de896"]}

四、页面设置文件

每个我们所建立的页面文件城市有这么一个文件，它的文件名是"文件夹名.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：关于navigationStyle

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 中分歧。
设置示例

{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功用演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light"}那末当我们要建立别的页面的时辰该怎样办了，很简单，如图：

首先新建一个文件夹，比如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 交集不为空时，法则射中

设置示例

{ "rules":[{   "action": "allow",   "page": "path/to/page",   "params": ["a", "b"],   "matching": "exact"}, {   "action": "disallow",   "page": "path/to/page"}]}

path/to/page?a=1&b=2 => 优先索引path/to/page => 不被索引path/to/page?a=1 => 不被索引path/to/page?a=1&b=2&c=3 => 不被索引其他页面城市被索引

{ "rules":[{   "action": "allow",   "page": "path/to/page",   "params": ["a", "b"],   "matching": "inclusive"}, {   "action": "disallow",   "page": "path/to/page"}]}

path/to/page?a=1&b=2 => 优先索引path/to/page?a=1&b=2&c=3 => 优先索引path/to/page => 不被索引path/to/page?a=1 => 不被索引其他页面城市被索引

{ "rules":[{   "action": "allow",   "page": "path/to/page",   "params": ["a", "b"],   "matching": "exclusive"}, {   "action": "disallow",   "page": "path/to/page"}]}

path/to/page => 优先索引path/to/page?c=3 => 优先索引path/to/page?a=1 => 不被索引path/to/page?a=1&b=2 => 不被索引其他页面城市被索引

{ "rules":[{   "action": "allow",   "page": "path/to/page",   "params": ["a", "b"],   "matching": "partial"}, {   "action": "disallow",   "page": "path/to/page"}]}

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" 的都默许被索引


六、总结

以上的内容大部分均来自于腾讯官方文档，感爱好可以去看看，这里小编只是加了一些小我的鄙见，不够上述内容我们必定是需方法会而且利用到的。更多出色好文敬请关注公众号“简易编程网”

牛逼大气上档次，虽然我看不懂

收藏

转发了

转发了

转发了

转发了

转发了

转发了

转发了