vue 使用qrcode生成二维码功能

安装插件

npm i --save qrcodejs2

template部分

<template>
    <div class='turnout-wrapper turnin-wrapper'>
        <div class="qrcode-style" id="qrcode"></div>
    </div>
</template>

js部分

如果只需要转换成二维码并展示出来, 可以这么写

import QRCode from "qrcodejs2";
export default {
    data(){
        return {
           address:'',
        }
    },
    mounted(){
       this.address = this.$route.params.address;
       this.qrcode();
    },
    methods: {
        qrcode() {
            let qrcode = new QRCode("qrcode", {
                width: 120, // 设置宽度，单位像素
                height: 120, // 设置高度，单位像素
                text: this.$route.params.address // 设置二维码内容或跳转地址,
            });
        },
    }
}

说明: text存放的是需要转换为二维码的地址,可以是跳转地址, 如 'http://baidu.com' 或者需存放内容, 如"1c6222c248d20d50b302e59aa50aa8560b1794367b"

效果图:

要实现二维码长按保存, 只需要将上面改成下面这样:

import QRCode from "qrcodejs2";
export default {
    data(){
        return {
           address:'',
        }
    },
    mounted(){
       this.address = this.$route.params.address;
       this.qrcode();
    },
    methods: {
        qrcode() {
            let qrcode = new QRCode("qrcode", {
                width: 120, // 设置宽度，单位像素
                height: 120, // 设置高度，单位像素
                // text: this.$route.params.address // 设置二维码内容或跳转地址
            });
            qrcode.makeCode(this.$route.params.address);
        },
    }
}

说明: 上面代码只在ios系统才有效果, 原因是这样生成的是base64格式的image图片.  查资料发现,安卓系统不支持这种, 需要从后台转一遍,拿到url后填充src.

效果图:

 

要实现显示logo功能, 可以在二维码里面添加一张img图片存放logo, 在扫描二维码时,不会受影响.

<template>
    <div class='turnout-wrapper turnin-wrapper'>
        <div class="qrcode-style" id="qrcode">
             <img src='/images/logo.png' />
        </div>
    </div>
</template>

效果图: 

使用 qrcodejs 生成二维码的几个问题

一次 H5 「保存页面为图片」 的踩坑之旅