小程序•小故事(8)——自定义组件-杭州微信小程序公众号直播商城开发为转播

小程序的界面是由一系列组件构成的。小程序基础库提供了一组基础组件来满足开发者的基本需求。但随着小程序开发变得越来越复杂，单纯使用基础组件来进行开发也变得越来越不方便。

面对这个情况，小程序基础库提供了让开发者自己创建界面组件的特性，称之为“自定义组件”。通过这个特性，开发者就能够将这样的交互模块抽象成界面组件，使界面代码组织变得非常灵活。

每个自定义组件由四个代码文件组成：

这四个文件与编写一个页面时用到的四个文件非常类似，但也有区别。下面将介绍如何利用这四个文件编写一个简单的自定义组件。

编写一个自定义组件，首先应在小程序代码目录中合适的位置创建一个 json 文件。这里我们把文件放置在小程序的 components目录下，名为 custom-checkbox.json 。

这个文件中包含以下内容：

在同一目录下，创建一个模版文件 custom-checkbox.wxml 。这个文件的写法与页面模版很类似：

这个模版将在组件中渲染出一个 checkbox 和一个 label 。

同样类似于页面， wxss 文件中可以指定组件节点的样式。其中的样式仅在组件内部生效。需要注意的是，样式只能通过类选择器（如 .the-class-name ）来指定：

组件的 JS 文件中必须包含组件定义。定义时使用 Component 构造器：

简单的 Component 构造器调用包含3个定义段：

这样我们就编写好了 custom-checkbox 这个组件。

使用上面这个自定义组件的方法很简单。

在需要使用这个组件的页面所对应的 json 文件中，添加下面的自定义组件声明：

在页面对应的 wxml 文件中使用了：

这样，在页面上最终呈现的效果如下：

在自定义组件中也是可以引用其他自定义组件的，方法与在页面中引用的方法类似。

除了上述的基本功能外，自定义组件还提供了一组基础接口，用来实现各种各样的功能。

有关它们的详细文档，请参考 开发者文档 - 框架 - 自定义组件 章节。

还需要注意的是，一些与 WXML 节点相关的接口，如wx.createSelectorQuery  、 wx.createCanvasContext ，在自定义组件中使用时有一定的变化，使用时请再次阅读一下相关的文档。