每个自定义组件由四个代码文件组成:
json 文件:用于放置一些最基本的组件配置。
wxml 文件:组件模版。
wxss 文件:组件的样式,只在组件内部节点上生效(这个文件是可选的)。
js 文件:组件的js代码,承载组件的主要逻辑。
这四个文件与编写一个页面时用到的四个文件非常类似,但也有区别。下面将介绍如何利用这四个文件编写一个简单的自定义组件。
1,现在json文件中声明这是一个组件
image.png
2,编写wxml
image.png
3,编写js
image.png
简单的 Component 构造器调用包含3个定义段: methods 中的方法可以用来包含组件的事件回调函数; data 是组件的内部数据,可以用 this.setData 方法来改变; properties 中声明这个组件的属性,上例中声明了 title 属性,这样,组件外部在使用组件时就可以指定这个属性的值。
4,编写css
image.png
5,使用组件(现在json文件声明要使用组件,并设定标签名(我用的cc)使用该组件)
image.png
6,在wxml中正式使用组件
image.png
image.png
7,效果:
image.png