小程序配置文件

小程序配置文件

今天来更新微信小程序的第二期–小程序配置文件介绍!!!

1. 配置文件介绍

JSON是一种轻量级的数据格式,常用于前后端数据的交互,但是在小程序中,JSON 扮演的静态配置的角色,用于配置当前页面或组件的属性和行为,每个页面或组件也都可以拥有一个对应的 json 文件。

小程序中常见的配置文件有以下几种:

  1. 全局配置文件:app.json ➡ 小程序全局配置文件,用于配置小程序的一些全局属性和页面路由。
  2. 局部配置文件:页面.json ➡ 小程序页面配置文件,用于配置当前页面的窗口样式、页面标题等
  3. 项目配置文件:project.config.json ➡ 小程序项目的配置文件,用于保存项目的一些配置信息和开发者的个人设置
  4. 搜索配置文件:sitemap.json ➡ 配置小程序及其页面是否允许被微信索引,提高小程序在搜索引擎搜索到的概率

下面我们依次来说明一下它们的用途。

2. 全局配置

小程序 app.json 文件是小程序的全局配置文件,用于配置小程序的一些全局属性和页面路由。

当小程序启动时,会自动读取 app.json 文件中的配置,根据配置生成对应的页面和组件、界面表现、网络超时时间、底部 tab,在小程序运行过程中起着关键的作用。

2.1 pages

pages 字段:用于指定小程序由哪些页面组成,用于为了让小程序知道由哪些页面组成以及页面定义在哪个目录,每一项都对应一个页面的 路径(含文件名) 信息。

{
  "pages": [
    "pages/index/index",
    "pages/list/list"
  ]
}

📌 注意事项:

  1. 文件名不需要写文件后缀框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理
  2. 小程序中新增/减少页面,都需要对 pages 数组进行修改。
  3. 未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页)

🔔 开发小技巧

​ 可以通过配置小程序的页面路径快速生成小程序的页面

详细文档: pages 配置项

2.2 window

window字段: 用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性描述类型默认值
navigationBarBackgroundColor导航栏背景颜色HexColor#000000
navigationBarTextStyle导航栏标题颜色,仅支持 black / whitestringwhite
navigationBarTitleText导航栏标题文字内容string
backgroundColor下拉 loading 的样式,仅支持 dark / lightstringdark
enablePullDownRefresh是否开启全局的下拉刷新booleanfalse
onReachBottomDistance页面上拉触底事件触发时距页面底部距离单位为 pxnumber50
{
  "window": {
    "backgroundTextStyle": "light",
    "backgroundColor": "#eee",
    "navigationBarBackgroundColor": "#f35456",
    "navigationBarTitleText": "天之骄子",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
  }
}

详细文档: window 配置项

2.3 tabBar

tabBar 字段:定义小程序顶部、底部 tab 栏,如果小程序是一个多 tab 应用,例如:可以在客户端窗口的底部或顶部通过 tab 栏可以切换页面,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

tabBar 配置项

属性描述类型默认值
colortab 上的文字默认颜色,仅支持十六进制颜色HexColor
selectedColortab 上的文字选中时的颜色,仅支持十六进制颜色HexColor
backgroundColortab 的背景色,仅支持十六进制颜色HexColor
borderStyletabbar 上边框的颜色, 仅支持 black / whitestringblack
listtab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
positiontabBar 的位置,仅支持 bottom / topstringbottom

List 配置项:list 是一个数组,只能配置最少 2 个、最多 5 个 tab,tab 按数组的顺序排序,每个项都是一个对象

属性描述类型是否必填
pagePath页面路径,必须在 pages 中先定义string
texttab 上按钮文字string
iconPath图片路径,icon 大小限制为 40kb,
建议尺寸为 81px * 81px,
string
selectedIconPath选中时的图片路径,icon 大小限制为 40kb,
建议尺寸为 81px * 81px,不支持网络图片。
string

📌 注意事项:

  1. list 是一个数组,只能配置最少 2 个、最多 5 个 tab
  2. positiontop 时,不显示 icon

我们按照下图来配置 tabBar

