uniapp微信小程序链接转换二维码功能

394 阅读1分钟

使用uniapp写的微信小程序的项目有了新的需求,扫码支付功能。

后端给付款链接转换成二维码给客户扫描付款。

我使用了qrcode-generator组件来实现这个功能

npm install qrcode-generator
<script setup>
//引入
import QRCode from "qrcode-generator";

let qrCodeData = ref(null);
const payFu = () => {
    const qr = QRCode(0, "L");
    let url = 'weixin://wxpay/xxxxxxxxx' //后端传来的付款链接
    qr.addData(url);
    qr.make();
    const imageData = qr.createDataURL(6, 0); // 调整二维码尺寸
    qrCodeData.value = imageData;
}
</script>
<template>
    <button @click="payFu">生成</button>
    //展示二维码
    <img :src="qrCodeData" alt="QR Code"/>
</template>