微信小程序电子门票生成与核验系统架构研究——基于微信小程序的演出赛事电子票务系统设计与实现

已于 2025-03-13 23:58:26 修改
阅读量1.1k 收藏 9
点赞数 42
文章标签： 微信小程序 小程序 javascript
于 2025-03-13 22:38:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lnvb596914531/article/details/146242768
版权

撰文缘由

首先聊下我做这个功能的契机吧，博主本人是大二学生，然后同学是学校动漫社负责人，他在校外负责过一些大型漫展的各部门的工作，同时也独立组织过一些类似的活动，于是就意图在学校举办一场二次元展会。因为所在的校区偏文，所以技术含量几乎为零，于是找到了我这个半桶水去做一个检票系统。

(活动详情的图片（极狐那张）是网上找的，如有侵权马上d我，这边立马删掉哈)

背景介绍

为什么用小程序来做？

整个开发周期只有不到一个月，博主此前只有网站的开发经验，所以一开始想要做网站来实现（至少算是舒适区），但是因为成本太高而且对于目前移动端普及率极高的环境不太友好就放弃了。后来想过该做app，但是又担心兼容问题，于是最后选择了小程序。

小程序优点有哪些？

小程序的优点就在于轻便（宿主环境是微信，不用考虑是安卓还是苹果的兼容问题，而且不需要下载，有微信就能打开）以及安全（数据通过微信的服务器进行传输，不要另外考虑ssl证书之类的问题）以及低成本（包括时间成本和经济成本，任何具有前端工作经验的人员都可以较为轻易地上手小程序的开发，无论是原生js开发还是通过uniapp用vue来实现，还有就是确实便宜啊，除去给企鹅交的三十块保护费，还有腾讯云cos的存储费用，基本没啥开销了（云开发环境有新手免费试用一个月））

一点碎碎念（如果着急可以直接导航到“实现原理”）

说干就干，于是博主一人成团，整个项目从ui开发测试运维都是我一人实现，其中最为困扰的一个是UI（这是可以说是码农一生之敌了），另一个就是这个核心功能了：用户在平台报名了活动之后要生成对应的电子门票（存储用户的个人信息，同时也需要进行加密），并且在活动当天工作人员也能够去核销每名到场者的电子门票。UI我真没法子腆着脸分享经验，因为确实最后也是最弱一环（难绷），但是这个电子门票的功能我觉得还是值得写篇博客来分享一下的。

实现原理

简要描述

首先因为博主开的是个体小程序（30元版本），所以像常用的手机号验证(wx.getphonenumber)之类的很多接口都调用不了，于是我这里用户信息都要纯靠用户自主输入（当然前提是你要获取用户对于隐私信息被获取的同意），如果你担心手机号不对可以加个短信验证功能，每条短信五到六分钱，保守评估参展人数会达到三百人，如果我这里启用这个功能又要多花几百块了（我不信现在有谁能够牢牢记住密码不用手机号验证登录的），所以最终也弃用了（颇有创业者囊中羞涩的窘迫感）。获取了用户输入的个人信息（如图中的CN(cosername),手机号,电子邮箱）后，我们需要存储这些个人信息，同时也需要对这些信息进行加密，于是我选择了常用的AES算法来加密，然后将加密后的内容存储到云数据库中并用Qrcode库来生成二维码，告知用户这是电子门票，也是活动当天的入场凭证，成功报名之后，用户随时可以上来小程序通过手机号进行查询获取。工作人员这边登录管理员账号之后就可以使用核销功能，这里将调用手机摄像头识别二维码，并将获取内容解密，打印在工作人员设备的屏幕上，同时在数据库中搜索对应的记录，然后给remove掉，这样就成功核销了。

具体代码

获取用户同意
    handleAgreePrivacyAuthorization() {
      wx.authorizePrivacyContract({
        success: () => {
          getApp().globalData.hasAgreedPrivacy = true;
          this.setData({ showPrivacyPopup: false });
        },
        fail: () => {
          wx.showToast({ title: '请同意隐私协议', icon: 'none' });
        }
      });
  }

收集用户信息

首先很常规的要做个表单啦，我把wxml也放上来吧（其实就是html，就是有一丢丢略微不同而已）

<view class="back" bind:tap="back" style="top: {{top}};">
    <image src="/images/返回.png" style="height: {{height}}; width: {{height}}; padding-left: 1vh;"></image>
</view>

