uniapp如何实现生成二维码与扫描二维码功能

在移动应用开发中，生成二维码与扫描二维码功能十分常见。Uniapp作为一款强大的跨平台开发框架，为开发者提供了便捷的方式来实现这两个功能。

生成二维码

要在Uniapp中生成二维码，我们可以借助第三方库，比如 qrcode.js。需要在项目中安装该库。在项目根目录下打开命令行，执行 npm install qrcode.js --save 即可完成安装。

安装完成后，在需要生成二维码的页面引入该库。在页面的 script 标签中：

import QRCode from 'qrcode.js';
export default {
    data() {
        return {
            qrCodeContent: 'https://www.example.com' // 二维码要包含的内容
        }
    },
    mounted() {
        this.generateQRCode();
    },
    methods: {
        generateQRCode() {
            new QRCode('qrcode-container', {
                text: this.qrCodeContent,
                width: 128,
                height: 128
            });
        }
    }
}

在页面的 template 标签中，创建一个容器来显示生成的二维码：

<view id="qrcode-container"></view>

这样，在页面加载完成后，就会在指定容器中生成一个包含设定内容的二维码。

扫描二维码

Uniapp提供了原生的 API 来实现二维码扫描功能。在页面的 script 标签中：

export default {
    methods: {
        scanQRCode() {
            uni.scanCode({
                success: (res) => {
                    console.log('扫描结果：', res.result);
                },
                fail: (err) => {
                    console.error('扫描失败：', err);
                }
            });
        }
    }
}

在 template 标签中，添加一个按钮来触发扫描功能：

<view @click="scanQRCode">扫描二维码</view>

当用户点击按钮时，会调用 uni.scanCode 方法，弹出系统的扫描界面。扫描成功后，会在控制台输出扫描结果；若失败，则输出错误信息。

通过上述步骤，我们可以轻松在Uniapp应用中实现生成二维码与扫描二维码的功能，为用户提供更便捷、丰富的交互体验，满足不同业务场景下的需求。无论是用于分享链接、产品溯源还是其他功能，这两个功能都能为应用增色不少。