扫一扫浏览

小程序•小故事(8)——自定义组件

未结贴
0 582
江南坦克未认证 2018-05-06 14:55:55
收藏

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

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

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

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

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

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

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

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

  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个定义段:

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

如何使用自定义组件?

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

Step 1

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

Step 2

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

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

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

高级特性与注意事项

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

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

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

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

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

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

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

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

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

- END -


第七期回顾:小程序•小故事(7)——小程序音频能力介绍

第六期回顾:小程序•小故事(6)——微信登录能力优化

第五期回顾:小程序•小故事(5)——小程序插件

第四期回顾:小程序•小故事(4)——获取用户信息

第三期回顾:小程序•小故事(3)——更新机制

第二期回顾:小程序•小故事(2)——代码片段

第一期回顾:小程序•小故事(1)——分包加载

如果大家有想了解的小程序相关能力的故事,欢迎在评论区留言,我们后续会考虑将这些能力背后的故事分期分享给大家。

最近热帖 HOT TOPIC
【全套视频】thinkphp5视频教程 1264
thinkphp5隐藏默认模块的一些问题 1151
TPFrame框架robot模块重磅来袭,内附2.1版本 1078
教你如果处理高并发数据不同步的问题php篇 1077
tpframe安装教程 1067
tpframe新建主题 1015
slide模块发布 1005
tpframe应用目录结构 1001
thinkphp5自动完成操作,两次运行的详解 982
TPFrame 2.1 beta版本正式发布,全部插件式开发到来 939
月度热议HOT COMMENTS
tpframe 后续版本你希望有的功能是什么(分享贴) 12
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
新增的管理员没有权限操作CMS模块。 3
api接口文档插件easydoc的基本用法,快速搞定接口文档 3
thinkphp5自动完成操作,两次运行的详解 2
tpframe-curd操作之添加数据 2
tpframe能带给你的,让你快速搞定各服务端(api,pc,mobile,wechat)代码的框架 2
slide模块发布 2
透析thinkphp5升级版开发框架tpframe 2
爆料早知道:又拍云存储插件上线我有好想法