微信小程序的配置(项目开发配置、小程序收录配置、全局配置、页面配置)

小程序中常用的配置(项目开发配置、小程序收录配置、全局配置、页面配置)

前言:小程序的很多开发需求被规定在了配置文件中。

为什么这样做?

• 这样做可以更有利于我们的开发效率；
• 并且可以保证开发出来的小程序的某些风格是比较一致的；
• 比如导航栏 – 顶部TabBar，以及页面路由等等。

1. 项目开发配置（对应的文件->project.config.json）

• 先附上微信官方给的文档微信小程序项目配置文件文档
• 下面是对应的文件
  
• 这个项目配置文件里面的配置项一般不用手敲，它有可视化操作界面,在微信开发者工具中右上角详细中,下面图示：
  
• 在可视化中每更改一项在project.config.json中都会有相应的改变

2. 小程序收录配置(对应的文件->sitemap.json)

• 传送门：小程序搜索相关的—微信小程序提供的sitemap.json配置文档
• 小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；sitemap.json

2.1 希望被收录

使用场景:官网、商城、工具等一些面向大众的，希望更多人使用的小程序

• 配置项

属性	类型	必填	描述
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 交集不为空时，规则命中

• 下面是配置示例

1. 示例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. 示例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. 示例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. 示例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. 全局配置

• 全局配置比较多，先放上官方文档全局配置
• 完整的查看官方文档,下面放上几个重要的

1. window: 全局的默认窗口展示
   用户指定窗口如何展示, 其中还包含了很多其他的属性
   常用配置

{
"window": {
    "navigationBarBackgroundColor": "#75a342",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "普粒志鸟",
    "backgroundColor": "#e0e0e0",
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true
  },
   "sitemapLocation": "sitemap.json"
}    

• 所有配置
  

2. 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"
     }
   ]
}   

• 图示:

3. pages: 页面路径列表

• 概念

• 用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息
• 小程序中所有的页面都是必须在pages中进行注册的

• 配置

• 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置
• 页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项

• 常用配置

{
  "usingComponents": {},
  "navigationBarTitleText": "商品分类",
  "navigationBarBackgroundColor": "#ff0000",
  "navigationBarTextStyle": "black",
  "enablePullDownRefresh": true
}

4. 页面配置

• 文件:页面.json(某个页面的json文件)，页面配置,文档传送门页面配置文档

• 基本和全局配置中的window配置一样

• 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，有以下属性：

• 配置项

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText string	导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值：default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮	微信客户端 7.0.0
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
style	string	default	启用新版的组件样式	2.10.2
singlePage	Object	否	单页模式相关配置	2.12.0

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

到这就结束了，帮到的小伙伴给个赞呗

更多推荐：wantLG的《普歌-码上鸿鹄团队:JS验证对象中的值是否为空、数组对象中的值是否为空；数据请求成功后清空所有数据》

---

• 作者：wantLG
• 本文源自：wantLG的《普歌-码上鸿鹄团队:微信小程序的配置(项目开发配置、小程序收录配置、全局配置、页面配置)》
• 本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。