微信小程序学习之路——API界面（一）

界面

交互反馈

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. 动画描述

创建实例后我们需要调用实例动画方法来描述动画，这些方法调用后会返回自身，支持链式调用的写法，动画描述方法按类型可以分为样式、旋转、缩放、偏移、倾斜、矩阵变形，下面分别介绍：

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();
}
});