建设银行网站进不去,国内最好的危机公关公司,佛山城市建设工程有限公司,网站建设备案不通过目前是在开发小程序端 -- 微信小程序。然后接到需求#xff1a;根据 form 表单填写内容生成二维码#xff08;第一版#xff1a;表单目前需要客户进行自己输入#xff0c;然后点击生成按钮实时生成二维码#xff0c;不需要向后端请求#xff0c;不存如数据库#xf…目前是在开发小程序端 -- 微信小程序。然后接到需求根据 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 :srcqrCodeImage 标签。
view classgenerate-codebutton clickgenerateCode typeprimary classagree-btn生成二维码/buttonu-popup v-modelshow modecenter width80% height60% border-radius14view classcontentview classitem-contentview classitem-content-title{{ marketUnit }}/viewview classitem-content-title批次号/view!-- 这里需要注意image 标签的是 h5 的生成方式但是不能用于小程序端。想要生成小程序端需要使用 canvas 标签来接收 --!-- h5 --image :srcqrCodeImage classitem-content-title item-content-title-image/image!-- 小程序 --canvas idqrcode canvas-idqrcode classitem-content-title item-content-title-image//viewbutton clicksaveOrShare classitem-content-button长按保存或分享 /button/view/u-popupbutton clickshowQRCodeRecord style background-color: #f0f2f6; color: #55aaff; font-size: 28rpx;text-align: center; padding-top: 10px; width: 50%; height: 76rpx; 二维码生成记录/button
/viewdata(){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); // 组件内调用需传thisvue3 中 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; /* 字体阴影 */
}效果打码了
