概述

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护，自定义组件在使用时与基础组件非常相似

类似于页面，一个自定义组件由 json、wxml、wxss、js 4个文件组成

代码实现

新建Component

首先新建一个文件夹，命名为components，和pages文件夹的位置同级，用于管理所有组件

在components文件夹内新建一个文件夹，命名为input，右键点击这个文件夹并选择新建Component，也命名为input，项目结构如下图所示

image-20221205140702088

组件wxml代码

1
2
3
<!--components/input/input.wxml-->
<text style="color: red;font-size: 18px;">自定义组件</text>
<input type="text" style="border: 2px solid red;" value="{{inputValue}}"/>

组件js文件

只改了属性列表，定义了一个属性inputValue，数据类型为Number，默认值为666

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// components/input/input.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        inputValue: {
            type: Number,
            value: 666
        }
    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})

使用组件

页面使用组件之前，首先在该页面的json文件中进行引用声明，需要提供每个自定义组件的标签名和对应的自定义组件文件路径，标签名怎么写都行

1
2
3
4
5
{
    "usingComponents": {
        "my-input":"/components/input/input"
    }
}

页面wxml代码如下，my-input和上面的要一样，input-value是上面定义的属性inputValue（改成inputValue也可以），如果不写input-value会显示其默认值666

1
2
3
4
<!--pages/demo/demo.wxml-->
<view>
    <my-input input-value="777"></my-input>
</view>

效果