常用的视图容器组件
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 属性,实现长按选中文本内容的效果
- 例如 : <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属性值如下:
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回调函数接收数据