微信小程序自定义组件——入门教程

前言

在做微信小程序开发的过程中，我认为组件式开发是必须要掌握的一种技能，官方是这样介绍的：

从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

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

到目前为止，已经有很多优秀的微信小程序框架，并且里面封装了很多基础的且常用的组件，我建议初学者尽量多看看他们的源码，会有很大的帮助的。在这里我给大家介绍几款我认为比较优秀的ui框架。

1.mpvue（基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系。）

2.minui（基于规范的小程序 UI 组件库，自定义标签组件，简洁、易用、工具化）

3.vant-weapp（轻量、可靠的小程序 UI 组件库）

接下来大家跟着我的步骤一起来操作吧~~（我会带大家实现一个收藏功能）

官方并没有明确规定自定义组件的文件放在哪里，但是为了自己或团队的方便，我还是建议大家在根目录下创建一个components目录，用来存放所有组件。

项目结构

创建完目录后，我们再来看看一个组件需要哪几部分组成。

自定义组件类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。例如我们创建一个collection组件，在components目录下创建collection目录。

创建collection目录

右键点击collection目录，选择新建，再选择Components会出现如下输入框。

创建collection组件

在输入框内输入index后敲回车，会自动帮你创建好自定义组件所需要的文件。（关于index的命名大家可以随意起），这一点用起来非常方便。

collection组件目录结构

要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：

{

    "component": true

}

由于咱们是使用的自动创建方式，所以会自动帮我们声明好。如下：

collection/index.json

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。

代码示例：

collection/index.wxml

    

collection/index.wxss

.collection {

    width:50rpx;

    height:50rpx;

}

.collection image {

    width:100%;

    height:100%;

}

collection/index.js

Component({

    properties: {

        // 这里定义了collected属性，属性值可以在组件使用时指定

        collected: { 

            type: Boolean,

            value: false

         }

    },

    data: {

        // 这里是一些组件内部数据

    },

    methods: {

        // 这里是一个自定义方法

        _onCollection: function() {

                let collected = this.properties.collected;

                this.setData({ collected: !collected })

                this.triggerEvent('collected', this.properties.collected);

        }

    }

})

由于咱们是使用的自动创建方式，所以会自动帮我们创建好Component构造器。关于Component构造器的使用大家可以查看官方文档，里面介绍的非常详细，我在这里就不再过多说明了。点击跳转

使用自定义组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径，如我们在index目录下使用collection组件：

{    

    "usingComponents": {       

         "v-collection": "/components/collection/index"    

    }

}

注意：必须要使用双引号，单引号会报错。

其中“v-collection”大家可以自行命名。

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

代码示例：

pages/index/index.wxml