首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >微信小程序与用户交互

微信小程序与用户交互

作者头像
小小咸鱼YwY
发布2020-06-19 15:58:08
发布2020-06-19 15:58:08
1.8K0
举报
文章被收录于专栏:python-爬虫python-爬虫

微信小程序与用户交互

一.显示消息提示框

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

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

代码语言:javascript
复制
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 才能关闭提示框

代码语言:javascript
复制
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({属性名:属性值})

代码语言:javascript
复制
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 系统区分点击蒙层关闭还是点击取消按钮关闭)

1.1.0

三.显示操作菜单

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

代码语言:javascript
复制
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 点击蒙层不会关闭模态弹窗,所以尽量避免使用「取消」分支中实现业务逻辑
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-09-26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 微信小程序与用户交互
    • 一.显示消息提示框
      • wx.showToast({属性名:属性值})
      • wx.showLoading({属性名:属性值})
      • wx.hideLoading({属性名:属性值})
    • 二.类似html中confirm
      • wx.showModal({属性名:属性值})
    • 三.显示操作菜单
      • wx.showActionSheet({属性名:属性值})
      • 注意
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档