小程序 --- 常用配置项
1. 全局配置
全局配置都是在 app.json 中来修改配置项
1.官方文档
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
2. 路由数组
1.作用
通过指定 pages 配置项用来指定小程序由哪些页面组成,用于让小程序知道由哪些页面组成以及页面定义在哪个目录,每一项都对应一个页面的路径信息
2. 新增路由
app.json
{
"pages": [
"pages/index/index",
"pages/list/list" // 在数组中新增 list 页面
],
}
注意事项
- 页面路由不需要写文件后缀,框架会自动取寻找对应位置的四个文件进行处理
- 小程序中 新增/减少 页面,都需要对 pages配置项 的数组进行修改
- 如果未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页)
3. 指定首页路由
app.json
{
// 通过指定 entryPagePath 配置项 来指定 pages/index/index 为程序运行时的默认首页
"entryPagePath": "pages/index/index",
}
4. 窗口表现
1. 作用
通过指定 window 配置项来设置小程序的状态栏、导航条、标题、窗口背景色
2. 修改导航栏样式
{
"window": {
// 导航栏和状态栏的背景颜色
"navigationBarBackgroundColor": "#f3514f",
// 导航栏标题文字
"navigationBarTitleText":"学习小程序",
// 开启下拉刷新
"enablePullDownRefresh": true,
// 设置窗口背景色, 下拉刷新时显示的窗口
"backgroundColor": "#efefef",
// 修改下拉时的 loading 样式 dark/light
"backgroundTextStyle":"dark"
}
}
5. tabbar 栏
1. 作用
定义小程序 顶部、底部tab栏,用以实现页面之间的快速切换
2. 修改 底部 tab 栏
{
"tabBar": {
// 上边框颜色 white/black
"borderStyle":"black",
// 整个 tab栏 的背景颜色
"backgroundColor": "#efefef",
// 被点击后的文字颜色
"selectedColor": "#f3514f",
// 未点击时的颜色
"color": "#000000",
// tab 栏的显示位置 top/bottom
"position": "top",
// 底部 tabbar 列表,最少2个,最多5个
"list": [
{
// 点击时需要跳转的页面路径
"pagePath": "pages/index/index",
// 每个 tab 对应的显示文字
"text": "首页",
// 未选中时的图标路径
"iconPath": "./assets/tabbars/index.png",
// 被选中时的图标路径
"selectedIconPath": "./assets/tabbars/index-active.png"
},
{
"pagePath": "pages/cate/cate",
"text": "分类",
"iconPath": "./assets/tabbars/cate.png",
"selectedIconPath": "./assets/tabbars/cate-active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "./assets/tabbars/cart.png",
"selectedIconPath": "./assets/tabbars/cart-active.png"
},
{
"pagePath": "pages/profile/profile",
"text": "我的",
"iconPath": "./assets/tabbars/profile.png",
"selectedIconPath": "./assets/tabbars/profile-active.png"
}
]
}
}
6. 自定义导航栏
小程序中默认的导航栏与APP 一样都位于顶部固定位置, 但是默认导航栏可能会影响小程序整体风格,且无法满足特定的设计需求,这时候就需要进行自定义导航栏,在 app.json 或 page.json中,配置 navigationStyle: "custom",即可自定义导航栏, 在设置以后,会移除默认的导航栏,只保留右上角胶囊按钮
1. 自定义导航栏的设计风格
2. 开始配置
app.json
{
"navigationStyle": "custom"
}
2. 页面局部配置
每个页面的配置,也称为局部配置,每个页面都会有.json文件来对本页面的窗口表现进行配置,只在本页面生效
1. 官方文档
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
2. 局部配置
cate/cate.json
{
"usingComponents": {},
// 当前页面的标题,会覆盖全局配置的标题
"navigationBarTitleText": "商城分类",
// 当前页面的标题栏和状态栏 背景颜色
"navigationBarBackgroundColor": "#00AF92",
// 当前页面可以下拉刷新
"enablePullDownRefresh": true
}
3. 项目配置文件
在创建项目的时候,每个项目的根目录会生成两个 config.josn 文件,用于保存开发者在工具上做的个性化配置,如和编译相关的配置,当重新安装微信开发者工具或换电脑工作时,只需载入同一个项目的代码包,开发者工具就会自动回复到当时开发项目时的个性化配置
**project.config.json: ** 项目配置文件,常用来进行配置公共配置
**project.private.config.json: ** 项目私有配置,常用来配置个人配置,一般会在.gitignore 忽略该文件
1. 官方文档
https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
2. 配置 sass 插件
1. 修改 project.config.json 中的配置项
{
"setting": {
// 使用 sass 语法编写css
"useCompilerPlugins":[
"sass"
],
}
}
2. 页面中 wxcss 后缀名改为 scss,然后按照 sass语法编写 css即可
cate/cate.scss
text{
color: papayawhip;
}
4. sitemap.json
配置小程序及其页面是否允许被微信索引,提高小程序在微信内部被用户搜索到的概率,如果没有这个文件,则默认表示所有页面都允许被索引,一般不用配置这个文件,默认规则即可
sitemap.json
{
// 这是默认规则,允许所有页面被微信索引
"rules": [{
"action": "allow",
"page": "*"
}]
}
如果想要实现某个页面不允许被索引,则需要修改配置
// 只有list不允许被索引
{
"rules": [{
"action": "disallow",
"page": "pages/list/list"
}]
}
// 只有list允许被索引
{
"rules": [{
"action": "allow",
"page": "pages/list/list"
}]
}
浙公网安备 33010602011771号