在大部分项目中,轮播图都是必不可少的。接下来通过轮播图这一实例来学习微信小程序中的自定义组件。
一、自定义组件的学习
1. 小程序组件化思想
将一个完整的页面拆分成很多组件,每个组件都用于实现页面的一个功能块。
每个功能块都可以独立运作并且可以复用,那么整个页面在后续的管理和维护都是非常容易的,并且扩展性也更强。
2. 创建自定义组件
类似于页面,自定义组件由 .js .json .wxml .wxss 4个文件组成。
创建步骤:
① 首先需要在 .json文件中进行自定义组件声明(将component字段设为true,即可将这一组文件设为自定义组件)
② 在 .wxml 中编写属于组件自己的模板
③在 .wxss 中编写属于组件自己的相关样式
④在 .js 文件中,定义数据或组件内部的相关逻辑
3. 注意事项
- 因为WXML节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。
- 自定义组件也可以引用一定义组件(usingComponents字段)
- 自定义组件和页面所在项目根目录不能以“wx-”为前缀名
- 如果在app.json的usingComponents声明某个组件,那么所有页面和组件都可以使用该组件
- 样式细节:组件内的class样式和组件外的class样式,默认是有一个隔离效果的。为了防止样式的错乱,官方不推荐使用id、属性、标签选择器。
4. 样式的相互影响
在Component对象中,可以传入一个options属性,其中options属性中有一个styleIsolation(隔离)属性。styleIsolation有三个取值:
- isolated:表示启用样式隔离,在自定义组件内外,使用class指定的样式将不会相互影响(默认取值);
- apply-shared:表示页面wxss样式将影响到自定义组件,但自定义组件wxss中指定的样式不会影响页面;
- shared:表示相互影响,页面wxss样式影响到自定义组件,自定义组件wxss中指定的样式也会影响页面和其他设置
其他相关样式细节:
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
5. 组件和页面通信
很多情况下,组件内展示的内容(数据 properties 、样式 externalClasses 、标签 slot ),并不是在组件内写死的,而是可以由使用者来决定的。(实现传入内容)
(1)向自定义组件传递
数据 properties:
支持的类型:String、Number、Boolean、Object、Array、null