小程序组件

组件

小程序组件是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。

官方把小程序的组件分为9大类

1.视图容器
2.基础内容
3.表单组件
4.导航组件
5.媒体组件
6.map地图组件
7.canvas画布组件
8.开放功能
9.无障碍访问

视图容器

view

普通视图区域

类似于HTML中的div，是一个块级元素

常用来实现页面的布局效果

scroll-view

可滚动的视图区域

常用来实现滚动列表效果

swiper和swiper-item

轮播图容器组件和轮播图item组件

属性	类型	默认值	说明
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0,0,0,.3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动

text

文本组件 类似HTML中的span标签 是一个行内元素

添加selectable属性 支持长按选中效果

rich-text

富文本组件 支持把HTML字符串渲染成WXML结构

nodes属性的值为html字符串时会解析到标签中

button

按钮组件

通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息）

image

image组件默认宽度约是300px、高度240px

mode 的值	说明
scaleToFill	（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可完整地将图片显示出来
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

navigator

页面导航组件 a标签

block

仅将组件进行包裹，在页面上不会渲染出多余的标签

类似react中的Fragment