codecamp

微信小程序API 交互反馈

wx.showToast(OBJECT)

显示消息提示框。

OBJECT参数说明:

参数类型必填说明最低版本
titleString是提示的内容 
iconString否图标,有效值"success"、"loading" 
imageString否自定义图标的本地路径,image 的优先级高于 icon1.1.0
durationNumber否提示的延迟时间,单位毫秒,默认:1500 
maskBoolean否是否显示透明蒙层,防止触摸穿透,默认:false 
successFunction否接口调用成功的回调函数 
failFunction否接口调用失败的回调函数 
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行) 

示例代码:

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

wx.showLoading(OBJECT)

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

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

OBJECT参数说明:

参数类型必填说明
titleString是提示的内容
maskBoolean否是否显示透明蒙层,防止触摸穿透,默认:false
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)

wx.hideToast()

隐藏消息提示框

wx.hideLoading()


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

隐藏loading提示框

wx.showLoading({
  title: '加载中',
})

setTimeout(function(){
  wx.hideLoading()
},2000)

wx.showModal(OBJECT)

​显示模态弹窗

OBJECT参数说明:

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

succes返回参数说明:

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

示例代码:

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

wx.showActionSheet(OBJECT)

​显示操作菜单

OBJECT参数说明:

参数类型必填说明
itemListString Array是按钮的文字数组,数组长度最大为6个
itemColorHexColor否按钮的文字颜色,默认为"#000000"
successFunction否接口调用成功的回调函数,详见返回参数说明
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明:

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

示例代码:

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

Bug & Tip

  1. bug:Android6.3.30,wx.showModal 的返回的 confirm 一直为 true;
  2. tip: wx.showActionSheet 点击取消或蒙层时,回调fail, errMsg 为 "showActionSheet:fail cancel";
  3. tip: wx.showLoading 和 wx.showToast 同时只能显示一个,使用 wx.hideToast/wx.hideLoading 都可以关闭提示框;
  4. tip: iOS wx.showModal 点击蒙层不会关闭模态弹窗,所以尽量避免使用“取消”分支中实现业务逻辑。
微信小程序API NFC·NfcV标签
微信小程序API 设置导航条
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

微信小程序 指南

开放能力

微信小程序 调试

微信小程序 实时日志

微信小程序 小程序测速

微信小程序 基础组件

微信小程序 API

媒体

界面

微信小程序API 绘图

微信小程序 服务端

接口调用凭证

统一服务消息

微信小程序 服务市场

微信小程序 生物认证

微信小程序 云开发

服务端

微信小程序云开发服务端API 数据库

SDK文档

微信小程序 扩展能力

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }