2019-01-23尝试自定义组件

每个自定义组件由四个代码文件组成:

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

你可能感兴趣的:(2019-01-23尝试自定义组件)