小程序自定义控件 (一)

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文件。


我是自定义组件,我就想试试
3.4 在其他组件中,使用自定义组件
3.4.1 声明要使用自定义组件

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

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

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

3.4.2 使用自定义组件


运行一下之后,就会呈现出结果:


结果.png

4.结束语

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

你可能感兴趣的:(小程序自定义控件 (一))