在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说的自定义组件,自定义组件类似于页面,它有wxml
模版、wxss
样式和js文件,然后在页面中使用该自定义组件即可。
例如,我的自定义组件代码结构是这样的:
myComponent文件就是我所创的自定义组件,myComponent.wxml文件代码为:
1 2 3 |
|
myComponent.js文件代码为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
myComponent.wxss部分代码如下:
1 2 3 |
|
现在我要在pages/index文件中使用该自定义组件,该怎么做呢?
1、在myComponent.json文件中添加以下代码:
1 2 3 |
|
2、在需要调用自定义组件的文件中,如pages/index文件需要调用自定义组件,那么则需要在pages/index/index.json文件中添加如下代码:
1 2 3 4 5 |
|
3、然后就可以在myComponent.wxml文件中使用该自定义组件了,
index.wxml文件代码如下:
1 2 3 |
|
此时调用自定义组件后,效果如下:
4、现在要调用自定义组件中的方法就可以这样做,为了方便,这里我使用的是点击按钮调用事件,因此index.wxml文件代码变为:
1 2 3 4 |
|
5、myComponent.js文件部分代码为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
|
现在点击按钮后就可以调用自定义组件了。效果如下: