微享互动主营:媒体betway必威官网app(朋友圈betway必威官网app,腾讯广点通,腾讯新闻APP,新浪新闻APP,凤凰新闻APP,优酷视频,陌陌到店通)、betway ios必威体育官方网站建设、betway ios小程序开发、betway ios公众号制作
全国服务热线:15320293856
QQ
咨询
二维码
电话
汪经理:13594363214 文经理:17783139095 罗经理:15320293856
信息搜索
您当前所在的位置 首页 > 微享资讯 > 小程序 >

小程序自定义组件如何减少重复开发

点击:
来源: 微享互动      时间:2018-07-26 15:39:39  
  较为复杂的小程序中常常会有一些通用的交互模块,比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到,逻辑也相对独立。然而,用传统的小程序开发方法来实现这样的模块是非常繁琐的。小程序的界面是由一系列组件构成的。小程序基础库提供了一组基础组件来满足开发者的基本需求。但随着小程序开发变得越来越复杂,单纯使用基础组件来进行开发也变得越来越不方便。   面对这个情况,小程序基础库提供了让开发者自己创建界面组件的特性的“自定义组件”。通过这个特性,开发者就能够将这样的交互模块抽象成界面组件,使界面代码组织变得非常灵活。自定义组件是相对独立的功能模块,开发者可以将自己的自定义组件代码开源出来,与其他开发者共享开发成果。自定义组件局部更新时的性能相比页面的局部更新要小很多,在必要时可以利用这个特点进行性能优化。开发者可以将一些复用性强的代码抽象成自定义组件,它们的使用方法与基础库内置的view 、 button等基础组件非常相似。这样的组件化非常有利于代码逻辑的解耦合。   如何编写一个自定义组件?   每个自定义组件由四个代码文件组成:json文件用于于放置一些最基本的组件配置,wxml文件组件模版, wxss 文件组件的样式,只在组件内部节点上生效(这个文件是可选的),js 文件组件的 JS 代码,承载组件的主要逻辑。这四个文件与编写一个页面时用到的四个文件非常类似,但也有区别。下面将介绍如何利用这四个文件编写一个简单的自定义组件。   1.组件配置   编写一个自定义组件,首先应在小程序代码目录中合适的位置创建一个 json 文件。这里我们把文件放置在小程序的 components目录下,名为 custom-checkbox.json 。
小程序自定义组件减少重复开发方法
  这个文件中包含以下内容:   {   component:ture   }   2.组件模板   在同一目录下,创建一个模版文件 custom-checkbox.wxml 。这个文件的写法与页面模版很类似:
小程序自定义组件减少重复开发方法
  这个模版将在组件中渲染出一个 checkbox 和一个 label 。   3.组件样式   同样类似于页面, wxss 文件中可以指定组件节点的样式。其中的样式仅在组件内部生效。需要注意的是,样式只能通过类选择器(如 .the-class-name )来指定:
小程序自定义组件减少重复开发方法
  4.组件定义   组件的 JS 文件中必须包含组件定义。定义时使用 Component 构造器:
小程序自定义组件减少重复开发方法
  简单的 Component 构造器调用包含3个定义段:methods 中的方法可以用来包含组件的事件回调函数;data 是组件的内部数据,可以用 this.setData 方法来改变;properties 中声明这个组件的属性,上例中声明了 title 属性,这样,组件外部在使用组件时就可以指定这个属性的值。   这样我们就编写好了 custom-checkbox 这个组件。   如何使用自定义组件?   在需要使用这个组件的页面所对应的 json 文件中,添加下面的自定义组件声明:
小程序自定义组件减少重复开发方法
  在页面对应的 wxml 文件中使用了:在自定义组件中也是可以引用其他自定义组件的,方法与在页面中引用的方法类似。   高级特性与注意事项   除了上述的基本功能外,自定义组件还提供了一组基础接口,用来实现各种各样的功能。如果事件机制还不足以满足组件间通信需要的话,可以使用selectComponent接口。如果同时建立了好几个有相互关联关系的组件,可以使用组件间关系接口relations。组件间可能需要共享部分代码,这时可以使用behaviors。在页面和自定义组件间通信时,最常用的方法是事件机制,自定义组件可以使用 triggerEvent接口向页面发送事件,页面 WXML 中使用 bind 或者 catch 就可以监听到。   来源:betway ios必威体育官方网站建设,本文网址:http://www.cqaaa.com/app-news/761.html,欢迎分享,(电话:15320293856,微信:llhhldancing)

预约咨询

马上提交您的需求,我们会在24小时内联系您,提供产品策划服务!
网址:http://www.cqaaa.com 地址:betway ios市两江新区天王星C1栋3楼 必威体育官方网站建设咨询:15320293856 罗经理 百度betway必威官网app咨询:13594363214 汪经理 朋友圈betway必威官网app咨询:17783139095 文经理
微享官方微信 扫一扫 关注公众号