您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序预约生成二维码
微信小程序实现预约生成二维码功能 更新时间：2024年04月16日 11:01:52 作者：十三的信徒 通过点击预约按钮即可生成二维码凭码入校参观,下面小编通过实例代码讲解微信小程序实现预约生成二维码功能,感兴趣的朋友跟随小编一起看看吧目录
业务需求
：点击预约按钮即可生成二维码凭码入校参观~
一.创建页面
如下是博主自己写的wxml：
<swiper indicator-dots indicator-color="white" indicator-active-color="blue"
autoplay interval="2000" circular
>
<!-- 这部分是实现轮播图下面的小圆点，可以根据两个不同的属性来分别更改样式 -->
<swiper-item>
<image src="/image/1606976870484.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/image/1606976921531.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/image/1606976936035.png"></image>
</swiper-item>
<swiper-item>
<image src="/image/111.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/image/222.jpg"></image>
</swiper-item>
</swiper>
<button class="mybt" bindtap="yuyue">预约参观？</button>
<canvas type="2d"id="myQrcode"></canvas>
以及wxss：
二.下载并配置第三方库
去Gitee下载工具包：
二维码工具包
http://? https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d
?下载zip：
将dist文件夹中的js文件全部复制到utils目录下：
三.完成业务
如下代码必须完整的导入再页面JS的最顶部：
如下是完整的代码：
// pages/youke/youke.js
import drawQrcode from '../../utils/weapp.qrcode.esm.js'
Page({
data: {
yynum:500,
randomNum:"0"
},
onLoad() {
},
onReady() {
},
onShow() {
},
onHide() {
},
onUnload() {
},
onPullDownRefresh() {
},
onReachBottom() {
},
onShareAppMessage() {
},
yuyue(msg){
// console.log("lll")
if(this.data.yynum>0&&this.data.randomNum=="0")
{
wx.showToast({
icon: 'success',
title: '预约成功~',
})
let y=this.data.yynum;
y--;
this.setData({
yynum:y
})
let r=(Math.random()*1).toFixed(4)*10000
this.setData({
randomNum:r
}),
console.log(r);
const query = wx.createSelectorQuery()
query.select('#myQrcode')
.fields({
node: true,
size: true
})
.exec((res) => {
var canvas = res[0].node
drawQrcode({
canvas: canvas,
canvasId: 'myQrcode',
width: 260,
padding: 30,
background: '#4169E1',
foreground: '#ffffff',
text: '个人二维码信息',
})
wx.canvasToTempFilePath({
canvasId: 'myQrcode',
canvas: canvas,
x: 0,
y: 0,
width: 260,
height: 260,
destWidth: 260,
destHeight: 260,
})
})
}
else if(this.data.randomNum!="0")
{
wx.showToast({
icon: 'error',
title: '禁止重复预约~',
})
}
else{
wx.showToast({
icon: 'error',
title: '很抱歉，已无预约名额~',
})
}
}
})
点击预约即可成功生成二维码~
到此这篇关于微信小程序实现预约生成二维码的文章就介绍到这了,更多相关小程序预约生成二维码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章 javascript将list转换成树状结构的实例
下面小编就为大家带来一篇javascript将list转换成树状结构的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧 使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
在启用Firebug的情况下访问GMail会收到一个 Firebug会让Gmail变慢 的警告，这是如何检测的呢？这里就说说。 javascript Array 数组常用方法
这篇文章主要介绍了javascript Array 数组常用方法 ,需要的朋友可以参考下 微信小程序实现婚礼邀请函全部流程
本文介绍了如何使用微信小程序技术制作个性化的婚礼邀请函,包括页面布局、交互设计和多媒体资源整合,详细阐述了从功能需求到页面设计、测试优化以及发布流程的全面开发步骤,通过本项目,可以提升创意设计和用户体验优化的能力,需要的朋友可以参考下 用JS生成UUID的方法实例
下面小编就为大家带来一篇用JS生成UUID的方法实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 浅析微信扫码登录原理(小结)
这篇文章主要介绍了浅析微信扫码登录原理(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 Javascript实现真实字符串剩余字数提示的实例代码
这篇文章介绍了Javascript实现真实字符串剩余字数提示的实例代码，有需要的朋友可以参考一下 微信小程序开发实用技巧之数据传递和存储
数据传递与存储是我们在日常开发中遇到的再正常不过的一个需求， 这篇文章主要给大家介绍了关于微信小程序开发实用技巧之数据传递和存储的相关资料，需要的朋友可以参考下 javacript replace 正则取字符串中的值并替换【推荐】
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。这篇文章主要介绍了javacript replace 正则取字符串中的值并替换,需要的朋友可以参考下 JS检测图片大小的实例
这篇文章介绍了JS检测图片大小的实例，有需要的朋友可以参考一下最新评论
视频二维码
音频二维码
图片二维码
PDF二维码
Word二维码
Excel二维码
PPT二维码
电话二维码
借还登记二维码
巡逻巡更二维码
扫码领奖品二维码
成绩查询二维码
视频直播二维码
产品二维码
商品二维码
员工二维码
展品二维码
景点二维码
签到登记二维码
报名二维码
企业二维码
客服二维码
手机二维码
设备二维码
巡检二维码
固定资产二维码
微信扫码咨询：用专业为你解决问题 |
为人民服务 
快速注册
| 登录
