创头条App
扫码下载APP
扫码下载APP

您是个人用户,您可以认领企业号

    免密码登录
  • 图形验证码
  • 获取验证码
  • 立即登录
第三方账号登录
·
·

Hello,新朋友

在发表评论的时候你至少需要一个响亮的昵称

GO
资讯 > 营销广告 > 微信小程序推出自定义组件,减少重复开发!
分享到

微信小程序推出自定义组件,减少重复开发!

时间:05-09 10:32 阅读:2807次 转载来源:快登CMS     作者:快登CMS

摘要:微信小程序推出自定义组件,减少重复开发!

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


小程序自定义组件功能特点:

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

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

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

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

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

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

mlwx 文件: 组件模版

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

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

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

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 这个组件。

如何使用微信小程序自定义组件?

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

Step 1

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


 Step 2

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


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

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

自定义组件的高级特性与注意事项

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

01\

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

02\

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

03\

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

04\

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

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

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

   快登CMS拥有完善的公众号+小程序方案,面向零售电商、餐饮、酒店、美业、健身瑜伽、酒吧、KTV、康体SPA等行业,深度功能支撑,不做流于表面的小程序。傻瓜化拖拽制作自己想要的小程序,100+海量模板供您选择,具有支付、预约、移动CRM、大数据营销等功能,全球数十万家平台客户的支持,遍布全国各地的案例。

    快登CMS微信营销系统涵盖30多个行业,从吸粉、转化到消费的功能,满足各类微运营商的需求,软件+后期服务指导,国内最强大的微信营销神器。

(更多精彩动态,敬请关注快登CMS官网更新,客服妹子扣扣:1022785072 微信:CCyafang)


声明:本文由快登CMS企业号发布,依据企业号用户协议,该企业号为文章的真实性和准确性负责。创头条作为品牌传播平台,只为传播效果负责,在文章不存在违反法律规定的情况下,不继续承担甄别文章内容和观点的义务。

评论

未登录的游客
游客

    为您推荐
  • 推荐
  • 人物
  • 专题
  • 干货
  • 地方
  • 行业
+加载更多资讯

阅读下一篇

新芽快讯|跨境B2B平台“行云全球汇”完成3亿元A轮融资,金沙江联合投资领投

新芽快讯|跨境B2B平台“行云全球汇”完成3亿元A轮融资,金沙江联合投资领投

返回创头条首页

©2015 创头条版权所有ICP许可证书京ICP备15013664号RSS