微信小程序开发常用组件（标签）和API详解

常用的视图容器组件

1. view

• 普通视图区域
• 类似于HTML中的div，是一个块级元素
• 常用来实现页面的布局效果

2. scoll-view

• 可滚动的视图区域
• 常用来实现滚动列表效果

3. swiper和swiper-item  （这个用来写轮播图超级方便！！详细属性放在下方表格中，有需要的自取）

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

• swiper组件的常用属性

属性	类型	默认值	说明
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	是否采用衔接滑动

常用的基础内容组件

1. text

• 文本组件
• 类似于HTML中的span标签，是一个行内元素
• 基本使用：
  • 通过text组件的 selectable 属性，实现长按选中文本内容的效果
  • 例如 ： 长按即可复制该文本

2. rich-text

• 富文本组件
• 支持把 HTML 字符串渲染为 WXML 结构
• 基本使用：
  • 通过 rich-text 组件的 nodes 属性节点，把HTML字符串渲染为对应的UI结构
  • 例如：

其它常用组件

1. button

• 按钮组件
• 功能比HTML中的 button 按钮丰富
• 通过 open-type 属性可以调用微信提供的各种功能 （客服、转发、获取用户授权、获取用户信息等）
• 基本使用：
  • 通过type属性指定按钮类型，属性值有primary、warn等
  • 通过size属性指定按钮尺寸，属性值有mini等
  • 通过plain属性指定按钮是否镂空，加上plain默认就为true

2. image

• 图片组件
• image组件默认宽度约300px、高度约240px
• 基本使用：
  • image组件的 mode 属性用来指定图片的 裁剪 和 缩放 模式，常用的mode属性值如下：

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

3. navigator（后续详细补充）

• 页面导航组件
• 类似于HTML中的 a 链接

小程序API的三大分类

1. 事件监听API

• 特点：以 on 开头，用来 监听某些事件的触发
• 举例：wx.onWindowResize(function,callback)监听窗口尺寸变化的事件

2. 同步API

• 特点1：以 Sync 结尾的API都是同步API
• 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
• 举例：wx.setStorageSync('key','value')向本地存储中写入内容

3. 异步API

• 特点：类似于jQuery中的 $.ajax(options) 函数，需要通过success、fall、complete接收调用的结果
• 举例：wx.request()发起网络数据请求，通过success回调函数接收数据