上QQ阅读APP看书,第一时间看更新
2.3 基础组件
在微信小程序中,基础组件类似于前端中的div、span等标签,是视图层的基本组成单元。小程序的组件提供了一些便利的功能与属性,并且与微信整体的UI风格一致,不需要对样式做过多的调整。开发者除了直接使用基础组件外,也可以通过封装自定义组件。灵活地运用组件提供的属性可以有效地提高我们的开发效率。
2.3.1 组件属性类型
组件的属性类型主要有7种,如表2.2所示。
表2.2 组件属性类型
组件上使用的属性是布尔、数字、字符串等常见的内容,理解起来很容易。
2.3.2 组件公共属性
首先解释一下公共属性与属性类型这两个概念的区别。为了方便开发,微信小程序给每个组件内置了一些属性,即公共属性。每个属性都有自己的类型,即2.3.1小节所讲的属性类型,不论是公共属性还是自定义的,都是围绕着这7个属性类型展开的。
介绍完了组件的这两个概念,我们继续分析组件的公共属性。组件的公共属性主要有6种,如表2.3所示。
表2.3 组件公共属性
从表2.3可以看出,组件提供的公共属性并不多,而且class、style等属性和HTML5中的基本相同,所以需要注意的是自定义属性和事件。
【示例2-3】
我们举一个简单的例子,讲解一下自定义属性与事件的用法:
从代码中可以看出,我们创造了一个view标签,data-name传递了一个值“张三”,bindtap创建了一个点击事件“tapName”。data-name属于自定义组件时使用的,在这里不进行展开,只演示传递方法,所以这个“张三”只是传递进去了,并没有获取它。后面的点击事件可以在wxs文件中,输入一个同名的方法,执行点击相关的事件。