郑州做网站 熊掌号,烟台网站建设方案书,移动网站用什么建设,wordpress 用户管理插件uniapp二维码生成 参考文档依赖引入代码html部分生成代码#xff08;vue3 hook#xff09;使用 参考文档
【博主#xff1a;ChoneyLove】uniapp中生成二维码及解决微信小程序端问题总结
依赖引入
npm i uqrcodejs代码
html部分
canvas type2d id… uniapp二维码生成 参考文档依赖引入代码html部分生成代码vue3 hook使用 参考文档
【博主ChoneyLove】uniapp中生成二维码及解决微信小程序端问题总结
依赖引入
npm i uqrcodejs代码
html部分
canvas type2d idqrCode canvas-idqrCode stylewidth: 72rpx; height: 72rpx;/canvas生成代码vue3 hook
// 生成二维码
import UQRCode from uqrcodejs;
import { onShow } from dcloudio/uni-app
import { nextTick } from vue;export default function useCreateQRCode(type : number 0, targetName : string qrCode, size : number 72) {// 生成二维码const createQRCode async () {let url ...;console.log(url);let qr new UQRCode();qr.data urlqr.size uni.upx2px(size); // 注意这里大小要跟画布大小一致否则二维码可能超出画布qr.make();const canvasContext uni.createCanvasContext(targetName);qr.canvasContext canvasContext;qr.drawCanvas();}onShow(() {nextTick(() {createQRCode();})})return {}
}使用
templateview!-- ... --canvas type2d idqrCode canvas-idqrCode stylewidth: 72rpx; height: 72rpx;/canvas/view
/templatescript setup langtsimport useCreateQRCode from /hooks/createQRCode;useCreateQRCode();
/script
