自定义组件

• 有助于团队开发、提高开发效率、避免重复造轮子
• 组件的使用分为：全局使用和页面使用
• 组件也有对应的4个文件：wxml、wxss、js、json
• 每个组件js都可以有自己的：
• 单独创建一个目录存放组件，如components；不同作用的组件再存放到单独的文件夹中
• 更多信息，请参考 官方文档 - 自定义组件

常见选项

• properties：接收参数，实现组件传参
• data：数据
• methods：方法
• options：选项；默认没有，需要手动添加

Component({
    properties: {},
    data: {},
    methods: {}
})

1. 创建
2. 设计
3. 引入
4. 使用

1. 创建组件总目录

在小程序根目录创建一个文件夹作为组件根目录，如 components

2. 创建组件

.右键单击组件根目录 components → 新建目录 copyright 作为要创建的组件的目录

.再右键组件目录 copyright，新建 Component 为 copyright；组件名和组件目录通常保持一致，系统会自动创建组件的4个文件



3. 设计组件

.仅仅展示信息，不需要参数传递，所以只编辑 .wxml 即可

<text>copyright 2023-2024</text>

.wxss 样式略

.js 无需编辑

.json 无需编辑

4. 引入组件

.在使用组件的页面 .json 中配置：指定使用的组件路径和使用时的组件名

.可以 修改 使用时的名字，如 my-copyright。这里和组件名保持一致

{
    "usingComponents": {
        "copyright":"../../components/copyright/copyright"
    }
}

5. 使用组件

.在使用组件的页面 .wxml 中使用

<copyright></copyright>

从布局角度出发，建议使用容器包裹，并指定同名类

<view class="copyright">
    <copyright></copyright>
</view>

组件模板和样式

• 请尽量使用类选择器，不要使用标签选择器、id选择器、属性选择器
• 组件根容器的样式类名同组件名保持一致，如版权组件 copyright 的根容器类名为 copyright
• app.wxss 的全局样式会影响到组件样式，如类选择器、标签选择器；id选择器、属性选择器请确认再使用
• 默认情况下，组件的样式仅仅作用于当前组件 - 样式隔离；不建议修改，避免后期样式冲突

• 结构

<view class="empty-cart">
  <text class="iconfont icon-cart-empty txt-xxxl"></text>
  <text>购物车空空的，去逛逛吧</text>
</view>

• 样式：iconfont 样式文件已经在 app.wxss 中引入；为了在组件内部使用 iconfont，需要显式的引入样式文件

@import '../../app.wxss';

.empty-cart {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}