微信小程序与用户交互

一.显示消息提示框

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 系统区分点击蒙层关闭还是点击取消按钮关闭) 1.1.0

三.显示操作菜单

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 点击蒙层不会关闭模态弹窗,所以尽量避免使用「取消」分支中实现业务逻辑

微信小程序与用户交互的更多相关文章

  1. 微信小程序学习总结

    微信小程序开发环境安装以及相关设置配置 微信小程序前端页面书写 微信小程序前端样式WXSS书写 微信小程序中事件 微信小程序自定义组件 微信小程序发起请求 微信小程序登入流程 微信小程序路由跳转 微信 ...

  2. 微信小程序开发教程(八)视图层——.wxml详解

    框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.w ...

  3. 干货,看微信小程序后台用户数据如何演变和递增

    这几天发现附近小程序又多了好几家,其中有普通小程序和门店小程序,把它们做一个对比,门店小程序更多的像一张名片,只有基本的企业名称.地址.营业时间.电话和门店照片,和普通小程序相比显得逊色许多.楼下的水 ...

  4. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  5. 微信小程序体验(2):驴妈妈景区门票即买即游

    驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...

  6. 微信小程序(微信应用号)组件讲解

    这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...

  7. 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新

    微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...

  8. 通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...

  9. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

随机推荐

  1. Kubernetes pod 状态

    CrashLoopBackOff: 容器退出,kubelet正在将它重启 InvalidImageName: 无法解析镜像名称 ImageInspectError: 无法校验镜像 ErrImageNe ...

  2. JAVA MAP转实体

    public static <T> T map2Object(Map<String, Object> map, Class<T> clazz) { SimpleDa ...

  3. FreeSql (二十)多表查询 WhereCascade

    WhereCascade 多表查询时非常方便,有了它可以很轻松的完成类型软删除,租户条件的功能. IFreeSql fsql = new FreeSql.FreeSqlBuilder() .UseCo ...

  4. ActiveMQ的安装与使用。

    1.什么是ActiveMQ ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE .4规范的 JMS Provider实现,尽 ...

  5. Linux环境基于CentOS7 搭建部署Docker容器

    1.Docker容器概述 区分Docker容器技术和VM虚拟机技术: evernotecid://394EFE90-9CE0-4D65-A8CD-DFEC0DC8061E/appyinxiangcom ...

  6. 疑难杂症----windows7

    这两天换了台win7的机器,每次开机发现时间日期没法更新,第一次手动更新后过了一天以后又恢复成20xx/01/01,头疼ing,网上找了好多办法,在这里记录一下,避免以后再碰到同样的问题. 出现这个问 ...

  7. Day 16 软件管理

    1.RPM基本概述 1.什么是rpm? RPM全称 RPM Package Manager 缩写,由红帽开发用于软件包的安装升级卸载与查询 2.如何获取rpm包 在我们刚开始学习rpm包,建议先使用本 ...

  8. [VB.NET Tips]Try...Catch...End Try的另一种用法

    有时在调用一个方法时,会进行异常处理.但是当方法内部出现错误时,无法快速定位到是哪一行代码有问题. 下面介绍一下Try的另一个用法: Try...Catch ex As Exception When ...

  9. 初学Spring的感觉

    1.使用接口 不同的类实现同一接口后都会变成同一类型的类.   spring作业1的思路 lab1: 建立一个有一个输出方法的接口类|并建一个英语类和一个数学类实现该接口.   这两个实现类都重写了那 ...

  10. numpy库使用总结

    numpy study 0x01:n维数组对象ndaarray 存放同类型元素的多维数组 0x02:numpy数据类型 numpy 的数值类型实际上是 dtype 对象的实例,并对应唯一的字符,包括 ...