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

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

以下是对Component的总结&＃xff1a;

一、Component概念

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

二、slot

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

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

三、Component构造器

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

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

1. properties&＃xff1a;对外属性&＃xff0c;即如果外部的wxml文件传入数据时&＃xff0c;会把数据设置成properties的属性。

如官网例子的index.wxml&＃xff1a;

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

custom-component.js如下&＃xff1a;

1. Component({

2.  

3. behaviors: [],

4.  

5. properties: {

6. myProperty: { // 属性名

7. type: String, // 类型&＃xff08;必填&＃xff09;&＃xff0c;目前接受的类型包括&＃xff1a;String, Number, Boolean, Object, Array, null&＃xff08;表示任意类型&＃xff09;

8. value: &＃39;&＃39;, // 属性初始值&＃xff08;可选&＃xff09;&＃xff0c;如果未指定则会根据类型选择一个

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

10. },

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

12. },

13. data: {

14. A: [{

15. B: &＃39;init data.A[0].B&＃39;

16. }]

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

18.  

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

20. attached: function () { },

21. moved: function () { },

22. detached: function () { },

23.  

24. methods: {

25. onMyButtonTap: function () {

26. this.setData({

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

28. myProperty: &＃39;Test&＃39;

29. })

30. },

31. _myPrivateMethod: function () {

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

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

34. this.applyDataUpdates()

35. },

36. _propertyChange: function (newVal, oldVal) {

37.  

38. }

39. }

40.  

41. })

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

2. data&＃xff1a;这里的data和页面中的data是一致的&＃xff0c;但是这里的data只在组件内部使用。

Tips&＃xff1a;properties和data里的属性不能一样&＃xff0c;否则会有冲突。

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

四、组件与外部通信事件

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

注册事件&＃xff0c;index.wxml和index.js&＃xff1a;

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

6.  

监听事件&＃xff1a;

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&＃xff1a;

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

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

2. Component({

3. properties: {},

4. methods: {

5. onTap: function () {

6. var myEventDetail &＃61; {} // detail对象&＃xff0c;提供给事件监听函数

7. var myEventOption &＃61; {} // 触发事件的选项

8. this.triggerEvent(&＃39;myevent&＃39;, myEventDetail, myEventOption)

9. }

10. }

11. })

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

五、组件通信的最后大招

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

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

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

以上是本人的一点小总结&＃xff0c;如有不足之处&＃xff0c;还请各位指正&＃xff01;