我微信小程序的配置(项目开发配置、小程序收录配置、全局配置、页面配置)
文前推荐一下👉前端必备工具推荐网站(图床、API和ChatAI、智能AI简历、AI思维导图神器等实用工具): 站点入口:http://luckycola.com.cn/ 图床:https://luckycola.com.cn/public/dist/#/imghub 多种API:https://luckycola.com.cn/public/dist/#/ ChatAI:https://luckycola.com.cn/public/dist/#/chatAi AI思维导图神器:https://luckycola.com.cn/public/dist/#/aiQStore/aiMindPage
小程序中常用的配置(项目开发配置、小程序收录配置、全局配置、页面配置)
前言:小程序的很多开发需求被规定在了配置文件中。
为什么这样做?
这样做可以更有利于我们的开发效率;并且可以保证开发出来的小程序的某些风格是比较一致的;比如导航栏 – 顶部TabBar,以及页面路由等等。
1. 项目开发配置(对应的文件->project.config.json)
先附上微信官方给的文档微信小程序项目配置文件文档下面是对应的文件 这个项目配置文件里面的配置项一般不用手敲,它有可视化操作界面,在微信开发者工具中右上角详细中,下面图示: 在可视化中每更改一项在project.config.json中都会有相应的改变
2. 小程序收录配置(对应的文件->sitemap.json)
传送门:小程序搜索相关的—微信小程序提供的sitemap.json配置文档小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有 sitemap.json ,则默认为所有页面都允许被索引;sitemap.json
2.1 希望被收录
使用场景:官网、商城、工具等一些面向大众的,希望更多人使用的小程序
配置项
属性类型必填描述rulesObject[]是索引规则列表
rules
rules 配置项指定了索引规则,每项规则为一个JSON对象,属性如下所示:
属性类型必填默认值取值取值说明actionstring否“allow”“allow”、“disallow”命中该规则的页面是否能被索引pagestring是“*”、页面的路径* 表示所有页面,不能作为通配符使用paramsstring[]否[ ]当 page 字段指定的页面在被本规则匹配时可能使用的页面参数名称的列表(不含参数值)matchingstring否“inclusive”参考 matching 取值说明当 page 字段指定的页面在被本规则匹配时,此参数说明 params 匹配方式priorityNumber否优先级,值越大则规则越早被匹配,否则默认从上到下匹配
matching 取值说明
值说明exact当小程序页面的参数列表等于 params 时,规则命中inclusive当小程序页面的参数列表包含 params 时,规则命中exclusive当小程序页面的参数列表与 params 交集为空时,规则命中partial当小程序页面的参数列表与 params 交集不为空时,规则命中
下面是配置示例
示例1
{
"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 => 不被索引 其他页面都会被索引
示例2
{
"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 => 不被索引 其他页面都会被索引
示例3
{
"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 => 不被索引 其他页面都会被索引
示例4
{
"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” 的都默认被索引
2.2 不希望被收录
使用场景:企业内部系统等一些定向型用户应用,不做大范围推广
登录 小程序微信小程序登录入口,点击设置,在设置中配置
只要关闭以上两个选项就行
3. 全局配置
全局配置比较多,先放上官方文档全局配置完整的查看官方文档,下面放上几个重要的
window: 全局的默认窗口展示 用户指定窗口如何展示, 其中还包含了很多其他的属性 常用配置
{
"window": {
"navigationBarBackgroundColor": "#75a342",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "普粒志鸟",
"backgroundColor": "#e0e0e0",
"backgroundTextStyle": "dark",
"enablePullDownRefresh": true
},
"sitemapLocation": "sitemap.json"
}
所有配置
tabBar: 底部tab栏的展示 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。 常用配置
{
"tabBar":{
"selectedColor": "#75a342",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "assets/tabbar/home_default.png",
"selectedIconPath": "assets/tabbar/home_selected.png"
},
{
"pagePath": "pages/category/category",
"text": "普歌",
"iconPath": "assets/tabbar/category_default.png",
"selectedIconPath": "assets/tabbar/category_selected.png"
},
{
"pagePath": "pages/gl/gl",
"text": "高禄",
"iconPath": "assets/tabbar/shoppingcart_default.png",
"selectedIconPath": "assets/tabbar/shoppingcart_selected.png"
},
{
"pagePath": "pages/mine/mine",
"text": "我的",
"iconPath": "assets/tabbar/mine_default.png",
"selectedIconPath": "assets/tabbar/mine_selected.png"
}
]
}
图示:
pages: 页面路径列表
概念
用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息小程序中所有的页面都是必须在pages中进行注册的
配置
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项
常用配置
{
"usingComponents": {},
"navigationBarTitleText": "商品分类",
"navigationBarBackgroundColor": "#ff0000",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true
}
4. 页面配置
文件:页面.json(某个页面的json文件),页面配置,文档传送门页面配置文档
基本和全局配置中的window配置一样
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象,有以下属性:
配置项
属性类型默认值描述最低版本navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000navigationBarTextStylestringwhite导航栏标题颜色,仅支持 black / whitenavigationBarTitleText string导航栏标题文字内容navigationStylestringdefault导航栏样式,仅支持以下值:default 默认样式 custom 自定义导航栏,只保留右上角胶囊按钮微信客户端 7.0.0backgroundColorHexColor#ffffff窗口的背景色backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark / lightbackgroundColorTopstring#ffffff顶部窗口的背景色,仅 iOS 支持微信客户端 6.5.16backgroundColorBottomstring#ffffff底部窗口的背景色,仅 iOS 支持微信客户端 6.5.16enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新。详见 Page.onPullDownRefreshonReachBottomDistancenumber50页面上拉触底事件触发时距页面底部距离,单位为px。详见 Page.onReachBottompageOrientationstringportrait屏幕旋转设置,支持 auto / portrait / landscape详见 响应显示区域变化2.4.0 (auto) / 2.5.0 (landscape)disableScrollbooleanfalse设置为 true 则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置usingComponentsObject否页面自定义组件配置1.6.3stylestringdefault启用新版的组件样式2.10.2singlePageObject否单页模式相关配置2.12.0
页面配置中只能设置 app.json 中 window 对应的配置项,以决定本页面的窗口表现,所以无需写 window 这个属性
到这就结束了,帮到的小伙伴给个赞呗
更多推荐:wantLG的《普歌-码上鸿鹄团队:JS验证对象中的值是否为空、数组对象中的值是否为空;数据请求成功后清空所有数据》
作者:wantLG本文源自:wantLG的《普歌-码上鸿鹄团队:微信小程序的配置(项目开发配置、小程序收录配置、全局配置、页面配置)》本文版权归作者和CSDN共有,欢迎转载,且在文章页面明显位置给出原文链接,未经作者同意必须保留此段声明,否则保留追究法律责任的权利。