宿主环境

一、组件

1. view

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

2. scroll-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	是否采用衔接滑动

4. 常用的基础内容组件

• text
  • 文本组件
  • 类似于 HTML 中的 span 标签，是一个行内元素
  • 属性：
    • selectable ：实现长按选中文本内容的效果
• rich-text
  • 富文本组件
  • 支持把 HTML 字符串渲染为 WXML 结构
  • 属性：
    • nodes：把 HTML 字符串渲染为对应的 UI 结构

5. 其他常用组件

• button

  • 按钮组件
  • 功能比 HTML 的 button 按钮丰富
  • 通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
  • 小尺寸按钮：size：mini
  • 镂空按钮：plain
  • 主色调、警告按钮：type

• image

  • 图片组件

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

  • mode属性：

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

• navigator

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

二、API

1. 事件监听API

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

2. 同步API

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

3.异步 API

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