微信小程序8 界面api

交互反馈

wx.showToast(OBJECT)

显示消息提示框

wx.showToast({  title: '成功',  icon: 'success',  duration: 2000})

OBJECT参数说明：

参数类型必填说明最低版本titleString是提示的内容 iconString否图标，有效值 "success", "loading" imageString否自定义图标的本地路径，image 的优先级高于 icon1.1.0durationNumber否提示的延迟时间，单位毫秒，默认：1500

wx.showLoading(OBJECT)

基础库 1.1.0 开始支持，低版本需做兼容处理

显示 loading 提示框, 需主动调用 wx.hideLoading 才能关闭提示框

wx.hideToast()

隐藏消息提示框

wx.hideLoading()

基础库 1.1.0 开始支持，低版本需做兼容处理

隐藏 loading 提示框

wx.showLoading({  title: '加载中',})setTimeout(function(){  wx.hideLoading()},2000)

wx.showModal(OBJECT)

​显示模态弹窗

wx.showModal({  title: '提示',  content: '这是一个模态弹窗',  success: function(res) {    if (res.confirm) {      console.log('用户点击确定')    } else if (res.cancel) {      console.log('用户点击取消')    }  }})

OBJECT参数说明：

参数类型必填说明titleString是提示的标题contentString是提示的内容showCancelBoolean否是否显示取消按钮，默认为 truecancelTextString否取消按钮的文字，默认为"取消"，最多 4 个字符cancelColorHexColor否取消按钮的文字颜色，默认为"#000000"confirmTextString否确定按钮的文字，默认为"确定"，最多 4 个字符confirmColorHexColor否确定按钮的文字颜色，默认为"#3CC51F"successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

参数类型说明最低版本confirmBoolean为 true 时，表示用户点击了确定按钮 cancelBoolean为 true 时，表示用户点击了取消（用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭）1.1.0

wx.showActionSheet(OBJECT)

​显示操作菜单

wx.showActionSheet({  itemList: ['A', 'B', 'C'],  success: function(res) {    console.log(res.tapIndex)  },  fail: function(res) {    console.log(res.errMsg)  }})

OBJECT参数说明：

参数类型必填说明itemListString Array是按钮的文字数组，数组长度最大为6个itemColorHexColor否按钮的文字颜色，默认为"#000000"

success返回参数说明：

参数类型说明tapIndexNumber用户点击的按钮，从上到下的顺序，从0开始

导航

wx.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。    可以返回！！！！！

wx.navigateTo({  url: 'test?id=1'})

//test.jsPage({  onLoad: function(option){    console.log(option.query)  }})

注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

wx.redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

wx.reLaunch(OBJECT)

基础库 1.1.0 开始支持，低版本需做兼容处理

关闭所有页面，打开到应用内的某个页面。

示例代码：

wx.reLaunch({  url: 'test?id=1'})

//test.jsPage({  onLoad: function(option){    console.log(option.query)  }})

wx.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

{  "tabBar": {    "list": [{      "pagePath": "index",      "text": "首页"    },{      "pagePath": "other",      "text": "其他"    }]  }}

wx.switchTab({  url: '/index'})

wx.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码// 此处是A页面wx.navigateTo({  url: 'B?id=1'})// 此处是B页面wx.navigateTo({  url: 'C?id=1'})// 在C页面内 navigateBack，将返回A页面wx.navigateBack({  delta: 2})

OBJECT 参数说明：

参数类型默认值说明deltaNumber1返回的页面数，如果 delta 大于现有页面数，则返回到首页

设置导航条

wx.setNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

wx.setNavigationBarTitle({  title: '当前页面'})

wx.showNavigationBarLoading()

在当前页面显示导航条加载动画。

wx.hideNavigationBarLoading()

隐藏导航条加载动画。

wx.setNavigationBarColor(OBJECT)

wx.setNavigationBarColor({    frontColor: '#ffffff',    backgroundColor: '#ff0000',    animation: {        duration: 400,        timingFunc: 'easeIn'    }})

frontColorString是前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000backgroundColorString是背景颜色值，有效值为十六进制颜色animationObject否动画效果animation.durationNumber否动画变化时间，默认0，单位：毫秒animation.timingFuncString否动画变化方式，默认 linear

animation.timingFunc 有效值：

值说明linear动画从头到尾的速度是相同的。easeIn动画以低速开始easeOut动画以低速结束。easeInOut动画以低速开始和结束。

动画

wx.createAnimation(OBJECT)

创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性

var animation = wx.createAnimation({  transformOrigin: "50% 50%",  duration: 1000,  timingFunction: "ease",  delay: 0})

以下为各种动画的调用

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

绘图

待补充....