微信小程序与用户交互

一.显示消息提示框

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

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

  1. wx.showToast({
  2. title:"成功", //必填
  3. icon: 'success',//图标只支持"success"、"loading"
  4. image: '/images/tan.png',//自定义图标的本地路径,image 的优先级高于 icon
  5. duration: 2000,//提示的延迟时间,单位毫秒,默认:1500
  6. mask: false,//是否显示透明蒙层,防止触摸穿透,默认:false
  7. success:function(){}, //接口调用成功的回调函数
  8. fail:function(){}, //接口调用失败的回调函数
  9. complete:function(){} //接口调用结束的回调函数(调用成功、失败都会执行)
  10. })

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

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

  1. wx.showLoading({
  2. title: '加载中',
  3. })
  4. setTimeout(function () {
  5. wx.hideLoading()
  6. }, 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({属性名:属性值})

  1. wx.showModal({
  2. title: '提示',
  3. content: '这是一个模态弹窗',
  4. success (res) {
  5. if (res.confirm) {
  6. console.log('用户点击确定')
  7. } else if (res.cancel) {
  8. console.log('用户点击取消')
  9. }
  10. }
  11. })
属性 类型 默认值 必填 说明
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({属性名:属性值})

  1. wx.showActionSheet({
  2. itemList: ['A', 'B', 'C'],
  3. success (res) {
  4. console.log(res.tapIndex)
  5. },
  6. fail (res) {
  7. console.log(res.errMsg)
  8. }
  9. })
属性 类型 默认值 必填 说明
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. Maven生成项目站点

    概述 Maven不仅仅是一个自动化构建工具和一个依赖工具,还能够帮助聚合项目信息.POM可以包含各种项目信息.如项目描述.版本控制系统地址.缺陷跟踪系统地址.许可证信息.开发者信息等. 另Maven社 ...

  2. NOIP2012 D2 T3 疫情控制 洛谷P1084

    题目链接:https://www.luogu.org/problemnew/show/P1084 算法:倍增,二分答案,贪心 + 瞎搞.. 背景:上学长的数论课啥也听不懂,于是前去提高组找安慰.不巧碰 ...

  3. Nacos配置服务原理

    Nacos Client配置机制 spring加载远程配置 在了解NACOS客户端配置之前,我们先看看spring怎么样加载远程配置的.spring 提供了加载远程配置的扩展接口 PropertySo ...

  4. Net基础篇_学习笔记_第十二天_面向对象继承(父类和子类)

    继承 我们可能会在一些类中,写一些重复的成员,我们可以将这些重复的成员,单独的封装到一个类中,作为这些类的父类.Student.Teacher.Driver 子类  派生类Person         ...

  5. 第四周课程总结&试验报告(二)

    实验二 Java简单类与对象 实验目的 掌握类的定义,熟悉属性.构造函数.方法的作用,掌握用类作为类型声明变量和方法返回值: 理解类和对象的区别,掌握构造函数的使用,熟悉通过对象名引用实例的方法和属性 ...

  6. C#基础知识总结(二)--泛型

    什么是泛型 我们在编写程序时,经常遇到两个模块的功能非常相似,只是一个是处理int数据,另一个是处理string数据,或者其他自定义的数据类型,但我们没有办法,只能分别写多个方法处理每个数据类型,因为 ...

  7. Java String 对象,你真的了解了吗?

    String 对象的实现 String对象是 Java 中使用最频繁的对象之一,所以 Java 公司也在不断的对String对象的实现进行优化,以便提升String对象的性能,看下面这张图,一起了解一 ...

  8. Linux常用命令大全(全全全!!!)

    Linux常用命令大全(非常全!!!) 最近都在和Linux打交道,感觉还不错.我觉得Linux相比windows比较麻烦的就是很多东西都要用命令来控制,当然,这也是很多人喜欢linux的原因,比较短 ...

  9. Python基础(十三)

    今日主要内容 闭包 装饰器初识 标准装饰器 一.闭包 (一)什么是闭包 闭包:内层函数调用外层函数的变量就是闭包(不能是全局变量) def func1(): a = 10 def func2(): p ...

  10. java时间格式转换任意格式

    例如:20180918/120023转换成2018-09-18 12:00:23 //时间格式转换 public String getNomalTime(String oldTime){ String ...