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

常用的视图容器组件

1. view

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

2. scoll-view

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

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

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

• swiper组件的常用属性

常用的基础内容组件

1. text

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

2. rich-text

• 富文本组件
• 支持把 HTML 字符串渲染为 WXML 结构
• 基本使用：
  • 通过 rich-text 组件的 nodes 属性节点，把HTML字符串渲染为对应的UI结构
  • 例如： <rich-text nodes="<h1 style='color:red'>标题<h1>"></rich-text>

其它常用组件

1. button

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

2. image

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

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回调函数接收数据