微信小程序实现预约生成二维码功能

二维码技术

您的位置：首页 → 网络编程 → 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二维码电话二维码借还登记二维码巡逻巡更二维码扫码领奖品二维码成绩查询二维码视频直播二维码产品二维码商品二维码员工二维码展品二维码景点二维码签到登记二维码报名二维码企业二维码客服二维码手机二维码设备二维码巡检二维码固定资产二维码

微信扫码咨询：用专业为你解决问题