微信小程序开发学习笔记——4.2showModal和showLoading界面交互操作

>>跟着b站up主“咸虾米_”学习微信小程序开发中,把学习记录存到这方便后续查找。

课程连接:https://www.bilibili.com/video/BV19G4y1K74d?p=27&vd_source=9b149469177ab5fdc47515e14cf3cf74

一、showModal 显示模态对话框

1、属性

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html

2、代码

  clickBtn(){wx.showModal({title:"请输入验证码",//提示的标题// content:"删除之后不可恢复,请谨慎",//提示的内容。editable:true,placeholderText:"请输入...",//输入框底层不可编辑的文字。若用content,还得在输入框中把预设的内容删了。showCancel:true,//是否显示“取消”按钮// cancelColor:"#c00",success:res=>{console.log(res)}})},

success:当 wx.showModal 方法成功执行(例如,用户输入了内容并点击了“确定”按钮),微信小程序的框架会调用这个 success 回调,并传递一个包含交互结果的对象 res。这个对象通常包含以下属性:

  • confirm: 布尔值,表示用户是否点击了“确定”按钮。
  • value: 如果对话框包含输入框,这个属性将包含用户输入的值。
  • cancel: 布尔值,表示用户是否点击了“取消”按钮。

res => { ... }: 这是一个箭头函数的语法。箭头函数是ES6中引入的一种更简洁的函数写法。在这个例子中,res 是传递给这个函数的参数。

console.log(res): 这是箭头函数的主体部分,它调用 console.log 方法来打印 res 对象的内容到控制台。这通常用于调试,以查看 res 对象包含了哪些属性和值。在实际应用中,这样的代码结构通常用于处理异步操作的结果,例如网络请求或数据库查询。

例如:输入aaaaaa,点击确定,控制台会返回一个结果,其中的confirm是true,cancel是false,content为输入框输入的内容,如果点击了取消,则cancel是true。然后我们可以通过获取content来获取用户输入的验证码。

二、showLoading 显示 loading 提示框

!需主动调用 wx.hideLoading 才能关闭提示框!

1、属性

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html

2、代码

api.js中添加以下代码

clickBtn(){wx.showLoading({title: "加载中...",mask:true,//遮罩})setTimeout(()=>{wx.hideLoading()},2000)//设置定时器,两秒后加载中会结束},
  • setTimeout( , ): 这是JavaScript中的一个内置函数,用于在指定的毫秒数后执行一个函数或代码段。
  • () => { wx.hideLoading() }:这是一个箭头函数。当定时器触发时,这个函数会被执行。函数的内容是调用wx.hideLoading()。
  • wx.hideLoading(): hideLoading是微信小程序其中一个API,用于隐藏页面上的加载提示。
  • 2000:这是setTimeout的第二个参数,表示延迟的毫秒数。在这里,它设置为2000毫秒,也就是2秒。

 

三、wx.showActionSheet 显示操作菜单

1、属性

https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showActionSheet.html

2、代码

 api.js的Page中添加以下代码

data: {listArr:['A', 'B', 'C']},clickBtn(){wx.showActionSheet({itemList: this.data.listArr,success: (res)=> {console.log(this.data.listArr[res.tapIndex])},fail: (res)=> {console.log(res.errMsg)}})
},

itemList:这是一个数组,包含了要在操作菜单中显示的选项。在以上代码中,itemList 的值被设置为 this.data.listArr,这意味着操作菜单中的选项将来自 listArr 数组。

success:这是一个回调函数,当操作菜单成功显示并且用户点击了某个选项后,这个回调函数会被调用。它接收一个参数 res,这个对象包含了用户的选择信息。 在以上代码中,success 回调打印了用户选择的选项。

res.tapIndex 是一个数字,表示用户点击的选项在 itemList 中的索引。因此,this.data.listArr[res.tapIndex] 会得到用户点击的那个选项的值,并将其打印到控制台。

fail:这是一个回调函数,当操作菜单显示失败时,这个回调函数会被调用。它同样接收一个参数 res,这个对象包含了错误信息。 在你的代码中,fail 回调打印了错误信息 res.errMsg 到控制台。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/757442.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot+vue的摄影网站(源码+部署说明+系统介绍+数据库)

作者主页:Java程序员老张 主要内容:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】:Java 【框架】:…

SSTI漏洞详解

目录 前备知识 模块引擎: 模块渲染函数: 继承关系: SSTI漏洞简介 SSTI漏洞成因 SSTI漏洞原理 一些常见模块介绍 php Twig模块引擎 代码演示1 Twig模块引擎代码演示2 python flask模块 代码演示1: python jinja模块 代…

深入理解Java并发工具包中的CyclicBarrier

码到三十五 : 个人主页 心中有诗画,指尖舞代码,目光览世界,步履越千山,人间尽值得 ! 在Java的并发编程世界中,协调和管理多个线程的执行是一项复杂而关键的任务。为了简化这一挑战,Java并发包…

数据分析-Pandas序列滑动窗口配置参数

数据分析-Pandas序列滑动窗口配置参数 数据分析和处理中,难免会遇到各种数据,那么数据呈现怎样的规律呢?不管金融数据,风控数据,营销数据等等,莫不如此。如何通过图示展示数据的规律? 数据表&…

初探Springboot 参数校验

文章目录 前言Bean Validation注解 实践出真知异常处理 总结 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 前言 工作中我们经常会遇到验证字段是否必填,或者字段的值是否…

极客早报第3期:罗斯否认插足凯特王妃婚姻;清明放假调休3天;国产伟哥去年销售近13亿

一分钟速览新闻点! 每日简报 罗斯否认插足凯特王妃婚姻清明放假调休3天国产伟哥去年销售近13亿男子持台球杆殴打2名女店员被抓今日春分淀粉肠小王子带货日销售额涨超10倍[高中生被打伤下体休学 邯郸通报](https://www.baidu.com/s?wd高中生被打伤下体休学 邯郸通报…

ARM Cortex-R82处理器在压缩SSD场景的应用

ScaleFlux公司宣布在其下一代企业级SSD控制器产品线中采用Arm公司的Cortex-R82处理器。这一决策旨在应对企业环境中对高带宽存储解决方案日益增长的需求,并通过提升数据传输速度和效率来满足市场期待。 Arm Cortex-R82处理器是Arm公司迄今为止性能最强的实时处理器…

STC 51单片机烧录程序遇到一直检测单片机的问题

准备工作 一,需要一个USB-TTL的下载器 ,并安装好对应的驱动程序 二、对应的下载软件,stc软件需要官方的软件(最好是最新的,个人遇到旧的下载软件出现问题) 几种出现一直检测的原因 下载软件图标&#xf…

Unbuntu20.04 git push和pull相关问题

文章目录 Unbuntu20.04 git push和pull使用1.下载[Git工具包](https://git-scm.com/downloads)2.建立本地仓库3.将本地仓库与github远程仓库关联4.将本地仓库文件上传到github远程仓…

J4G企业通讯ip电话 sip对讲主机 停车场对讲主机

J4G企业通讯ip电话 sip对讲主机 停车场对讲主机 SV-J4G 是一款企业级彩屏网络电话,具有高清语音,320x240 2.8英寸彩屏,支持千兆以太网,12个SIP账号,支持PoE供电,支持外接EHS无线耳机,三方电话会…

Grok-1:参数量最大的开源大语言模型

Grok-1:参数量最大的开源大语言模型 项目简介 由马斯克领衔的大型模型企业 xAI 正式公布了一项重要动作:开源了一个拥有 3140 亿参数的混合专家模型(MoE)「Grok-1」,连同其模型权重和网络架构一并公开。 此举将 Gro…

清华大模型ChatGLM3部署初体验

正文共:1555 字 17 图,预估阅读时间:2 分钟 ChatGLM3是智谱AI和清华大学KEG实验室联合发布的对话预训练模型。该项目在GitHub的工程链接为: https://github.com/THUDM/ChatGLM3 在人工智能领域中,类似“3B”、“6B”、…

C++--STL标准库

一.模板 模板是C中泛型编程的基础。一个模板就是一个创建类或函数的蓝图。 生活中常见的模板有: 编写一个比较两个值大小的函数,如果第一个值大于第二个值返回大于0的数字,两个值相等返回0,第一个值小于第二个值返回小于0的数字。 我们可以根据值类型定义多个函数&…

Go语言实战:深入掌握标准库flag的强大用法

Go语言实战:深入掌握标准库flag的强大用法 引言flag库基础命令行参数的基本概念使用flag库定义和解析命令行参数处理非选项命令行参数小结 高级用法自定义Flag的解析命令行参数的分组和嵌套小结 实战技巧组织复杂命令行应用的参数错误处理和用户帮助信息调试命令行应…

php基于人工智能预警突发疾病系统python-flask-django-nodejs

根据现实需要,此系统我们设计出一下功能,主要有以下功能模板。 前台功能:首页、医生、疾病知识、后台管理。 医生功能:首页、个人中心、咨询信息管理、疾病预警管理、高血压管理、糖尿病管理。 用户功能:首页、个人中心…

数据分析能力模型分析与展示

具体内容: 专业素质 专业素质-01 数据处理 能力定义•能通过各种数据处理工具及数据处理方法,对内外部海量数据进行清洗和运用,提供统一数据标准,为业务分析做好数据支持工作。 L1•掌握一…

SinoDB客户端工具dbaccess

类似Oracle的客户端工具sqlplus,Mysql的客户端工具mysql,SinoDB数据库也有自带的命令行客户端工具dbaccess。 dbaccess 识别用户输入,将用户输入的 SQL 语句打包发送给 SinoDB 数据库服务器执行,然后接收服务器的执行结果&#xf…

Leet code 238 除自身以外的数组的乘积

解题思路 以示例1为例 创建两个数组dp(统计该位置之的所有乘积) bp(统计该位置之后的所有乘积) 比如 1 2 3 4 3的dp应该等于 1*2 bp应该等于 4 这样 dp* bp就为该位置的答案 分别计算出每个位置前后的乘积然后放入数组 然…

3.leetcode---验证回文串(Java版)

链接: https://leetcode.cn/problems/XltzEq/description/ 给定一个字符串 s ,验证 s 是否是 回文串 ,只考虑字母和数字字符,可以忽略字母的大小写。 本题中,将空字符串定义为有效的 回文串 。 示例 1: 输入: s “A man, a plan…

2022年安徽省职业院校技能大赛 (高职组)“云计算”赛项样卷

#需要资源或有问题的,可私博主!!! #需要资源或有问题的,可私博主!!! #需要资源或有问题的,可私博主!!! 第一场次:私有云(5…