小程序原生API-界面API

框架提供了丰富的微信原生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
})

官方API文档

https://mp.weixin.qq.com/debug/wxadoc/dev/api/