小程序自定义控件 (一)

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.结束语

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,854评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,975评论 25 708
  • 用一小时时间速读,用一生时间精读这是无悔在2017年阅读的第15~17本书 第3周关键词:吴军 对的,就是那个得到...
    郦无悔阅读 1,012评论 0 1
  • 月心君阅读 276评论 1 1
  • 读写文件是最常见的IO操作。Python内置了读写文件的函数,用法和C是兼容的。 读写文件前,我们先必须了解一下,...
    猪猪9527阅读 270评论 0 0