自定义组件

@Components

.有助于团队开发、提高开发效率、避免重复造轮子

.组件也有对应的4个文件：wxml、wxss、js、json

.每个组件js都可以有自己的：

- properties：接收参数，实现组件传参

- data：数据

- methods：方法

- options：选项；默认没有，需要手动添加

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

.单独创建一个目录存放组件，如components；不同作用的组件再存放到单独的文件夹中

.组件的使用分为：全局使用和页面使用

基本步骤

1. 创建

2. 设计

3. 引入

4. 使用

以封装版权信息组件 copyright 为例

创建组件总目录

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

创建组件

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

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

设计组件

.因为是静态组件，仅仅展示信息，不需要参数传递，所以只编辑.wxml即可

<text>copyright 2023-2024</text>

.wxss样式略

.js无需编辑

.json无需编辑

引入组件

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

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

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

使用组件

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

<copyright></copyright>

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

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

组件样式

.请尽量使用类选择器，不要使用标签选择器、id选择器、属性选择器

.组件根容器的样式类名同组件名保持一致，如版权组件copyright的根容器类名为copyright

.app.wxss的全局样式会影响到组件样式，如类选择器、标签选择器；id选择器、属性选择器请确认再使用

.默认情况下，组件的样式仅仅作用于当前组件 - 样式隔离；不建议修改，避免后期样式冲突