我要评论业务需求：点击预约按钮即可生成二维码凭码入校参观~
一.创建页面
如下是博主自己写的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：
/* pages/youke/youke.wxss */
page{
background-color:#f3ffff;
}
swiper{
margin-top: 50rpx;
width: 100%;
height: 430rpx;
border-radius: 30rpx;
}
swiper-item {
width: 100%;
height: 100%;
border-radius: 50rpx;
}
.mybt{
margin-top: 100rpx;
width:300rpx;
background-color: rgb(41, 113, 248);
color: rgb(255, 255, 255);
}
view{
font-size: 45rpx;
text-align: center;
margin-top: 100rpx;
}
canvas{
width: 230rpx;
height: 230rpx;
margin-top: 100rpx;
margin-left: 260rpx;
}二.下载并配置第三方库
去gitee下载工具包：
二维码工具包
http:// https://gitee.com/weidoctor/weapp-qrcode-canvas-2d
下载zip：
将dist文件夹中的js文件全部复制到utils目录下：
三.完成业务
如下代码必须完整的导入再页面js的最顶部：
import drawqrcode from '../../utils/weapp.qrcode.esm.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: '很抱歉，已无预约名额~',
})
}
}
})点击预约即可成功生成二维码~
到此这篇关于微信小程序实现预约生成二维码的文章就介绍到这了,更多相关小程序预约生成二维码内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论