1、小程序组件化编程
从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。
- 开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;
- 也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。
自定义组件在使用时与基础组件非常相似。
2、创建自定义组件
自定义组件的构成:
一个自定义组件由 .json
、.wxml
、.wxss
和 .js
四个文件组成。
编写组件需要做哪些工作?
在编写自定义组件前,需要在 json文件中进行声明( component:true
就可以将这一组文件设为自定义组件)。
还要在 .wxml 文件中编写组件模板
,在 .wxss 文件中加入组件样式
。
2-2-1 组件模板
组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。
在组件模板中可以提供一个 节点,用于承载组件引用时提供的子节点。
<!-- 自定义组件模板 -->
<view class="test">
<view>组件内部节点</view>
<slot></slot>
</view>
<!-- 引用组件的页面模板 -->
<view>
<component-mytemplate>
<view>这是插入到组件slot中的内容</view>
</component-mytemplate>
</view>
/* 这个样式只适用于自定义组件 */
.test{
background-color: antiquewhite;
}
注意:
- 在模板中引用到的自定义组件及其对应的节点名需要在 json 文件中显式定义,否则会被当作一个无意义的节点。除此以外,节点名也可以被声明为抽象节点。
- 在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
- 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。
- 自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用 usingComponents 字段)。
- 自定义组件和页面所在项目根目录名不能以“wx-”为前缀,否则会报错。
插槽
在组件模板中可以提供一个 <slot>
节点,用于承载组件引用时提供的子节点。
插槽作用:
- 为了让我们封装的组件更具有扩展性
- 让使用者可以决定组价内部的一些内容到底展示什么
注意:定义具名插槽时,在引用时也必须有名字
components/my-componets/index.js