{
  "tabBar": {
    "color": "#252933",
    "selectedColor": "#FF734C",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "text": "首页",
        "iconPath": "/assets/tabbar/home.png",
        "selectedIconPath": "/assets/tabbar/home-active.png",
        "pagePath": "pages/home/home"
      },
      {
        "text": "列表",
        "iconPath": "/assets/tabbar/list.png",
        "selectedIconPath": "/assets/tabbar/list-active.png",
        "pagePath": "pages/list/list"
      },
      {
        "text": "购物车",
        "iconPath": "/assets/tabbar/cart.png",
        "selectedIconPath": "/assets/tabbar/cart-active.png",
        "pagePath": "pages/cart/cart"
      },
      {
        "text": "我的",
        "iconPath": "/assets/tabbar/my.png",
        "selectedIconPath": "/assets/tabbar/my-active.png",
        "pagePath": "pages/my/my"
      }
    ]
  }
}

详细文档: window 配置项

3. 页面配置

小程序的页面配置,也称局部配置,每一个小程序页面也可以使用自己的 .json 文件来对本页面的窗口表现进行配置

需要注意的是:页面配置文件的属性和 全局配置文件中的 window 属性几乎一致

只不过这里不需要额外指定 window 字段,因此如果出现相同的配置项,页面中配置项 会覆盖全局配置文件中相同的配置项。

属性描述类型默认值
navigationBarBackgroundColor导航栏背景颜色HexColor#000000
navigationBarTextStyle导航栏标题颜色,仅支持 black / whitestringwhite
navigationBarTitleText导航栏标题文字内容string
backgroundColor下拉 loading 的样式,仅支持 dark / lightstringdark
enablePullDownRefresh是否开启全局的下拉刷新booleanfalse
onReachBottomDistance页面上拉触底事件触发时距页面底部距离单位为 pxnumber50

📌 注意事项

​ 页面配置项和 app.json 中的 window 属性几乎一致,但这里不需要额外指定 window 字段

{
  "usingComponents": {},
  "navigationBarTitleText": "商品分类",
  "navigationBarTextStyle": "balck",
  "navigationBarBackgroundColor": "#00ajk1",
  "enablePullDownRefresh": true,
  "backgroundColor": "#eee",
  "backgroundTextStyle": "light"
}

4. 项目配置文件

通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如 编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。

考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项

project.config.json 文件中配置公共的配置,

project.private.config.json 配置个人配置

project.private.config.json 文件同样可以对项目进行配置

project.private.config.json中的相同设置优先级高于project.config.json
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/75a91b78725e44c9b3538f21025d922d.png

📌 注意事项

  1. project.private.config.json 写到 .gitignore 避免版本管理的冲突。

  2. 与最终编译结果有关的设置 必须 设置到 project.config.json 中

可以在微信开发者工具,点击以下两个配置选项进行相关的设置,然后观察两个文件的变化即可。

在这里插入图片描述

项目配置文件的配置选项比较多,如有需要

大家可以参考详细的官方配置文档:项目配置文件

5. 支持使用 sass/less

小程序代码包要求代码文件为 wxml / wxss / js / json / wxs。

如果我们希望使用 sass 或 less 去开发小程序,就需要将 sass / less 文件编译成对应的 wxss 文件。

project.config.json 文件中,修改 setting 下的 useCompilerPlugins 字段为 ["sass"],即可开启工具内置的 sass 编译插件。 如需同时开启 typescript 编译插件,可将该字段修改为 ["typescript ", “sass”]。 目前支持三个编译插件:typescript、less、sass

{
  "setting": {
+    "useCompilerPlugins": [
+      "sass"
+    ]
  }
}

配置好以后,需要将 .wxss 改成 .scss

📌 注意:

我们在配置的时候,编译插件的名称是 sass,但是文件的后缀名是 .scss

这是因为 Sass 是 Css 预处理语言,scss 是 Sass 的一个语法版本

官方文档:开发辅助,支持以编译插件的形式,扩展编译功能

6. sitemap.json

微信现已开放小程序内搜索,当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。

可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。语法如下:

{
  "rules": [
    {
      "action": "allow",
      "page": "*"
    }
  ]
}

常用配置项:

属性属性说明属性值
action是否允许被搜索可选项有:allow 、disallow
page允许/不允许被搜索的页面页面路径或者通配符
// 所有页面都会被微信索引(默认情况)
{
  "rules": [
    {
      "action": "allow",
      "page": "*"
    }
  ]
}
// 配置 path/to/page 页面不被索引,其余页面允许被索引
{
  "rules":[
    {
      "action": "disallow",
      "page": "path/to/page"
    }
  ]
}

📌 注意事项

  1. 没有 sitemap.json 则默认所有页面都能被索引
  2. sitemap.json 文件中默认的设置,是优先级最低的默认规则,所有页面都会被微信索引
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值