开发制作各行业
小程序15563204499

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

据说小程序开发者都有一个雄心壮志:要开发一个简洁又丰富、低调又牛气的小程序。

然而在开发较为复杂的小程序过程中,却遇上了一些难题:

一些通用的交互模块,比如“下拉选择列表”、“搜索框”、“日期选择器”等,可能会在多个页面中用到,逻辑也相对独立,但用传统的小程序开发方法来实现这些模块却又非常繁琐。

面对这个难题,本期小程序课特意找了微信开发哥来为大家支招,分享让小程序避免重复、繁琐的开发好方法。

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

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

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

01

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

开发者可以将一些复用性强的代码抽象成自定义组件,它们的使用方法与基础库内置的 view button 等基础组件非常相似。这样的组件化非常有利于代码逻辑的解耦合。

02

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

自定义组件局部更新时的性能相比页面的局部更新要小很多,在必要时可以利用这个特点进行性能优化。

03

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

自定义组件是相对独立的功能模块,开发者可以将自己的自定义组件代码开源出来,与其他开发者共享开发成果。

如何编写一个自定义组件?

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

json文件 用于放置一些最基本的组件配置

wxml 文件 组件模版

wxss 文件 组件的样式,只在组件内部节点上生效(这个文件是可选的)

js 文件 组件的 JS 代码,承载组件的主要逻辑

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

1

组件配置

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

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

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

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

2

组件模板

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

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

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

3

组件样式

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

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

4

组件定义

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

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

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

methods中的方法可以用来包含组件的事件回调函数;

data是组件的内部数据,可以用 this.setData 方法来改变;

properties中声明这个组件的属性,上例中声明了 title 属性,这样,组件外部在使用组件时就可以指定这个属性的值。

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

如何使用自定义组件?

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

1

Step 1

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

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

2

Step 2

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

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

这样,在页面上最终呈现的效果如下:

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

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

高级特性与注意事项

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

01

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

在页面和自定义组件间通信时,最常用的方法是事件机制,自定义组件可以使用 triggerEvent 接口向页面发送事件,页面 WXML 中使用 bind 或者 catch 就可以监听到。

02

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

如果事件机制还不足以满足组件间通信需要的话,可以使用selectComponent 接口。

03

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

如果同时建立了好几个有相互关联关系的组件,可以使用组件间关系接口 relations

04

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

组件间可能需要共享部分代码,这时可以使用 behaviors

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

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

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

如果本期内容让你有所收获

欢迎赞赏一下我们的开发哥

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

课后交流

了解完本期的小程序自定义组件知识后,你还想了解小程序的哪些能力?

欢迎在评论区留言,用孜孜不倦的求学精神“召唤”微信开发哥吧!

● 内容来自“微信开发者”公众号《小程序·小故事》栏目

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

微信公开课

微信ID:wx-gongkaike

技术课 | 减少重复开发,小程序自定义组件来给大家减负了

1.点击历史信息,查看更多内容

2.长按右侧二维码,关注微信公开课

长按二维码关注

赞(0)
滕州小程序提示,未经允许不得转载:无忧小程序工作室 » 技术课 | 减少重复开发,小程序自定义组件来给大家减负了
分享到: 更多 (0)

评论 抢沙发

1 + 6 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

滕州无忧微信小程序制作

枣庄小程序制作滕州小程序开发