小程序学习day12-自定义组件（续）-behaviors、小程序对npm的支持与限制、vant组件库的安装和使用、Vant Weapp使用css变量定制vant主题样式

40、自定义组件（续）

（14）自定义组件之behaviors（每个组件可以引用多个behavior，behavior也可以引用其它的behavior）

1）概念：小程序中用于实现组件间代码共享的特性

2）作用方式：每个behaviors可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中

3）behavior的创建

新建一个js文件，创建behavior实例，可以包含属性、数据和方法

4）behavior的使用

①导入

②注册

5）behavior中所有可用的节点

properties（同组件属性）、data（同组件数据）、methods（同组件方法）、behaviors（引入其他的behavior）、

生命周期函数：created、attached、ready、moved、detached

6）同名字段的覆盖

①同名的数据字段（data）

若同名字段均为对象类型，会进行对象合并；否则，进行覆盖，覆盖规则为（优先级从高到低排列）：组件>父behavior>子behavior>靠后的behavior>靠前的behavior（优先级高的覆盖低的）

②同名的属性（properties）或方法（methods）

若组件本身有这个属性或方法，则组件的属性或方法会覆盖behavior中同名的属性或方法；若组件本身无这个属性或方法，则在组件的behavior字段中靠后的会覆盖靠前的，并且在此基础之上，若存在嵌套引用behavior的情况，则：父behavior>子behavior中同名的属性或方法

③同名的生命周期函数

对于不同的生命周期函数之间不会进行覆盖；对于相同的声明周期函数，规则：behavior优先于组件执行；子behavior有些与父behavior；靠前的优先于靠后的behavior执行；如果同一个behavior被一个组件多次引用，它定义的生命周期函数只会执行一次

41、小程序对npm的支持与限制

（1）支持：小程序已经支持使用npm安装第三方包，通过小程序的开发效率

（2）限制：

1）不支持依赖于Node.js内置库的包

2）不支持依赖于浏览器内置对象的包

3）不支持依赖于C++插件的包

42、vant组件库的安装和使用

（1）Vant Weapp概念：有赞前端团队开源的一套小程序UI组件库，帮助开发者快速搭建小程序应用，使用MIT开源许可协议，对商业友好。

（2）官方文档地址

https://vant-ui.github.io/vant-weapp/#/home

（3）安装步骤

1）在小程序，右键，打开终端

2）初始化生成package.json文件

效果：

3）在官方文档的“快速上手”找到“”安装，选择一种方式安装，可指定版本号为1.3.3

4）修改app.json

将 app.json 中的 "style": "v2" 去除，小程序的、新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

5)构建npm包

在微信开发者工具，点击工具 -> 构建 npm，新版默认选择npm模块，构建完成后，即可引入组件

显示：

6）使用vant组件库（可参考官方文档）（以Button为例）

①在app.json或index.json中引入组件

②在页面使用

（4）安装报错

1）通过 npm 安装 @vant/weapp@1.3.3时遇到了网络问题。具体来说，是连接到 npm 镜像源（这里是淘宝的 npm 镜像源https://registry.npm.taobao.org）时超时了。这通常与你的网络设置、代理配置或网络稳定性有关。这里是网络问题，换网就可以。

43、Vant Weapp使用css变量定制vant主题样式

（1）关于CSS变量的基本用法，MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

（2）基本用法（声明并使用css变量）

（假如需要使用css变量，使左边盒子的背景色和右边文字的颜色始终保持一致，且便于修改）

1）声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值，和其他属性一样，自定义属性也是写在规则集之内的（注意，规则集所指定的选择器定义了自定义属性的可见作用域）

2）使用（通过var()）

（2）定制vant weapp样式（以定制警告按钮颜色为例）

1）点击vant Weapp中“定制主题”的配置文件，找到要配置属性的通过less定义的名称（配置文件地址：https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less）

显示：

2）在app.wxss中修改less样式的警告按钮（全局生效）