uniapp二维码生成
uniapp二维码生成
- 参考文档
- 依赖引入
- 代码
- html部分
- 生成代码（vue3 hook）
- 使用
参考文档
【博主：ChoneyLove】uniapp中生成二维码及解决微信小程序端问题总结
依赖引入
npm i uqrcodejs
代码
html部分
<canvas type="2d" id="qrCode" canvas-id="qrCode" style="width: 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 {}
}
使用
<template><view><!-- ... --><canvas type="2d" id="qrCode" canvas-id="qrCode" style="width: 72rpx; height: 72rpx;"></canvas></view>
</template><script setup lang="ts">import useCreateQRCode from "@/hooks/createQRCode";useCreateQRCode();
</script>