框架提供了丰富的微信原生API，可以方便的调起微信提供的能力。如获取用户信息，本地存储，支付功能等。
以wx.on 开头的 API 是监听某个事件发生的API接口，接受一个 CALLBACK 函数作为参数。当该事件触发时，会调用 CALLBACK 函数。
如未特殊约定，其他 API 接口都接受一个OBJECT作为参数。
OBJECT中可以指定success, fail, complete来接收接口调用结果。
界面API
1、显示提示框
wx.showToast({
title: '操作成功', /* 必填*/
icon: 'success', //可选 "success", "loading", "none"，对应于不同图标
image: './img/icon/xx.png', // 自定义图标（优先级高于icon）传其本地路径
duration: 2000, // 持续时间（ms）
mask: true, // 是否显示透明蒙层
success: // 接口调用成功的 回调函数
fail:
complete:
})
对于icon，若值为"success"或"loading"，此时 title 文本最多显示 7 个汉字；若为‘none’，则不显示图标，此时 title 文本最多可显示两行。
隐藏提示框，调用wx.hideToast()
2、显示 loading 提示框
wx.showToast({
title: '数据加载中...', /* 必填*/
mask: true, // 是否显示透明蒙层
success: // 接口调用成功的 回调函数
fail:
complete:
})
需主动调用
wx.hideLoading()才能关闭提示框。
3、显示模态弹窗
wx.showModal({
title: '提示', /* 必填*/
content: '这是一个模态弹窗', /* 必填*/
showCancel: true, // 是否 显示取消按钮
cancelText: '取消', // 取消按钮的文字，最多 4 个字符
cancelColor: "#000000", // 按钮颜色
confirmText: '保存', // 确定按钮的文字，最多 4 个字符（默认"确定"）
confirmColor: "#000000",
success: function(res) {
if (res.confirm) {
// 用户点击确定
} else if (res.cancel) {
// 用户点击取消
}
}
fail:
complete:
})
4、上弹操作菜单
wx.showActionSheet({
itemList: ['A', 'B', 'C'], // 必填， 按钮的文字数组，数组长度最大为6个
itemColor: #000000 // 按钮的文字颜色
success: function(res) { // 接口调用成功的回调函数
console.log(res.tapIndex) // 用户点击的按钮，从上到下的顺序，从0开始
},
fail: function(res) {
console.log(res.errMsg)
}
complete：
})
5、顶置信息提示
wx.setTopBarText({
text: 'please wait...'
})
创建动画
var animation = wx.createAnimation({
duration: 1000, // 动画持续时间
timingFunction: "ease", // 效果类型
delay: 0, // 动画延迟时间
transformOrigin: "50% 50%", //设置transform-origin
})
timingFunction 有效值：
linear 动画从头到尾的速度是相同的
ease 动画以低速开始，然后加快，在结束前变慢
ease-in 动画以低速开始
ease-in-out 动画以低速开始和结束
ease-out 动画以低速结束
step-start 动画第一帧就跳至结束状态直到结束
step-end 动画一直保持开始状态，最后一帧跳到结束状态
动画实例可以调用以下方法来描述动画，调用后会返回自身，支持链式写法
animation 对象的方法列表：
1、样式：
opacity： 透明度，参数范围 0~1
backgroundColor：
width/height：
top/left/right/bottom：
2、旋转：范围-180~180
rotate：从原点顺时针旋转一个deg角度
rotateX/Y/Z：在X、Y、Z轴旋转一个deg角度
rotate3d：
3、缩放：
scale：若一个参数，表示在X、Y轴同时缩放的倍数
scaleX/Y：在X/Y轴缩放sx倍数
scale3d：(sx,sy,sz）-- 在各轴的缩放倍数
4、偏移：
translate：若一个参数，表示在X轴偏移（px）；两个表示在X、Y轴的偏移
translateX：
translateY：
translateZ：
translate3d：
5、倾斜：
skew：-180~180；一个参数时，表示X轴坐标延顺时针倾斜ax度；两个时，分别在X、Y轴倾斜度
skewX：
skewY：
6、矩阵变形：
matrix:
matrix3d:
动画队列
调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法；
一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的配置。
动画应用示例
<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>
Page({
data: {
animationData: {}
},
onShow: function(){
var animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease',
})
this.animation = animation
animation.scale(2,2).rotate(45).step()
this.setData({
animationData:animation.export()
})
setTimeout(function() {
animation.translate(30).step()
this.setData({
animationData:animation.export()
})
}.bind(this), 1000)
},
rotateAndScale: function () {
// 旋转同时放大
this.animation.rotate(45).scale(2, 2).step()
this.setData({
animationData: this.animation.export()
})
},
rotateThenScale: function () {
// 先旋转后放大
this.animation.rotate(45).step()
this.animation.scale(2, 2).step()
this.setData({
animationData: this.animation.export()
})
},
rotateAndScaleThenTranslate: function () {
// 先旋转同时放大，然后平移
this.animation.rotate(45).scale(2, 2).step()
this.animation.translate(100, 100).step({ duration: 1000 })
this.setData({
animationData: this.animation.export()
})
}
})
将页面滚动到目标位置
wx.pageScrollTo({
scrollTop: 0,
duration: 300
})
网友评论