E企盈营销工具技术服务商 热线:4006-838-530

微信小程序组件,微信小程序自定义组件Component的使用

E企盈直播平台营销卖货系统

前言之前有一篇博文介绍了小程序中模板template的使用。在使用的时候,虽然可以实现与组件相同的显示功能,但是template没有自己的生命周期,在操作模板上的控件时,事件的传递不好处理,而这些不方便都可以通过组件component来代替,先看一波效果图。实现1.创建component组件首先如上图创建components文件夹,home-item就是最上面效果图的条目的组件模块。这里可以发现,和普通页面一样,组件也可以创建四个文件。在js文件中可以进行数据的绑定与父组件的交互。home-item.json{“component”:true,”usingComponents”:{}//可以使用其他组件}home-item.js//(Component构造器)Component({//一些组件选项options:{multipleSlots:true//在组件定义时的选项中启用多slot支持},//组件的对外属性,属性设置中可包含三个字段,type表示属性类型、value表示属性初始值、observer表示属性值被更改时的响应函数properties:{//活动封面coverUrl:{type:String,value:”http://img.youpenglai.cn/meetingpic/0b24376c43b1c372076aa65253b2f0ca123.jpg”},//活动标题activityTitle:{type:String,value:”我是Title”},//打卡时间范围signTimeRange:{type:String,value:”00:00-23:59″},//是否是组织者organizerStatus:{type:Number,value:0},//是否是组织者signTimes:{type:Number,value:0},//打卡状态signStatus:{type:Number,value:0}},//组件的内部数据,和properties一同用于组件的模版渲染data:{isShowOrganizer:false,},//组件的方法,包括事件响应函数和任意的自定义方法methods:{//跳转活动详情activityDetailTap:function(e){varcurrentPosition=e.currentTarget.dataset.currentPositionthis.triggerEvent(‘signEvent’,{‘currentPosition’:currentPosition})}}//组件生命周期函数,可以为函数,或一个在methods段中定义的方法名attached:function(){},moved:function(){},detached:function(){},})在这里wxml和wxss文件就不介绍了。看下父页面如何引用子组件。home.json父组件的json文件中引入组件”usingComponents”:{“home-item”:”../components/home-item/home-item”}home.wxml!–首页列表–viewclass=’join-layout’blockwx:for=”{{joinDatas}}”wx:for-item=”joinItem”!–这里是引入的组件名称–home-itemid=”homeItem”!–绑定子组件发出的事件–bind:signEvent=”signEvent”coverUrl='{{joinItem.dakaPic}}’activityTitle='{{joinItem.dakaName}}’signTimeRange='{{joinItem.dakaTimeRange}}’organizerStatus='{{organizerStatus}}’signTimes='{{joinItem.dakaNum}}’signStatus='{{joinItem.status}}’/home-item/block/viewhome.js//父组件接收子组件的事件进行相应的操作signEvent:function(e){//console.log(e)//获取点击的打卡位置varsignPosition=e.detail.currentPositionvardakaBean=this.data.joinDatas[signPosition]//已经打卡wx.navigateTo({url:’../detail/joined-detail/joined-detail?actId=’+dakaBean.actId,})//wx.navigateTo({//url:’../detail/not-join/not-join?actId=’+dakaBean.actId,//})//if(dakaBean.status==0){//utils.showToast(“none”,”当前时间不在打卡时间范围内,请耐心等待”)//}else{////未打卡//wx.navigateTo({//url:’../detail/joined-detail/joined-detail?actId=’+dakaBean.actId,//})//}},父子组件之间需要做事件的传递,首先是在子组件中通过this.triggerEvent(‘signEvent’,{})来发送事件,父组件在子组件上进行事件绑定,在js文件中来响应事件。获取数据的方式这里不做介绍,上述代码是父组件的wxml中对子组件进行数据绑定,上述的coverUrl等参数是在组件中声明的属性值,这里作传值用。组件的引入只需要在父组件的json文件中通过usingComponents引入,不需要像使用template在wxml和wxss中将子组件的wxml布局和wxss样式也引入。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序组件,微信小程序自定义组件Component的使用
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