界面
交互反馈
wx.showToast(Object)
显示消息提示框，Object参数的属性如下:
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| title | string | 是 | 提示的内容 | ||
| icon | string | 'success' | 否 | 图标 | |
| image | string | 否 | 自定义图标的本地路径，image 的优先级高于 icon | 1.1.0 | |
| duration | number | 1500 | 否 | 提示的延迟时间 | |
| mask | boolean | false | 否 | 是否显示透明蒙层，防止触摸穿透 | |
| success | function | 否 | 接口调用成功的回调函数 | ||
| fail | function | 否 | 接口调用失败的回调函数 | ||
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码如下：
wx.showToast({
title: '操作成功',
icon:'success',
duration:2000
})wx.hideToast()
隐藏消息提示框
示例代码如下：
wx.showToast({
title: '请稍等...',
icon: 'loading',
duration: 10000
});
setTimeout(function(){
//或请求返回时关闭toast
wx.hideToast();
},2000);wx.showModal(Object)
显示模态弹窗，Object参数的属性如下：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| title | string | 是 | 提示的标题 | |
| content | string | 是 | 提示的内容 | |
| showCancel | boolean | true | 否 | 是否显示取消按钮 |
| cancelText | string | '取消' | 否 | 取消按钮的文字，最多 4 个字符 |
| cancelColor | string | #000000 | 否 | 取消按钮的文字颜色，必须是 16 进制格式的颜色字符串 |
| confirmText | string | '确定' | 否 | 确认按钮的文字，最多 4 个字符 |
| confirmColor | string | #576B95 | 否 | 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串 |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码如下:
wx.showModal({
title: '标题',
content: '内容',
success:function(res){
if(!res.confirm){
return;//用户点击了取消，不做任何处理
}
console.log('用户点击了确定');//可以继续流程
}
});wx.showActionSheet(Object)
显示操作菜单，Object参数的属性如下:
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| itemList | Array.<string> | 是 | 按钮的文字数组，数组长度最大为 6 | |
| itemColor | string | #000000 | 否 | 按钮的文字颜色 |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码如下：
wx.showActionSheet({
itemList: ['缺货','配送时间错误','不想买了','其他'],//订单用户取消原因
success:function(res){
if(!res.cancle){
console.log(res.tapIndex);
}
}
});设置导航条
wx.setNavigationBarTitle(Object)
动态设置当前页面的标题，Object参数属性如下：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| title | string | 是 | 页面标题 | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码如下:
wx.setNavigationBarTitle({
title: '新页面',
});wx.showNavigationBarLoading()
在当前页面显示导航条加载动画
示例代码如下：
Page({
onShow:function(){
wx.showNavigationBarLoading();
}
});
wx.hideNavigationBarLoading()
隐藏导航条加载动画
示例代码如下：
Page({
onLaunch:function(){
wx.hideNavigationBarLoading();
}
});导航
wx.navigateTo(Object)
保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面，小程序中页面路径最多5层。Object参数属性如下：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| url | string | 是 | 需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2' |
|
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码如下:
wx.navigateTo({
url: '../newpage?key1=value1&key2=value2',
});
page({
onLoad:function(option){
console.log(option.query);
}
});wx.redirectTo(Object)
关闭当前页面，跳转到应用内的某个页面，Object参数属性如下：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| url | string | 是 | 需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2' |
|
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码如下：
wx.redirectTo({
url: '../newpages?key1=value1&key2=value2',
});wx.switchTab(Object)
跳转到tabBar页面，并关闭其他所有非tabBar页面。Object参数的属性如下：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| url | string | 是 | 需要跳转的 tabBar 页面的路径（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。 | |
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
示例代码如下:
//app.json配置tabBar
{
"tabBar":{
"list":[{
"pagePath":"home",
"text":"首页"
},{
"pagePath":"other",
"text":"其他页面"
}]
}
}wx.switchTab({
url: '/home',//必须是已注册tab
})wx.navigateBack(Object)
关闭当前页面，返回上一页或多级页面。可以通过getCurrentPages()获取当前页面栈，以决定返回第几层。Obejct参数的属性为delta:返回的页面数，如果delta大于现有的页面数，则返回到首页，默认值为1
示例代码如下：
//向前返回3级
wx.navigateBack({delta:3});动画
wx.createAnimation(Object)
用于创建一个动画实例animation。可以调用动画实例的方法来描述动画，最后通过动画实例的export方法导出动画数据，传递给组件animation属性，每次调用exports方法会清掉之前的动画操作。Object参数属性如下：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| duration | number | 400 | 否 | 动画持续时间，单位 ms |
| timingFunction | string | 'linear' | 否 | 动画的效果 |
| delay | number | 0 | 否 | 动画延迟时间，单位 ms |
| transformOrigin | string | '50% 50% 0' | 否 |
示例代码如下:
var animation = wx.createAnimation({
transformOrigin:'0 0',//以左上角为中心点
duration:20000,
timingFunction:'ease-in'
});- 动画描述
创建实例后我们需要调用实例动画方法来描述动画，这些方法调用后会返回自身，支持链式调用的写法，动画描述方法按类型可以分为样式、旋转、缩放、偏移、倾斜、矩阵变形，下面分别介绍：
1）样式
| 方法 | 参数 | 说明 |
|---|---|---|
| opacity | value | 透明度，参数范围 0~1 |
| backgroundColor | color | 颜色值 |
| width | length | 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 |
| height | length | 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 |
| top | length | 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 |
| left | length | 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 |
| bottom | length | 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 |
| right | length | 长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值 |
2）旋转
| 方法 | 参数 | 说明 |
|---|---|---|
| rotate | deg | deg的范围-180~180，从原点顺时针旋转一个deg角度 |
| rotateX | deg | deg的范围-180~180，在X轴旋转一个deg角度 |
| rotateY | deg | deg的范围-180~180，在Y轴旋转一个deg角度 |
| rotateZ | deg | deg的范围-180~180，在Z轴旋转一个deg角度 |
| rotate3d | (x,y,z,deg) | 同transform-function rotate3d |
3）缩放
| 方法 | 参数 | 说明 |
|---|---|---|
| scale | sx,[sy] | 一个参数时，表示在X轴、Y轴同时缩放sx倍数；两个参数时表示在X轴缩放sx倍数，在Y轴缩放sy倍数 |
| scaleX | sx | 在X轴缩放sx倍数 |
| scaleY | sy | 在Y轴缩放sy倍数 |
| scaleZ | sz | 在Z轴缩放sy倍数 |
| scale3d | (sx,sy,sz) | 在X轴缩放sx倍数，在Y轴缩放sy倍数，在Z轴缩放sz倍数 |
4）偏移
| 方法 | 参数 | 说明 |
|---|---|---|
| translate | tx,[ty] | 一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。 |
| translateX | tx | 在X轴偏移tx，单位px |
| translateY | ty | 在Y轴偏移tx，单位px |
| translateZ | tz | 在Z轴偏移tx，单位px |
| translate3d | (tx,ty,tz) | 在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px |
5）倾斜
| 方法 | 参数 | 说明 |
|---|---|---|
| skew | ax,[ay] | 参数范围-180~180；一个参数时，Y轴坐标不变，X轴坐标延顺时针倾斜ax度；两个参数时，分别在X轴倾斜ax度，在Y轴倾斜ay度 |
| skewX | ax | 参数范围-180~180；Y轴坐标不变，X轴坐标延顺时针倾斜ax度 |
| skewY | ay | 参数范围-180~180；X轴坐标不变，Y轴坐标延顺时针倾斜ay度 |
6）矩阵变形
| 方法 | 参数 | 说明 |
|---|---|---|
| matrix | (a,b,c,d,tx,ty) | 同transform-function matrix |
| matrix3d | 同transform-function matrix3d |
2.动画队列
调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。
实例代码如下：
<view style="width:100%;height:200px;"></view>
<icon animation="{{animData}}" style='position:absolute;left:100px;' type='success' size='40'></icon>
<button bindtap='rotateAndMove'>旋转并移动</button>
<button bindtap='rotateThenMove'>旋转后移动</button>Page({
data:{
animData:{}
},
//旋转并移动
rotateAndMove:function(){
var anim = wx.createAnimation({
duration:1000,
timingFunction:'ease'
});
//同时执行2个动画
anim.translateY('100px').rotate('720').step();
this.setData({
animData:anim.export()
});
},
//旋转后再移动
rotateThenMove:function(){
var anim = wx.createAnimation({
timingFunction:'ease'
});
//分布执行3个动画，通过step切割
anim.rotate('720').step({duration:500});
anim.translateY('100px').step({duration:500});
anim.translateX('100px').step({duration:500});
this.setData({
animData:anim.export()
});
}
});执行结果如下：
下拉刷新
wx.startPullDownRefresh(Object object)
开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致，参数如下：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| success | function | 否 | 接口调用成功的回调函数 | |
| fail | function | 否 | 接口调用失败的回调函数 | |
| complete | function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
wx.stopPullDownRefresh()
停止当前页面下拉刷新
示例代码如下：
Page({
//监听当前页面下拉刷新
onPullDownRefresh:function(){
//停止当前页面下拉刷新
wx.stopPullDownRefresh();
}
});