微信小程序之Promise-Promise初始用

我们来尝试使用Promise。

1、需求,做个抽奖的按钮,

抽奖规则:

30%的几率中奖,中奖会提示恭喜恭喜,奖品为10万 RMB 劳斯莱斯优惠券,没中奖会提示再接再厉。

2、先搭界面:

<view class="title">抽奖规则:</view>
<view class="content">30%的几率中奖,中奖会提示恭喜恭喜,奖品为10万 RMB 劳斯莱斯优惠券,没中奖会提示再接再厉。</view>
<button class="btn" bind:tap="prizeDraw">开始抽奖</button>

3、css文件

page {height: 100vh;display: flex;flex-direction: column;justify-content: center;
}
.btn{margin-top: 50rpx;color: black;border: 1px solid black;
}.title{margin: 10rpx 40rpx;font-size: 50rpx;font-weight: 550;
}.content{margin: 20rpx 80rpx;font-size: 40rpx;
}

3、实现prizeDraw函数。

prizeDraw(){const p = new Promise((resolve,reject) => {setTimeout(() => {let n = Math.floor(Math.random()*100)+1;if (n <= 30) {resolve();} else {reject();}}, 1000);});p.then(() => {wx.showModal({title: '恭喜恭喜',content: '奖品为 10 万 RMB 劳斯莱斯优惠券',showCancel: false, // 隐藏取消按钮confirmText: '我知道了',});},() => {wx.showModal({title: '没抽中',content: '再接再厉',showCancel: false, // 隐藏取消按钮confirmText: '我知道了',});});}

代码说明:

a、const p = new Promise() ; //生成Promise对象。

b、里面有个参数,是函数,写法() => {}

c、函数里面有两个方法,resolve(解决)和reject(拒绝),函数里面的逻辑结果成功就调用resolve,失败就调用reject 。

d、然后运行Promise对象的then函数。

e、then里面带两个函数参数。

f、第一个用来执行成功的后续步骤,比如弹框之类,第二个用来执行失败的后续步骤

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

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

相关文章

spring-boot-starter-data-redis应用详解

一、依赖引入与基础配置 添加依赖 在 pom.xml 中引入 Spring Data Redis 的 Starter 依赖&#xff0c;默认使用 Lettuce 客户端&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis<…

全能邮箱全能邮箱:实现邮件管理的自动化!

全能邮箱全能邮箱&#xff1a;实现邮件管理的自动化&#xff01; 全能邮箱全能邮箱的配置教程&#xff1f;如何注册烽火域名邮箱&#xff1f; 全能邮箱全能邮箱作为一种创新的邮件管理解决方案&#xff0c;正逐渐改变我们处理邮件的方式。蜂邮EDM将围绕全能邮箱全能邮箱&…

Real2Render2Real:无需动力学仿真或机器人硬件即可扩展机器人数据

25年5月来自UC Berkeley 和 TRI 的论文“Real2Render2Real: Scaling Robot Data Without Dynamics Simulation or Robot Hardware”。 扩展机器人学习需要大量且多样化的数据集。然而&#xff0c;现行的数据收集范式——人类遥操作——仍然成本高昂&#xff0c;且受到手动操作…

Cadence学习笔记之---PCB的布线与铺铜

目录 01 | 引 言 02 | 环境描述 03 | 布 线 04 | 铺 铜 05 | 总 结 01 | 引 言 在上一篇文章中介绍了Cadence元件放置和布局相关的操作方法和步骤&#xff0c;当完成全部的器件布局后&#xff0c;就可以进行下一步&#xff1b; 本篇文章主要介绍Cadence中布线和铺铜相关的…

redis-7.4.2 通过 systemd管理,rpmbuild spec文件参考

redis-7 和 redis 5 版本在配置为systemd 方式管理时&#xff0c;配置关于有些许区别&#xff0c;否则会报systemctl status redis 如下错误&#xff1a; redis.service: control process exited, codeexited status1 Failed to start Redis persistent key-value database. Un…

2025-05-26 什么是“AI 全栈”

AI全栈&#xff1a;模型 表示学习 向量库 API UI 一句话定义&#xff1a; ​ AI 全栈开发&#xff0c;是指开发者从原始文本/语音/图像开始&#xff0c;结合大模型能力&#xff0c;构建完整应用闭环的技术能力栈。 AI全栈应用的过程 AI应用 ≠ 一个GPT接口&#xff0c;…

康师傅的“价值战”答卷:一碗面的创新与担当

低价策略、口味雷同、营销跟风……方便面行业曾长期陷于同质化竞争的泥潭&#xff0c;不过近年来&#xff0c;行业竞争逻辑已悄然改变。 一方面来源于宏观环境的变化&#xff0c;想要在缩量市场下保住大盘&#xff0c;一定要保持逆向思维的能力&#xff0c;另一方面&#xff0…

高性能管线式HTTP请求

高性能管线式HTTP请求:原理、实现与实践 目录 高性能管线式HTTP请求:原理、实现与实践 1. HTTP管线化的原理与优势 1.1 HTTP管线化的基本概念 关键特性: 1.2 管线化的优势 1.3 管线化的挑战 2. 高性能管线式HTTP请求的实现方案 2.1 技术选型与工具 2.2 Java实现:…

传输线上的信号速度与阻抗无关,主要由频率决定

阻抗与传播速度无关 通过计算我们可以知道&#xff0c;导体流过电流时&#xff0c;电子实际上的速度只有1cm/s。是很慢的。 导线的电阻对传输线上信号的传播速度几乎没有任何影响。只在一些极端的情况下&#xff0c;互连的电阻才会影响信号的传播速度&#xff0c;并且这个影响…

YOLOv1 详解:单阶段目标检测算法的里程碑

在目标检测领域&#xff0c;YOLO&#xff08;You Only Look Once&#xff09;系列算法凭借其高效性和实用性&#xff0c;成为了行业内的明星算法。其中&#xff0c;YOLOv1 作为 YOLO 系列的开山之作&#xff0c;首次提出了单阶段目标检测的思想&#xff0c;彻底改变了目标检测算…

免费开源 PDF 阅读器 自带虚拟打印机功能 多格式兼容

各位办公小能手们&#xff0c;今天咱来聊聊一款超厉害的PDF工具——PDFLite&#xff01; 这PDFLite啊&#xff0c;那可是轻量级、免费又开源的好东西。它能干啥呢&#xff1f;主要就是能读PDF文件&#xff0c;还能转换文件格式&#xff0c;做基础的文档管理。下面咱就说说它的…

Mac Python 安装依赖出错 error: externally-managed-environment

Mac Python 使用 ip3 install -r requirements.txt 出错 This environment is externally managed ╰─> To install Python packages system-wide, try brew installxyz, where xyz is the package you are trying toinstall.If you wish to install a Python library th…

Windows11+WSL2+Ubuntu22 安装

1.首先要获得管理员权限 2.直接在电脑搜索栏搜索 “Turn Windows features on or off”, 勾选下面两个条目&#xff1a; Virtual Machine Platform 和 Windows Subsystem for Linux 3.重启电脑 4.电脑搜索栏搜索“Windows PowerShell”&#xff0c;运行下面命令设置WSL2为默…

解决 iTerm2 中 nvm 不生效的问题(Mac 环境)

解决 iTerm2 中 nvm 不生效的问题&#xff08;Mac 环境&#xff09; 标题 《为什么 iTerm2 无法使用 nvm&#xff1f;—— 解决 Mac 终端环境变量冲突指南》 问题描述 许多开发者在 Mac 上使用 nvm 管理 Node.js 版本时&#xff0c;发现&#xff1a; 原生终端&#xff1a;n…

React的单向数据绑定

文章目录 单项数据绑定通过onChange方法&#xff0c;实现双向数据绑定 单项数据绑定 在 Vue 中&#xff0c;可以通过 v-model 指令来实现双向数据绑定。但是&#xff0c;在 React 中并没有指令的概念&#xff0c;而且 React 默认不支持 双向数据绑定。 React 只支持&#xff…

AWS関連職種向け:日本語面接QA集

1. 自己紹介&#xff08;じこしょうかい&#xff09; Q&#xff1a;簡単に自己紹介をお願いします。 A&#xff1a; はい、〇〇と申します。これまで約4年間、主にAWSを基盤としたインフラ設計・構築・運用に従事してまいりました。VPCやEC2、RDS、S3などの基本サービスの設計…

AlphaCore GPU 物理仿真引擎内测邀请

AlphaCore 是 MooreThreads 研发的下一代 GPU 物理仿真引擎&#xff0c;为影视特效&#xff0c;游戏交互&#xff0c;数字孪生等领域&#xff0c;提供超高精度的仿真模拟。 申请试用​ 目前我们的Catalyst FX 还处于内部申请测试阶段&#xff0c;请发送邮件至 alphacoremthre…

鸿蒙OSUniApp 实现的日期选择器与时间选择器组件#三方框架 #Uniapp

UniApp 实现的日期选择器与时间选择器组件 在移动应用开发中&#xff0c;日期选择器和时间选择器是表单、预约、日程、打卡等场景中不可或缺的基础组件。一个好用的日期/时间选择器不仅能提升用户体验&#xff0c;还能有效减少输入错误。随着 HarmonyOS&#xff08;鸿蒙&#…

嵌入式开发STM32 -- 江协科技笔记

1.背景介绍及基础认知 8大输入输出 斯密特触发器&#xff1a;高于设定阈值输出高电平&#xff0c;低于设定阈值输出低电平 有关上拉输入、下拉输入、推挽输出、开漏输出、复用开漏输出、复用推挽输出以及浮空输入、模拟输入的区别 1、上拉输入&#xff1a;上拉就是把电位拉高…

RISC-V 开发板 MUSE Pi Pro RTSP 串流 CSI ov5647 摄像头

视频链接&#xff1a;RISC-V 开发板 MUSE Pi Pro RTSP 串流 CSI ov5647 摄像头_哔哩哔哩_bilibili RISC-V 开发板 MUSE Pi Pro RTSP 串流 CSI ov5647 摄像头 RTSP&#xff08;Real-Time Streaming Protocol&#xff0c;实时流传输协议&#xff09; 是一种基于文本的应用层协议&…