当前位置：首页 > news >正文

微信小程序生成二维码

news 2025/7/3 16:25:44

目前是在开发小程序端 --> 微信小程序。然后接到需求：根据 form 表单填写内容生成二维码（第一版：表单目前需要客户进行自己输入，然后点击生成按钮实时生成二维码，不需要向后端请求，不存如数据库）。然后找了许多大神的笔记，可能是自己第一次开发小程序端，所以一直都不成功。最后找到了下面的一种方法。仅供参考。

首先需要打开终端，然后进行安装 qrcode.js 。

// 安装
// h5
npm install qrcode
// 小程序
npm install uqrcodejs
-----------------------
// 若是安装不成，可以先查看一下镜像路径
npm config get registry
// 然后换成淘宝镜像
npm config set registry https://registry.npmmirror.com/
// 然后再安装

安装完成后页面进行导入

// h5
import QRCode from 'qrcode';
// 小程序
import UQRCode from 'uqrcodejs';

我选择的是点击生成按钮，然后用 popup 弹出框，在弹出框中让最后生成的二维码赋值给 <image :src="qrCodeImage"> 标签。

<view class="generate-code"><button @click="generateCode" type="primary" class="agree-btn">生成二维码</button><u-popup v-model="show" mode="center" width="80%" height="60%" border-radius="14"><view class="content"><view class="item-content"><view class="item-content-title">{{ marketUnit }}</view><view class="item-content-title">批次号：</view><!-- 这里需要注意：image 标签的是 h5 的生成方式，但是不能用于小程序端。想要生成小程序端，需要使用 canvas 标签来接收 --><!-- h5 --><image :src="qrCodeImage" class="item-content-title item-content-title-image"></image><!-- 小程序 --><canvas id="qrcode" canvas-id="qrcode" class="item-content-title item-content-title-image"/></view><button @click="saveOrShare" class="item-content-button">长按保存或分享	</button></view></u-popup><button @click="showQRCodeRecord" style=" background-color: #f0f2f6; color: #55aaff; font-size: 28rpx;text-align: center; padding-top: 10px; width: 50%; height: 76rpx;" >二维码生成记录</button>
</view>

data(){return{show: false,marketUnit: '',qrCodeImage: '',}
},
methods:{generateCode() {// 打开弹框this.show = true;this.createCode(); },async createCode() {// h5try {// 生成二维码const paramsString = JSON.stringify(this.dataForm)this.qrCodeImage = await QRCode.toDataURL(paramsString);} catch (error) {console.error('生成二维码失败:', error);}// 小程序const qr = new UQRCode();qr.data = JSON.stringify(this.dataForm);qr.size = 200;qr.make();const ctx = uni.createCanvasContext('qrcode', this); // 组件内调用需传this，vue3 中 this 为 getCurrentInstance()?.proxyqr.canvasContext = ctx;qr.drawCanvas();this.loading = false;this.marketUnit = "营销单位：";},saveOrShare() {// 长按保存或分享},
}

.generate-code {height: 100px;margin-top: 20%;
}
.agree-btn {color: #fff; border-color:#000; border-radius: 50rpx;width: 90%; height: 76rpx; font-size: 28rpx;
}
.content {background-color: #fffdb7;height: 100%;display: flex;flex-direction: column; /* 子元素垂直排列 */justify-content: center;align-items: center;
}
.item-content {background-color: #fff;width: 80%;height: 70%;
}
.item-content-title {margin-top: 7px; margin-left: 20px;
}
.item-content-title-image {margin-top: 10px;margin-left: 20px;width: 200px; height: 200px;
}
.item-content-button {width: 80%;height: 10%;background-color: #fff;color: #bc7a00;text-align: center;margin-top: 20px;font-size: 16px;/* text-shadow: 0.5px 0.5px 0.5px #000000; /* 字体阴影 */ 
}