小程序：组件

一个小程序页面可以分解成多个部分组成，组件就是小程序页面的基本组成单元。为了让开发者可以快速进行开发，小程序的宿主环境提供了一系列基础组件。

组件是在WXML模板文件声明中使用的，WXML的语法和HTML语法相似，小程序使用标签名来引用一个组件，通常包含开始标签和结束标签，该标签的属性用来描述该组件。

代码清单3-15 在WXML使用组件示例

<!-- page.wxml -->
<image mode="scaleToFill" src="img.png"></image>

需要注意，所有组件名和属性都是小写，多个单词会以英文横杠 "-" 进行连接。

对于一些容器组件，其内容可以声明在其开始标签和结束标签之间。

代码清单3-16 容器组件嵌套其他组件

<!-- page.wxml -->
<view>
  <image mode="scaleToFill" src="img.png"></image>
  <view>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </view>
</view>

所有组件都拥有表3-7列举的属性，主要涉及样式和事件绑定，我们不在此处再做额外的说明，详细可以了解2.3节以及3.5节的相关内容。

表3-7 组件共有属性

属性名 	类型 	描述 	其他说明
id 	String 	组件的唯一标示 	保持整个页面唯一
class 	String 	组件的样式类 	在对应的WXSS中定义的样式类
style 	String 	组件的内联样式 	可以通过数据绑定进行动态设置的内联样式
hidden 	Boolean 	组件是否显示 	所有组件默认显示
data-* 	Any 	自定义属性 	组件上触发的事件时，会发送给事件处理函数
bind / catch 	EventHandler 	事件 	详情见3.5节

组件都拥有各自自定义的属性，可以对该组件的功能或者样式进行修饰，以image图片组件为例，其属性列表如表3-8所示。

表3-8 Image图片组件属性

属性名 	类型 	默认值 	描述
src 	String 		图片资源地址
mode 	String 	'scaleToFill' 	图片裁剪、缩放的模式
lazy-load 	Boolean 	false 	图片懒加载。只针对page与scroll-view下的image有效 1.5.0
binderror 	HandleEvent 		当错误发生时触发事件，事件对象event.detail = {errMsg: 'something wrong'}
bindload 	HandleEvent 		当图片载入完毕时触发事件，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'}

为了不占篇幅，我们不在本书展开所有组件的属性说明，请在使用时前往官方文档进行查阅相关组件说明 https://mp.weixin.qq.com/debug/wxadoc/dev/component/。