您当前的位置: 首页 >  微信小程序

鱼儿-1226

暂无认证

  • 0浏览

    0关注

    1100博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

微信小程序自定义组件Component总结

鱼儿-1226 发布时间:2020-08-25 17:53:18 ,浏览量:0

没有看过微信小程序自定义组件(以下称Component)的同学可以到官网上了解一下。

以下是对Component的总结:

一、Component概念

Component像页面一样由wxml、wxss、js和json4个文件组成,且需要把这4个文件放在同一个目录中。与页面不一样的是,Component中的构造函数(也可以称构造器)是Component({}),而页面中的构造函数是Page({})。

二、slot

Component的slot(slot意思是插槽),主要是让你在外部的wxml可以自由的在你的Component的wxml里插入模块。大家可以在https://github.com/zhu12345618/slotDemo查看实例。

还有一个实例是是Component接受外部样式的,官网中有例子。

三、Component构造器

在Component构造器中需要注意的几个属性是:properties、data、methods。

其他的:如果是属性的话,感觉用到的不多,所以就不说了;如果是函数,则都是Component的生命周期函数,官网上即可了解得很清楚。

1. properties:对外属性,即如果外部的wxml文件传入数据时,会把数据设置成properties的属性。

如官网例子的index.wxml:

 

这个"my-property"即对应custom-component.js里properties属性的myProperty,修改my-property就是修改myProperty。

custom-component.js如下:

 
  1. Component({

  2.  
  3. behaviors: [],

  4.  
  5. properties: {

  6. myProperty: { // 属性名

  7. type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)

  8. value: '', // 属性初始值(可选),如果未指定则会根据类型选择一个

  9. observer: function (newVal, oldVal) { } // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'

  10. },

  11. myProperty2: String // 简化的定义方式

  12. },

  13. data: {

  14. A: [{

  15. B: 'init data.A[0].B'

  16. }]

  17. }, // 私有数据,可用于模版渲染

  18.  
  19. // 生命周期函数,可以为函数,或一个在methods段中定义的方法名

  20. attached: function () { },

  21. moved: function () { },

  22. detached: function () { },

  23.  
  24. methods: {

  25. onMyButtonTap: function () {

  26. this.setData({

  27. // 更新属性和数据的方法与更新页面数据的方法类似

  28. myProperty: 'Test'

  29. })

  30. },

  31. _myPrivateMethod: function () {

  32. // 内部方法建议以下划线开头

  33. this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'

  34. this.applyDataUpdates()

  35. },

  36. _propertyChange: function (newVal, oldVal) {

  37.  
  38. }

  39. }

  40.  
  41. })

但是!小程序有一个问题:是如果properties中的属性是带有数字的,如:myProperty2,这样wxml里对应的就是my-property2,但是这样程序会报错,希望小程序以后可能修复这个问题。

2. data:这里的data和页面中的data是一致的,但是这里的data只在组件内部使用。

Tips:properties和data里的属性不能一样,否则会有冲突。

3. methods:组件中的方法都是在这个对象里定义。

四、组件与外部通信事件

上面的"myProperty"是父节点设置数据到组件里,组件传数据到父节点是用事件的方式。

注册事件,index.wxml和index.js:

 
  1. 这里是插入到组件slot中的内容

  2.  

监听事件:

 
  1. Page({

  2. data: {

  3.  
  4. },

  5. onLoad : function() {

  6. console.log(this.selectComponent("#test"));

  7. },

  8. myEventListener: function(e) {

  9. console.log("Event in index")

  10. }

  11. })

 

发射事件component-tag-name.wxml和component-tag-name.js:

 
  1. 点击这个按钮将触发“myevent”事件

 
  1. // components/component-tag-name.js

  2. Component({

  3. properties: {},

  4. methods: {

  5. onTap: function () {

  6. var myEventDetail = {} // detail对象,提供给事件监听函数

  7. var myEventOption = {} // 触发事件的选项

  8. this.triggerEvent('myevent', myEventDetail, myEventOption)

  9. }

  10. }

  11. })

源代码官网里有,也可以在https://github.com/zhu12345618/componentEventTest下载。

五、组件通信的最后大招

如果以上通信还不能满足需求,可以用this.selectComponent("#test"),这个方法需要传一个id号。

注意上面的index.wxml中有一个代码是id="test",这样定义之后,就可以在js文件中用this.selectComponent("#test")获取到这个组件了。

 

最后,Component还有behaviors、组件关系、抽象节点等特性,但是对于一般的需求来说,不经常用到,所以就不作总结了。如果需要了解的话,可以去官网学习。

以上是本人的一点小总结,如有不足之处,还请各位指正!

关注
打赏
1604459285
查看更多评论
立即登录/注册

微信扫码登录

0.0701s