微信小程序生成二维码
目前是在开发小程序端 --> 微信小程序。然后接到需求:根据 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() {
// h5
try {
// 生成二维码
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()?.proxy
qr.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; /* 字体阴影 */
}
效果:打码了