uni-app二维码生成

此解决方案是总结自 uQRCode 全端二维码生成插件 支持nvue 支持nodejs服务端 - DCloud 插件市场 中原生适配uni-app方案

1.安装uqrcodejs依赖

npm install uqrcodejs

2.用法

这里给出demo示例供大家使用

<template>
    <view class="qrcode_box">
            <!-- 二维码展示 --> 
            <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px"></canvas>
    </view>
</template>
​
<script>
    // 引入uqrcodejs依赖
    import UQRCode from 'uqrcodejs';
    export default {
        data() {
            return {
            }
        },
        onShow() {
            ToQrCode()
        },
        methods: {
            // 转为二维码
            ToQrCode() {
                // 获取uQRCode实例
                var qr = new UQRCode();
                // <设置二维码内容>
                qr.data = 'https://ext.dcloud.net.cn/plugin?id=1287';
                // 设置二维码大小，必须与canvas设置的宽高一致!!!
                qr.size = 200;
                // 调用制作二维码方法
                qr.make();
                // 获取canvas上下文
                var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
                // 设置uQRCode实例的canvas上下文
                qr.canvasContext = canvasContext;
                // 调用绘制方法将二维码图案绘制到canvas上
                qr.drawCanvas();
            },
        }
    }
</script>

使用出现问题欢迎大家在评论区评论，共同讨论