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

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

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

自定义组件:一小程序提供了很多api和基础组件,但为减少代码的复杂度和提高复用率,小程序也提供了自己的代码复用机制:小程序复用:页面模版(template),组件模版(component,使用时用标签的形式)。这两种模版的写法和之前页面的写法是一样的,都有四个文件wxml,js,wxss,json二我们在使用基础组件时比如viewbindtap=””catchtap=””data-name=””id=””/view总会写事件和属性值,自定义组件也一样需要有自己的属性和事件,属性分内部属性和外部属性,这两种属性共同设置了组件的样式。内部属性可以理解为手机的预装软件。外部属性可以理解为手机的应用商店,可以自己手动管理。当然我们也会提供接口供使用者来修改内部属性。三,生命周期:组件也有生命周期函数,和页面一样。页面有:onloadonreadyonshowonhideonunload组件有:createdattachedreadydetachedmove新建component组件:四,自定义组件,这是官方提供的例子Component({//自定义组件的专有形式,如page页面的page({}),app文件的App({})behaviors:[],properties:{myProperty:{//属性名type:String,//类型(必填),目前接受的类型包括:String,Number,Boolean,Object,Array,null(表示任意类型)value:”,//属性初始值(可选),如果未指定则会根据类型选择一个observer:function(newVal,oldVal){}//属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串,如:’_propertyChange’},myProperty2:String//简化的定义方式},data:{},//私有数据,可用于模版渲染//生命周期函数,可以为函数,或一个在methods段中定义的方法名attached:function(){},moved:function(){},detached:function(){},methods:{onMyButtonTap:function(){this.setData({//更新属性和数据的方法与更新页面数据的方法类似})},_myPrivateMethod:function(){//内部方法建议以下划线开头this.replaceDataOnPath([‘A’,0,’B’],’myPrivateData’)//这里将data.A[0].B设为’myPrivateData’this.applyDataUpdates()},_propertyChange:function(newVal,oldVal){}}})在使用组件的页面的json文件中配置{useComponents:{“自定义组件名字”:”组件的绝对路径”}}如{useComponents:{“div”:”../page/page”}}需求:自定义组件中放其他的基础组件。方法:在自定义组件的wxml文件中使用slotname=””标签自定义组件:slotname=”test”/slot,将此标签放入想要安置的位置。引用页面:viewstyle=”background:___”slot=”test”/view//如果想要设置样式的话写在slot标签中是无效的。组件不论是自定义组件还是基础组件,都有自己的属性,事件。注意:如果组件wxml文件中的slot标签中写了name属性,那么就必须在组件的js文件中写上options:{multipleSlots:true},不然不起作用。

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

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