小程序的宿主环境--组件

小程序中组件的分类

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

官方把小程序组件分为了9大类，分别是：

1.视图容器

2.基础内容

3.表单组件

4.导航组件

5.媒体组件

6.map地图组件

7.canves画图组件

8.开放能力

9.无障碍访问

常用的视图容器类组件

1.view

⚫普通视图区域

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

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

2.scoll-view

⚫ 可滚动的视图区域

⚫ 常用来实现滚动列表效果

3.swiper和swiper-item

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

view组件的基本使用

实现如图的 flex 横向布局效果：

scroll-view 组件的基本使用

实现如图的纵向滚动效果：

swiper 和swiper-item 组件的基本使用

实现如图的轮播图效果：

swiper 组件的常用属性

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

常用的基础组件

① text

⚫ 文本组件

⚫ 类似于 HTML 中的 span 标签，是一个行内元素

② rich-text

⚫ 富文本组件

⚫ 支持把 HTML 字符串渲染为 WXML 结构

通过 text 组件的 selectable 属性，实现长按选中文本内容的效果：

通过 rich-text 组件的 nodes 属性节点， 把 HTML 字符串渲染为对应的 UI 结构 ：

① button

⚫ 按钮组件

⚫ 功能比 HTML 中的 button 按钮丰富

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

② image

⚫ 图片组件

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

③ navigator

⚫ 页面导航组件

⚫ 类似于 HTML 中的 a 链接

button 按钮的基本使用：

image组件的基本使用

效果即给图片加了边框

image 组件的 mode 属性

image 组件的 mode 属性用来指定图片的 裁剪 和 缩放 模式，常用的 mode 属性值如下：

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

效果如下：

aspectFit

scaleToFill：

aspectFill：

widthFix：

heightFix：