小程序如何自定义组件

发布时间:2022-03-08 09:45:46 作者:iii
来源:亿速云 阅读:147

本文小编为大家详细介绍“小程序如何自定义组件”,内容详细,步骤清晰,细节处理妥当,希望这篇“小程序如何自定义组件”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

小程序如何自定义组件

一 小程序提供了很多api和基础组件,但为减少代码的复杂度和提高复用率,小程序也提供了自己的代码复用机制:

    小程序复用:页面模版(template),组件模版(component,使用时用标签的形式)。

这两种模版的写法和之前页面的写法是一样的,都有四个文件 wxml,js,wxss, json

二我们在使用基础组件时比如 <view bindtap="" catchtap="" data-name="" id="" class="" ></view> 总会写事件和属性值,

自定义组件也一样需要有自己的属性和事件,

属性分内部属性和外部属性,这两种属性共同设置了组件的样式。内部属性可以理解为手机的预装软件。外部属性可以理解为手机的应用商店,可以自己手动管理。当然我们也会提供接口供使用者来修改内部属性。

三,生命周期:

组件也有生命周期函数,和页面一样。

页面有:onload   onready    onshow    onhide       onunload

组件有:created   attached   ready       detached    move

新建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:{"p":"../page/page"}}

需求:自定义组件中放其他的基础组件。

方法:在自定义组件的wxml文件中使用<slot name="">标签

自定义组件:<slot name="test"></slot>,将此标签放入想要安置的位置。

引用页面 :<view style="background: _ _ _" slot="test"></view>//如果想要设置样式的话写在<slot>标签中是无效的。

 组件不论是自定义组件还是基础组件,都有自己的属性,事件。

注意:如果组件wxml文件中的slot标签中写了name属性,那么就必须在组件的js文件中写上options:{multipleSlots:true},不然不起作用。

读到这里,这篇“小程序如何自定义组件”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 小程序如何封装自定义组件(Toast)
  2. 微信小程序页面调用自定义组件内的事件详解

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序

上一篇:Redis使用长连接有什么好处

下一篇:Redis关闭SWAP有什么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》