<view class="container {{theme}}">
    <view class="title">报名表</view>
    <form bindsubmit="formSubmit" bindreset="resetForm">
        <view class="form-group">
            <text class="label">CN</text>
            <input 
                class="input" 
                name="name" 
                type="text" 
                placeholder="请填写您的CN~" 
                placeholder-style="color: #999"
            />
        </view>

        <view class="form-group">
            <text class="label">手机号</text>
            <input 
                class="input" 
                name="phone" 
                type="text" 
                placeholder="请填写您的手机号码~" 
                placeholder-style="color: #999"
            />
        </view>

        <view class="form-group">
            <text class="label">电子邮箱</text>
            <input 
                class="input" 
                name="email" 
                type="email" 
                placeholder="请填写您的电子邮箱~" 
                placeholder-style="color: #999"
            />
        </view>

        <button class="submit-btn" form-type="submit">提交报名</button>
        <checkbox-group bindchange="handleAgreementChange">
            <checkbox class="agreement" checked="{{isAgreed}}"></checkbox>
            <text>勾选即为同意</text>
            <navigator url="/pages/agreement/agreement" class="agreement-link">《隐私保护声明》</navigator>
        </checkbox-group>
    </form>

    <view class="tips">Notice：请检查填写内容是否有误，报名成功后您可以进入“我的门票”进行票务查询~</view>

    <view class="qrcode" wx:if="{{showcode}}">
        <canvas canvas-id="myQrcode" style="width: 200px; height: 200px;"></canvas>
        <text>请注意查收您的电子门票！(建议截图保存)</text>
    </view>
</view>

<!-- 隐私弹窗 -->
<view class="privacy-popup" wx:if="{{showPrivacy}}">
    <view class="privacy-content">
        <view>隐私弹窗内容....</view>
        <button bindtap="handleOpenPrivacyContract">查看隐私协议</button>
        <button id="agree-btn" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
    </view>
</view>

然后是js部分：

  formSubmit: function(e) {
    const name = e.detail.value.name.trim();
    const phone = e.detail.value.phone.trim();
    const email = e.detail.value.email.trim();

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    const phoneRegex = /^\d{11}$/;

    // 校验 CN
    if (!name) {
      wx.showToast({ title: 'CN 不能为空', icon: 'none', duration: 2000 });
      return;
    }

    // 校验手机号
    if (!phoneRegex.test(phone)) {
      wx.showToast({ title: '手机号必须是11位数字', icon: 'none', duration: 2000 });
      return;
    }

    // 校验邮箱
    if (!emailRegex.test(email)) {
      wx.showToast({ title: '请输入正确的邮箱格式', icon: 'none', duration: 2000 });
      return;
    }

    // 验证同意协议
    if (!this.data.isAgreed) {
      wx.showToast({ title: '请先同意隐私协议', icon: 'none', duration: 2000 });
      return;
    }}

  // 成功提示
  showSuccess() {
    wx.showToast({
      title: '提交成功！',
      icon: 'success',
      duration: 2000,
    });
  },

  resetForm() {
    this.setData({
      isAgreed: false,
      name: "",
      phone: "",
      email: ""
    });
  }
用户信息加密

然后我们就要用到一个库crypto（CSDN站内就有教学，大伙可以自行查询，我这就不赘述了），通过AES算法对称加密用户的个人信息

const CryptoJS = require('../../utils/crypto-js.js');

const AES_KEY = '12345678'.padEnd(16, '0');  // 密钥（16/24/32 字符长度），如果你想不到16位数字那么多可以用padEnd方法在后边加0补齐
const AES_IV = '87654321'.padEnd(16, '0');  // 偏移量（16字符）


  // AES 加密
  encryptData: function(data) {
    const ciphertext = CryptoJS.AES.encrypt(data, CryptoJS.enc.Utf8.parse(AES_KEY), {
      iv: CryptoJS.enc.Utf8.parse(AES_IV),
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7
    }).toString();
    return ciphertext;
  }

    this.setData({ 
        name, 
        phone, 
        email, 
        encryptedData
      });//将用户信息存进data
将加密内容生成为二维码并存储到数据库中
   //生成二维码
    QRCode({
      width: 200,
      height: 200,
      canvasId: 'myQrcode',
      text: encryptedData
    });

    const encrypteddata = this.data.encryptedData;
    this.saveQRCode(encrypteddata)

