今天开始自学微信小程序开发, 先来看看官方文档的配置。
一 全局配置
微信小程序的全局配置在app.json文件下配置。
配置示例
以下是一个包含了部分常用配置选项的 app.json
:
{
"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,
"navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}
这里说一个细节: 微信小程序的json文件下不能写注释! 不能写注释! 不能写注释! 写了会报很奇怪的错误
app.json 配置项列表
这个配置项我在这说三个常用的
1. pages
用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径+文件名 信息。文件名不需要写文件后缀,框架会自动去寻找对于位置的 .json
, .js
, .wxml
, .wxss
四个文件进行处理。微信小程序中每个页面的.json
, .js
, .wxml
, .wxss文件名最好一样, 不一样我没试过
数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。
还有就是, 微信开发者工具提供了一个很良心的用法, 就是如果在pages下配置的页面工程中不存在,当我们按了保存时, 则软件会自动帮我们创建相应的文件, 我们可以先写pages的配置,这样我们就不用很麻烦的创建文件了。
2. window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
这里的属性好多, 我们等要用的时候再看吧
- 注1:HexColor(十六进制颜色值),如"#ff00ff"
- 注2:关于
navigationStyle
- 客户端 7.0.0 以下版本,
navigationStyle
只在app.json
中生效。 - 客户端 6.7.2 版本开始,
navigationStyle: custom
对<web-view>
组件无效 - 开启 custom 后,低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用)可方便切到旧视觉
- 客户端 7.0.0 以下版本,
官方例程:
如 app.json :
{
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
}
注意: 这里我们讲了两个属性了, 两个属性之间要通过逗号隔开, 最后一个属性不能有逗号隔开, 这是json文件, 全部的配置都放在{}里面, 属性中数组用【】,对象用{}, 其他的属性用json的 键:值形式表示,至于哪个属性是数组, 哪个是对象, 就得看手册了, 还有就是这里得属性和值都要写成字符串得形式, 除了true和false,
3. tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:
至于其他得属性我们暂且留着, 要用得时候再说
二 页面配置
每一个小程序页面也可以使用.json
文件来对本页面的窗口表现进行配置。
页面的配置只能设置 app.json
中部分 window
配置项的内容,页面中配置项会覆盖 app.json
的 window
中相同的配置项。
这里说明了只能设置app.json中部分window配置项得内容,而且还会覆盖app.json中的配置。
配置示例
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}