微信小程序自定义组件-入门教程的序言

在开发微信小程序的过程中，我认为基于组件的开发是一项必须掌握的技能。官方介绍如下：

从小程序基本库版本1.6.3开始，小程序支持简单的组件编程。与自定义组件相关的所有功能都需要基本库版本1.6.3或更高版本。

开发人员可以将页面中的功能模块抽象为自定义组件，以便在不同页面中重复使用；他们还可以将一个复杂的页面分成多个低耦合模块，这有助于代码维护。自定义组件在使用时与基本组件非常相似。

到目前为止，已经有许多出色的微信小程序框架，并且将许多基本和常用组件封装在其中。我建议初学者尽可能多地查看其源代码，这将对您有很大的帮助。在这里，我将向您介绍一些我认为更出色的UI框架。

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

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

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

接下来，每个人都按照我的步骤进行操作~~（我将带您实现收集功能）

官员并没有明确指定自定义组件文件的放置位置，但是为了您自己或团队的方便，我仍然建议您在根目录下创建一个组件目录以存储所有组件。

项目结构

创建目录之后，让我们看一下组件需要哪些零件。

自定义组件类似于页面。一个自定义组件由4个文件jsonwxmlwxssjs组成。例如，我们创建一个集合组件，并在components目录下创建一个集合目录。

创建集合目录

右键单击收集目录，选择“新建”，然后选择“组件”，将出现以下输入框。

创建集合组件

在输入框中输入索引，然后按Enter，它将自动帮助您创建自定义组件所需的文件。 （至于索引的命名，您可以随意开始），使用起来非常方便。

集合组件目录结构

要编写自定义组件，您首先需要在json文件中声明该自定义组件（将component字段设置为true以使这组文件成为自定义组件）：

{

“组件”：是

}

由于我们使用的是自动创建方法，因此我们将为我们自动对其进行声明。如下：

collection / index.json

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

该组件的属性值和内部数据将用于呈现组件wxml，该属性值可以从组件外部传递。

代码示例：

collection / index.wxml

collection / index.wxss

.collection {

width：50rpx;

高度：50rpx;

}

。收藏图片{

宽度：100％；

高度：100％；

}

collection / index.js

Component（{

属性：{

//此处定义了收集的属性，可以在使用组件时指定属性值

已收集：{

类型：布尔值

值：false

}

}，

数据：{

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

}，

方法：{

//这是一个自定义方法

_onCollection：function（）{

让收集的= this.properties.collected;

this.setData（{collected：！collected}）

this.triggerEvent（'collected'，this.properties.collected）;

}

}

}）

因为我们使用的是自动创建方法，所以我们将为我们自动创建Component构造函数。关于Component构造函数的使用，您可以检查官方文档，该文档非常详细，在此不再赘述。点击跳转

使用自定义组件

在使用注册的自定义组件之前，必须首先在页面的json文件中创建引用语句。此时，您需要提供每个自定义组件的标签名称和相应的自定义组件文件路径。例如，我们在索引目录中使用收集组件：

{

“ usingComponents”：{

“ v-collection”：“ / components / collection / index”

}

}

注意：必须使用双引号，单引号将报告错误。

您可以自己命名“ v-collection”。

通过这种方式，您可以像基本组件一样在页面的wxml中使用自定义组件。节点名称是自定义组件的标签名称，节点属性是传递给该组件的属性值。

代码示例：

pages / index / index.wxml