// 保存二维码内容到数据库
  saveQRCode: function(encrypteddata) {
    wx.showLoading({ title: '提交中...', mask: true });

    const db = wx.cloud.database();
    const that = this
    db.collection('registrations').add({
      data: {
        name: this.data.name,
        phone: this.data.phone,
        email: this.data.email,
        agreed: this.data.isAgreed,
        qrcodecontent: encrypteddata, // 保存加密后内容
        createdAt: new Date()
      },
      success: (res) => {
        wx.hideLoading();
        this.showSuccess();
        this.resetForm();
        that.setData({showcode:true})
      },
      fail: (err) => {
        wx.hideLoading();
        wx.showToast({ title: '提交失败，请稍后再试！', icon: 'none' });
        console.error('提交失败:', err);
      }
    });
  }
用户查询电子门票
// AES 解密
  decryptData: function(ciphertext) {
    try {
      const bytes = CryptoJS.AES.decrypt(ciphertext, CryptoJS.enc.Utf8.parse(AES_KEY), {
        iv: CryptoJS.enc.Utf8.parse(AES_IV),
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      });
      return bytes.toString(CryptoJS.enc.Utf8);
    } catch (error) {
      console.error('解密失败:', error);
      return '解密失败';
    }
  },

  // 输入手机号
  handlePhoneInput(e) {
    this.setData({ phone: e.detail.value });
  },

  // 查询二维码内容
  searchQRCode() {
    const { phone } = this.data;
    const phoneRegex = /^\d{11}$/;

    if (!phoneRegex.test(phone)) {
      wx.showToast({ title: '请输入正确的手机号', icon: 'none', duration: 2000 });
      return;
    }

    wx.showLoading({ title: '查询中...', mask: true });

    const db = wx.cloud.database();
    db.collection('registrations')
      .where({ phone })
      .get({
        success: (res) => {
          wx.hideLoading();
          if (res.data.length === 0) {
            wx.showToast({ title: '未找到匹配记录', icon: 'none', duration: 2000 });
            return;
          }

          const record = res.data[0];
          const decryptedContent = this.decryptData(record.qrcodecontent);
          const shortcontent = decryptedContent.substring(0,5)+'**'
    
          this.setData({
            qrcodeContent: record.qrcodecontent,
            decryptedContent,
            shortcontent,
            showResult: true
          });

          // 生成二维码
          QRCode({
            width: 200,
            height: 200,
            canvasId: 'resultQrcode',
            text: record.qrcodecontent
          });
        },
        fail: (err) => {
          wx.hideLoading();
          wx.showToast({ title: '查询失败，请稍后再试', icon: 'none' });
          console.error('查询失败:', err);
        }
      });
  }

工作人员核销电子门票
const app = getApp();
const CryptoJS = require('../../utils/crypto-js.js');

const AES_KEY = '12345678'.padEnd(16, '0');
const AES_IV = '87654321'.padEnd(16, '0');

Page({
    data: {
        content: '',
        decryptedContent: '',
        isButtonDisabled: true,
    },

    onLoad() {
        wx.clearStorageSync();
        this.checkLoginStatus();
    },

    onShow() {
        this.checkLoginStatus();
    },

    checkLoginStatus() {
        const isLoggedIn = app.globalData.isLoggedIn;
        this.setData({ isButtonDisabled: !isLoggedIn });
    },

    scanQRCode() {
        if (this.data.isButtonDisabled) {
            wx.showToast({ title: '请先登录', icon: 'none' });
            return;
        }

        const that = this;
        wx.scanCode({
            success(res) {
                console.log('扫描结果(未解密)：', res.result);
                const decryptedData = that.decryptData(res.result);

                if (decryptedData) {
                    that.setData({ decryptedContent: decryptedData, content: decryptedData });
                    console.log('扫描结果(已解密)：', decryptedData);

                    const phoneMatch = decryptedData.match(/手机号码：(\d{11})/);
                    if (phoneMatch) {
                        const phone = phoneMatch[1].trim();
                        that.verifyAndDelete(phone);
                    } else {
                        wx.showToast({ title: '未找到有效手机号', icon: 'none' });
                    }
                } else {
                    wx.showToast({ title: '解密失败，请检查二维码', icon: 'none' });
                }
            },
            fail(error) {
                wx.showToast({ title: '扫描失败，请重试', icon: 'none' });
                console.error('扫描失败:', error);
            }
        });
    },

    decryptData(ciphertext) {
        try {
            const bytes = CryptoJS.AES.decrypt(ciphertext, CryptoJS.enc.Utf8.parse(AES_KEY), {
                iv: CryptoJS.enc.Utf8.parse(AES_IV),
                mode: CryptoJS.mode.CBC,
                padding: CryptoJS.pad.Pkcs7
            });
            return bytes.toString(CryptoJS.enc.Utf8).trim();
        } catch (error) {
            console.error('解密失败:', error);
            return '';
        }
    },

    verifyAndDelete(phone) {
        const db = wx.cloud.database();
        const that = this;

        wx.showLoading({ title: '核销中...', mask: true });
        db.collection('registrations').where({ phone: String(phone) }).get({
            success(res) {
                if (res.data.length > 0) {
                    db.collection('registrations').where({ phone: String(phone) }).remove({
                        success: (removeRes) => {
                            wx.hideLoading();
                            wx.showToast({ title: '核销成功！', icon: 'success', duration: 2000 });
                        },
                        fail: (removeErr) => {
                            wx.hideLoading();
                            wx.showToast({ title: '核销失败，请重试', icon: 'none' });
                            console.error('删除失败:', removeErr);
                        }
                    });
                } else {
                    wx.hideLoading();
                    wx.showToast({ title: '未找到匹配记录', icon: 'none' });
                }
            },
            fail(err) {
                wx.hideLoading();
                wx.showToast({ title: '查询失败，请检查网络', icon: 'none' });
                console.error('查询失败:', err);
            }
        });
    },

    back() {
        wx.navigateBack({ delta: 1 });
    }
});

