微信小程序中的组件是由微信提供的,开发者可以基于组件快速的搭建出页面。微信小程序的组件可以分为9大类,分别是视图容器、基础内容、表单组件、导航组件、 媒体组件、map 地图组件、canvas 画布组件、开放能力和无障碍访问。
视图容器类组件
- view
- 普通的视图区域
- 类似于 HTML 中的 div 标签,是一个块级元素
- 常用来实现页面的布局效果
- scroll-view
- 可滚动的视图区域
- 常用来实现滚动的列表效果
- swiper 和 swiper-item
- 轮播图容器组件和轮播图单元组件
- 基本使用
swiper 组件属性
基础内容类组件
- text
- 文本组件
- 类似于 HTML 中的 span 标签,是一个行内元素
- 使用
小程序中只有 text 组件能够实现文本的长按选中,通过 text 组件的 selectable 属性,可以实现长按选中文本的效果
- rich-text
- 富文本组件
- 支持把 HTML 字符串渲染为 WXML 结构
- 使用
通过 rich-text 组件的 nodes 属性节点,可以把 HTML 字符串渲染为对应的 UI 结构
其他常用组件
- button
- 按钮组件
- 功能比 HTML 中的 button 更丰富
- 通过 open-type 属性可以调用微信提供的各种功能,如转发、获取用户信息等
- 基本使用
代码
显示效果
- image
- 图片组件
- image 组件默认的宽度约 300px,高度约 240px
- 基本使用
可以使用 image 组件的 mode 属性来指定图片的剪裁和缩放模式,mode 基本属性如下
mode 常用属性
- navigator
- 页面的导航组件
- 类似于 HTML 中的 a 链接