小程序自定义控件 （一）

1.写这篇博客的原因

原因很简单，微信官方文档写的不是很清楚。腾讯只是介绍了一些组件的特性怎么使用。

附上小程序自定义控件教程的官方地址：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/

2.最后的结果

结果.png

3.具体的操作步骤

3.1 创建一个自定义组件customComponent

image

3.2 在customComponent.json文件里面配置一下

{

  "component": true,    // 组件的声明

  "usingComponents": {} // 使用别的组件

}

腾讯默认情况下生成的组件配置文件，就是这个。如果没有使用别的组件，不用改就行了。注意，我是为了便于理解加了注释。直接这样加会报错。实际运行的时候，去掉即可。

3.3 在自定义组件中编写自己的代码

为了简单，我就改变一下customComponent.wxml文件。

<!--pages/customComponent/customComponent.wxml-->
<text>我是自定义组件，我就想试试</text>

3.4 在其他组件中，使用自定义组件

3.4.1 声明要使用自定义组件

我就在index组件中，使用这个自定义组件。
因为小程序的index组件中默认没有index.json文件，那就新建一个index.json文件。然后添加代码。

{
  "usingComponents": {
    "customComponentaaa": "/pages/customComponent/customComponent"
  }
}

然后，我们自定义的组件标签customComponentaaa，就可以当做一个组件使用了。这里customComponent后面加aaa，是为了便于区分。

3.4.2 使用自定义组件

<!--index.wxml-->
<customComponentaaa></customComponentaaa>

运行一下之后，就会呈现出结果：

结果.png

4.结束语

下一次写一个项目实战中能用到的对话框。