结言

由于博主第一次写技术文章，所以肯定会有诸多不足，还恳请诸位大佬勘误指教，如果是小白萌新的同学有什么问题也可以留言，博主如果看到第一时间会进行答复，那大概就说这么多吧（我好啰嗦）......

微信在线订票小程序源码开发功能说明
软件事业部的博客
08-17 1940
在我们的日常生活中，为了满足人们的出行，各行各业都做了微信小程序开发，旅游业为了更好的服务客户，让客户有更好的体验，也推出了相应的微信在线订票小程序。
微信购票小程序+后台管理系统.zip
08-10
基于微信小程序开发的web系统，适合做毕业设计，课程设计作业，java，springboot等技术，源码完整，配置后可直接运行。 基于微信小程序开发的web系统，适合做毕业设计，课程设计作业，java，springboot等技术，源码完整，配置后可直接运行。 基于微信小程序开发的web系统，适合做毕业设计，课程设计作业，java，springboot等技术，源码完整，配置后可直接运行。 基于微信小程序开发的web系统，适合做毕业设计，课程设计作业，java，springboot等技术，源码完整，配置后可直接运行。
票务系统后台操作指南和功能介绍
08-12 828
登录系统打开后台网址，输入用户名密码登录，默认用户名admin 密码000000-票务系统登录页面后台首页首页上部分提供各个常用功能的快捷入库，以及当日关键数据指标，更多的详细报表可以在报表明细中查看。票务系统首页。
影院线上便捷购票H5页面用户预订，票商端直发，后台控制平台开发
chend8966的博客
08-31 116
总之，线上电影售票软件平台开发需要经过多个步骤，包括需求分析、UI设计、功能开发、接口对接、测试与调试、上线与部署、营销推广、数据分析与优化、维护与更新等。在开发过程中，需要充分了解用户需求和市场情况，不断优化和改进软件，提高软件的竞争力和用户体验。同时，需要根据用户需求和市场变化，不断更新软件的功能和界面，提高软件的竞争力和用户体验。在需求分析阶段，开发团队需要与用户进行充分的沟通，了解用户的痛点和使用场景，从而确定软件的开发方向。在开发过程中，需要使用合适的技术和开发框架，确保软件的质量和性能。
景区旅游业小程序景区购票验票微信小程序含前端提供定制开发
gapjun0722的博客
05-20 380
景区旅业小程序是一款专门用于各大景区的小程序模块。该小程序全面支持闸机、手持扫码器等多种外部扫码验票设备，用户只需在微信端购票，即可在通过闸机或扫码设备时出示二维码，轻松完成验票。请注意：闸机需要支持二维码和HTTP接口，并需要额外单独出对接费用500元；手机和扫码枪则不需要对接，可直接使用。该小程序具有商城、限时抢购、拼图、三级分销、地图导航、景点介绍、景区攻略、线路推荐、多设备验票、自定义规格、游客分享等功能。
小程序售票--购票后生成二维码
weixin_33743661的博客
11-07 1064
先到 https://github.com/davidshimjs/qrcodejs 下载一个 weapp-qrcode.js 然后放在utils文件夹下 在要生成二维码的页面js最上面导入该js var QRCode = require('../../utils/weapp-qrcode.js') var qrcode; js代码： qrcode = ...
基于微信小程序的电影院票务系统.rar
12-07
本项目“基于微信小程序的电影院票务系统”便是以此为背景，运用当前流行的开发技术，实现了一个功能完备、操作简便的在线票务系统。 系统采用Java语言作为后端开发语言，结合Spring Boot框架，利用其快速构建企业...
微信小程序反编译技术揭秘与应用
微信小程序是基于微信平台的应用，它采用轻量级设计，用户无需下载安装即可使用，大大释放了手机内存压力。小程序覆盖了购物支付、信息查询、休闲娱乐、生活服务等多个领域，能够满足用户的多元化需求。 1. 微信小...
淘票票微信小程序完整源码下载
开发者需要考虑用户界面的友好性、搜索算法的效率、电影数据库的管理和更新、在线支付接口的集成、电子票务的生成与核验等关键环节。 3. 前端技术栈 在前端开发中，淘票票微信小程序源码可能涉及的技术包括但不限于...
微信小程序票务购买所用代码的逻辑关系
05-13
微信小程序票务购买所用代码的逻辑关系大致如下： 1. 用户通过小程序进入票务购买页面，选择所需的门票类型和...以上是微信小程序票务购买的基本逻辑关系，具体实现可能会根据不同的业务需求和系统架构而有所不同。
景区小程序可实现的购票场景
weixin_48744821的博客
03-20 236
景区小程序需要实现哪些购票场景
演出剧院门票售票预约小程序开发制作功能介绍
hanlin1888的博客
05-03 1805
基于微信小程序的票务+预约小程序，广泛适用于演出主办方、剧院、艺术中心、活动中心售票、景区门票售票、儿童游乐园售票、会务签到、展会售票签到、教育培训报名预约、健身预约功能。可以设置渠道分销，为指定分销人员制定演出的分销任务，获取返点，返点可以自动返点结算到微信的钱包。演出票、儿童乐园票、电影票、景区票、酒吧演出、演唱会、展会、培训招生等。1.支持多种积分，每种积分有自己的积分规则及适用演出，可以根据消费金额积分、参加活动积分、签到积分等等。可以通过小程序分销，也可以通过小程序建立会员系统，售卖会员卡等。
景区分时实名预约系统
kalvin_y_liu的博客
10-24 1688
景区分时实名预约系统一、建设内容实施风景区分时实名预约项目关系景区整个运营系统、信息系统的升级和重构。重点打造两个平台，即：统一的预约业务平台、统一的预约监管平台。管理端实现门票库存的总量调控、全山业务的指挥调度、票务系统门车索业务在同一系统的售检退改换管理，游客端实现三票预订-门票核查-车票检票-门票检票-索道票全过程的有效管理。（一）电商预约平台智慧旅游电商平台为游客提供一站式综合服务应用，包含信息咨询、游客预订、信息发布等服务，并通过C端、B端、OTA、全员营销等方式实现对游客的前置化、线上化服务。预
科技展馆票务预约定制开发
qq_35604572的博客
10-26 133
景区场馆自助售检票方案，智慧场馆电子票务系统，展览馆小程序预约门票系统定制。
智能旅游电子票务小程序毕业设计源码
07-23 338
通过采用先进的技术手段,如大数据分析和人工智能技术,提高系统的响应速度和处理能力,为用户提供更高效的体验。智能旅游电子票务小程序的研究内容主要包括以下几个方面：1. 智能旅游电子票务小程序的设计和实现：研究人员通过调查用户需求和偏好,来设计更加符合用户习惯的界面,使得用户能够更轻松地完成旅游票务购买和检票等操作。智能旅游电子票务小程序的预期目标是提高旅游行业的效率和用户体验,通过利用大数据技术和人工智能技术,实现旅游票务的智能化和自动化,使得用户能够更轻松地完成旅游票务购买和检票等操作,提高用户满意度。
演出行业票务系统都有哪些功能？已支持小红书小程序
Liyun2024的博客
09-04 1082
演出行业票务系统解决方案，支持麦座同步、微信/抖音/快手小程序同步售票。
景区住宿门票小程序开发解决方案
weixin_48744821的博客
09-13 246
景区小程序开发解决方案
霸王茶姬微信小程序自动化签到系统完整实现&解析
最新发布
AALoveTouch的博客
05-09 2298
霸王茶姬签到脚本
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值