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

微信小程序组件,微信小程序自定义组件

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

昨晚学习了一下实现一个简单的自定义组件,虽然官网的文档有四五个小节,但是看不太懂,找了一篇博客写的挺好的:这里分享一下大概的步骤,以及官网的一些例子带给项目的启发。步骤一在小程序项目中添加一个components文件夹,里面存放自定义的组件,然后在components目录下新建一个customComponent文件夹,文件夹可以命名为自定义组件名字相关,用来存放自定义的组件。在这个文件夹右键,选择新建组件,输入组件名,一个自定义组件由json,wxml,wxss,js4个文件组成,此时将自动生成这四个文件。比如我要新建一个order-item组件,用来显示购物车每一列的内容,包括菜品名称,菜品数量,菜品共计金额,可以通过循环渲染以及数据绑定用购物车List的item给组件属性赋值。此时生成的目录结构为:步骤二接下来进行组件的相关配置:首先需要在json文件中进行自定义组件声明(将component字段设为true可这一组文件设为自定义组件):{“component”:true,//引用其他组件,这里没有引用其他组件”usingComponents”:{}}然后在wxml文件中编写组件模版,在wxss文件中加入组件样式,它们的写法与页面的写法类似。注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。!–components/orderItem/order-item.wxml–viewclass=’orderItem’viewclass=”itemName”{{name}}viewclass=”item-info”iclass=”iconfonticon-minusminus-icon”bindtap=”minusFromCart”/itextclass=”orderNum”{{number}}/texticlass=”iconfonticon-addplus-icon”bindtap=”addToCart”/itextclass=”sum”¥{{sum}}/text/view/view/view/components/orderItem/order-item.wxss/@font-face{font-family:’iconfont’;/projectid657322/src:url(‘//at.alicdn.com/t/font_657322_b9fvdsixaa960f6r.eot’);src:url(‘//at.alicdn.com/t/font_657322_b9fvdsixaa960f6r.eot?#iefix’)format(’embedded-opentype’),url(‘//at.alicdn.com/t/font_657322_b9fvdsixaa960f6r.woff’)format(‘woff’),url(‘//at.alicdn.com/t/font_657322_b9fvdsixaa960f6r.ttf’)format(‘truetype’),url(‘//at.alicdn.com/t/font_657322_b9fvdsixaa960f6r.svg#iconfont’)format(‘svg’);}.iconfont{font-family:”iconfont”!important;font-size:5px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.icon-add:before{content:”e631″;}.icon-minus:before{content:”e617″;}.orderItem{padding-top:6rpx;padding-left:44rpx;padding-right:30rpx;}.itemName{font-size:27rpx;}.item-info{float:right;display:flex;flex-direction:row;}.orderNum{margin-top:1rpx;margin-left:1rpx;width:60rpx;text-align:center}.plus-icon{font-size:40rpx;color:#444444;}.minus-icon{font-size:37rpx;color:#444444;}.sum{margin-top:6rpx;width:130rpx;text-align:right;}步骤三在自定义组件的js文件中,需要使用Component()来注册组件,并提供组件的属性定义、内部数据和自定义方法。组件的属性值和内部数据将被用于组件wxml的渲染。Component构造器:Component构造器可用于定义组件,调用Component构造器时可以指定组件的属性、数据、方法等。定义段类型是否必填描述propertiesObjectMap否组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段,type表示属性类型、value表示属性初始值、observer表示属性值被更改时的响应函数dataObject否组件的内部数据,和properties一同用于组件的模版渲染methodsObject否组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用,参见behaviorsStringArray否类似于mixins和traits的组件间代码复用机制,参见createdFunction否组件生命周期函数,在组件实例进入页面节点树时执行,注意此时不能调用setDataattachedFunction否组件生命周期函数,在组件实例进入页面节点树时执行readyFunction否组件生命周期函数,在组件布局完成后执行,此时可以获取节点信息(使用)movedFunction否组件生命周期函数,在组件实例被移动到节点树另一个位置时执行detachedFunction否组件生命周期函数,在组件实例被从页面节点树移除时执行relationsObject否组件间关系定义,参见externalClassesStringArray否组件接受的外部样式类,参见optionsObjectMap否一些组件选项,请参见文档其他部分的说明生成的组件实例可以在组件的方法、生命周期函数和属性observer中通过this访问。组件包含一些通用属性和方法。属性名类型描述isString组件的文件路径idString节点iddatasetString节点datasetdataObject组件数据,包括内部数据和属性值propertiesObject组件数据,包括内部数据和属性值(与data一致)方法名参数描述setDataObjectnewData设置data并执行视图层渲染hasBehaviorObjectbehavior检查组件是否具有behavior(检查时会递归检查被直接或间接引入的所有behavior)triggerEventStringname,Objectdetail,Objectoptions触发事件,参见createSelectorQuery创建一个对象,选择器选取范围为这个组件实例内selectComponentStringselector使用选择器选择组件实例节点,返回匹配到的第一个组件实例对象selectAllComponentsStringselector使用选择器选择组件实例节点,返回匹配到的全部组件实例对象组成的数组getRelationNodesStringrelationKey获取所有这个关系对应的所有关联节点,参见将要实现的自定义组件只用到了上面的个别定义段和方法://components/orderItem/order-item.jsComponent({/组件的属性列表/properties:{name:{type:String,value:’订单食物名称’},//该菜品的数量number:{type:Number,value:0},//该菜品共计金额sum:{type:Number,value:0},//该菜品在购物车列表中的位置,index为下标index:{type:Number,value:0}},/组件的初始数据/data:{//暂时没有内部数据,如果有需要通过setData函数修改值},/组件的方法列表/methods:{//minusFromCart:function(){console.log(‘triggerminus’)vareventDetail={index:this.data.index}this.triggerEvent(‘minusEvent’,eventDetail,{})//触发minusEvent事件},addToCart:function(){console.log(‘triggeradd’)vareventDetail={index:this.data.index}this.triggerEvent(‘addEvent’,eventDetail,{})//触发addEvent事件}}})步骤四前面的步骤已经初步定义好了一个order-item组件,要使用这个组件还需要进行以下操作:首先要在使用页面的json文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:”usingComponents”:{“order-item”:”/components/orderItem/order-item”}然后就可以在页面的wxml中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。!–index.wxml–order-itemname=”俄式红肠双鸡汉堡”number=’5’sum=’37’index=’0’/order-item实现效果触发事件虽然我们做出了一个购物车某一栏的组件,在组件中定义了组件的点击加号减号的函数,但是好像只能改变组件内部数(如果有的话),而不能反馈给购物车List,怎么才能让购物车List也知道点击事件并且对购物车List做出修改呢?这里就可以利用触发事件了。先看一个官网的例子://页面page.wxmlanother-componentbindcustomevent=”pageEventListener1″my-componentbindcustomevent=”pageEventListener2″/my-component/another-component//页面page.jspageEventListener1:function(e){console.log(‘pageEventListener1’,e)},pageEventListener2:function(e){console.log(‘pageEventListener2’,e)}//组件another-component.wxmlviewbindcustomevent=”anotherEventListener”slot//view//组件my-component.wxmlviewviewbindcustomevent=”myEventListener”slot//viewbuttonbindtap=”onTap”点击这个按钮将触发一系列事件/button/view//组件my-component.jsComponent({methods:{onTap:function(){this.triggerEvent(‘customevent’,{})//只会触发pageEventListener2this.triggerEvent(‘customevent’,{},{bubbles:true})//会依次触发pageEventListener2、pageEventListener1this.triggerEvent(‘customevent’,{},{bubbles:true,composed:true})//会依次触发pageEventListener2、anotherEventListener、pageEventListener1}}})在注释中写了运行的效果,my-component组件中的按钮绑定了onTap事件,当点击按钮时,调用onTap函数,触发了customevent事件。而其父节点是否收到该事件,其父节点的内部是否收到该事件,需要利用触发事件选项来控制。选项名类型是否必填默认值描述bubblesBoolean否false事件是否冒泡composedBoolean否false事件是否可以穿越组件边界,为false时,事件将只能在引用组件的节点树上触发,不进入其他任何组件内部capturePhaseBoolean否false事件是否拥有捕获阶段当触发事件的选项为空时,只触发了该组件的customevent事件;当触发事件选项bubbles为true时,该事件将向父节点传递;当触发事件选项composed为true时,该事件可以穿入其他组件内部;因此,当触发的事件同名时,可以控制触发多个组件的该事件,并进行相应的操作;且绑定的函数可以是页面定义的函数,可以在该函数内改变页面的内部数据。联系到我们想实现的功能,只要在加减号icon的点击函数内触发一个事件,而触发的事件绑定的函数为页面内对应的加号减号处理函数,就可以做到点击组件,而更改页面的数据了。viewclass=”orderList”wx:for=”{{cartList}}”wx:key=”unique”wx:if=”{{foodNumber!=0?true:false}}”order-itemname=”{{item.name}}”number='{{item.number}}’sum='{{item.sum}}’index='{{index}}’!–minusFromCart为页面内定义的购物车减操作,该函数由minusEvent事件触发–bindminusEvent=’minusFromCart’bindaddEvent=’addToCart’/order-item/view有关分享就到这里,可以查看小程序了解更多小程序的特性,做出更复杂的自定义组件。

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

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