旗下网站
艺源微平台
SEO优化
当前位置: 首页 > 服务 > 艺源智库
【小程序】小程序•小故事(8)——自定义组件
时间:2018-07-26 14:38:19
文章发布:杜凯
原创作者: LastLeaf
来源:微信开发者

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


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


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


01

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


02

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


03

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


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


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


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


  wxml 文件    组件模版


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


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


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


1.组件配置


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



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



2.组件模板


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



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


3.组件样式


同样类似于页面, wxss 文件中可以指定

标签: 小程序
*版权申明:本站部分文章由艺源科技收集整理,不代表我们的观点。如果这篇转载侵犯您的版权,请及时联系我们删除!
为您推荐
最新文章