小程序组件,小程序自定义组件-即速应用

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

浏览量：782 时间：2019-12-09 来源：xuexixuexien

自定义组件：
一小程序提供了很多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}，不然不起作用。

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。