当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序与用户交互

微信小程序与用户交互

2019年09月26日  | 移动技术网IT编程  | 我要评论

微信小程序与用户交互

一.显示消息提示框

wx.showtoast({属性名:属性值})

自定义一个提示框,时间到了会自动关闭

wx.showtoast({

    title:"成功",  //必填

    icon: 'success',//图标只支持"success"、"loading" 

    image: '/images/tan.png',//自定义图标的本地路径，image 的优先级高于 icon

    duration: 2000,//提示的延迟时间，单位毫秒，默认：1500 

    mask: false,//是否显示透明蒙层，防止触摸穿透，默认：false 

    success:function(){}, //接口调用成功的回调函数

    fail:function(){}, //接口调用失败的回调函数

    complete:function(){} //接口调用结束的回调函数（调用成功、失败都会执行）

})

wx.showloading({属性名:属性值})

显示loading提示框,不会自动关闭,需主动调用 wx.hideloading 才能关闭提示框

wx.showloading({
  title: '加载中',
})
settimeout(function () {
  wx.hideloading()
}, 2000)
属性 类型 默认值 必填 说明
title string 是 提示的内容
mask boolean false 否 是否显示透明蒙层，防止触摸穿透
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

wx.hideloading({属性名:属性值})

隐藏 loading 提示框

属性 类型 默认值 必填 说明
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

二.类似html中confirm

wx.showmodal({属性名:属性值})

wx.showmodal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})
属性 类型 默认值 必填 说明
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 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

object res

属性 类型 说明 最低版本
confirm boolean 为 true 时，表示用户点击了确定按钮
cancel boolean 为 true 时，表示用户点击了取消（用于 android 系统区分点击蒙层关闭还是点击取消按钮关闭）

三.显示操作菜单

wx.showactionsheet({属性名:属性值})

wx.showactionsheet({
  itemlist: ['a', 'b', 'c'],
  success (res) {
    console.log(res.tapindex)
  },
  fail (res) {
    console.log(res.errmsg)
  }
})
属性 类型 默认值 必填 说明
itemlist array. 是 按钮的文字数组，数组长度最大为 6
itemcolor string #000000 否 按钮的文字颜色
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

object res

属性 类型 说明
tapindex number 用户点击的按钮序号，从上到下的顺序，从0开始

注意

  • android 6.7.2 以下版本，点击取消或蒙层时，回调 fail, errmsg 为 "fail cancel"；
  • android 6.7.2 及以上版本 和 ios 点击蒙层不会关闭模态弹窗，所以尽量避免使用「取消」分支中实现业务逻辑

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网