iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >微信小程序开发中如何显示消息提示框
  • 321
分享到

微信小程序开发中如何显示消息提示框

2023-06-26 07:06:57 321人浏览 泡泡鱼
摘要

本文将为大家详细介绍“微信小程序开发中如何显示消息提示框”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“微信小程序开发中如何显示消息提示框”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一

本文将为大家详细介绍“微信小程序开发中如何显示消息提示框”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“微信小程序开发中如何显示消息提示框”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。

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

小程序是什么意思

小程序是一种不需要下载安装即可使用的应用,通过扫描二维码或是搜一搜立即使用,操作简单,便于传播,能够实现消息通知、线下扫码、公众号关联等七大功能。它基于微信运行的,类似于APP,想用就用,用完即走,不会占用内存。

感谢您能读到这里,小编希望您对“微信小程序开发中如何显示消息提示框”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注编程网精选频道!

--结束END--

本文标题: 微信小程序开发中如何显示消息提示框

本文链接: https://www.lsjlt.com/news/307865.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序开发中如何显示消息提示框
    本文将为大家详细介绍“微信小程序开发中如何显示消息提示框”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“微信小程序开发中如何显示消息提示框”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一...
    99+
    2023-06-26
  • 小程序开发中如何实现显示消息提示框
    这篇“小程序开发中如何实现显示消息提示框”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“小程序开发中如何实现显示消息提示框”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来...
    99+
    2023-06-26
  • 小程序开发中如何实现显示loading提示框
    这篇“小程序开发中如何实现显示loading提示框”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“小程序开发中如何实现显示loading提示框”,小编整理了以下知识点,请大家跟着小编的步伐一步一...
    99+
    2023-06-26
  • 微信小程序开发中如何使用toast等弹框提示
    这篇文章主要为大家展示了“微信小程序开发中如何使用toast等弹框提示”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序开发中如何使用toast等弹框提示...
    99+
    2024-04-02
  • 如何实现微信小程序中几种常见的弹框提示信息
    这篇文章给大家分享的是有关如何实现微信小程序中几种常见的弹框提示信息的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、模态窗口 delete(){  &nbs...
    99+
    2024-04-02
  • 微信小程序如何显示所在位置的信息
    今天小编给大家分享一下微信小程序如何显示所在位置的信息的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。假设我们指定了多个监控点...
    99+
    2023-06-19
  • 微信小程序的消息框如何实现
    这篇文章主要讲解了“微信小程序的消息框如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序的消息框如何实现”吧!wxml<import src="/dist/to...
    99+
    2023-06-26
  • 微信小程序中如何显示倒计时
    这篇文章主要为大家展示了“微信小程序中如何显示倒计时”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序中如何显示倒计时”这篇文章吧。wxml文件中:&nb...
    99+
    2024-04-02
  • 微信小程序开发框架MINA的示例分析
    这篇文章将为大家详细讲解有关微信小程序开发框架MINA的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。小程序MINA框架,及优点MINA框架:小程序使用的是MIN...
    99+
    2024-04-02
  • 微信小程序开发中如何获取用户信息
    这篇文章主要为大家展示了微信小程序开发中如何获取用户信息,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“微信小程序开发中如何获取用户信息”这篇文章吧。wx.getUserInfo(OBJECT)获取...
    99+
    2023-06-26
  • 微信小程序中如何开发
    这篇文章主要介绍了微信小程序中如何开发,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、序微信小程序,估计大家都不陌生,现在应用场景特别多。...
    99+
    2024-04-02
  • 微信小程序开发中Tabbar的示例分析
    这篇文章将为大家详细讲解有关微信小程序开发中Tabbar的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。微信小程序 Tabbar1.下载微信小程序开发软件;htt...
    99+
    2024-04-02
  • 微信小程序实现弹出框提交信息
    本文实例为大家分享了微信小程序实现弹出框提交信息的具体代码,供大家参考,具体内容如下 <view class="navSm" bindtap="toolNo">     ...
    99+
    2024-04-02
  • 微信小程序使用tabbar时,导航框不显示
    当我们使用微信小程序时,使用了正确的格式去使用导航框,但是没有显示时。 一,解决方法一: 首先查看一下是否把写了自定义了,如: 把“custom”删去或者改成false也可以。 二,解决方法二: 跳转不成功的话,观察路径是否正确,因为有些...
    99+
    2023-09-13
    微信小程序 小程序
  • 如何接入微信小程序消息服务
    这篇“如何接入微信小程序消息服务”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何接入微信小程序消息服务”文章吧。接入概述接...
    99+
    2023-06-26
  • 微信开发之如何群发消息
    这篇文章给大家分享的是有关微信开发之如何群发消息的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。前言:在使用微信的时候,有时我们可能会想要将一条好玩的消息、好看的图片转发给多位好友。那么在不想创建群聊的情况下,如何...
    99+
    2023-06-06
  • 微信小程序如何使用checkbox显示多项选择框功能
    这篇文章主要介绍微信小程序如何使用checkbox显示多项选择框功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:1、效果展示2、关键代码① index.wxml<c...
    99+
    2024-04-02
  • java编写微信小程序消息提醒推送
    微信小程序官方文档:发送订阅消息 | 微信开放文档 一.先制定模板,我以已删除的模板为例 二.java后台创建小程序 Vo类,用于封装传送的参数。 import lombok.Data;@Datapublic class Templat...
    99+
    2023-09-01
    微信小程序 java 小程序
  • 微信小程序云开发的示例分析
    这篇文章主要介绍了微信小程序云开发的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下小程序云开发是微信最近推出的新的一项能...
    99+
    2024-04-02
  • 如何使用微信小程序开发弹出框
    小编给大家分享一下如何使用微信小程序开发弹出框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!view class=&q...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作