根据url生成二维码，扫描打开url的两种方法编辑器

js 根据url生成二维码，扫描打开url的两种方法

场景

产品给你一个url，让你做一个二维码，扫描二维码之后打开对应的url链接。
比如：扫描之后弹出一个下载app的页面。

实现

先上html代码：

<div class="qrcode-wrapper">
        <img src="../static/assets/qrcode.png" title="APP下载二维码" class="image-sign" onmouseover="showQrcodeImage()" onmouseout="hideQrcodeImage()"></img>
    </div>
    <div class="outer-wrapper">
        <div>
            <div id="qrcode"></div>
            <p>扫一扫下载APP</p>
        </div>
    </div>

css 代码

.qrcode-wrapper {
    position: absolute;
    top: 20px;
    right: 5px;
    color: white;
    z-index: 200;
}
.outer-wrapper {
    background: black;
    display: none;
    position: absolute;
    top: 60px;
    right: 5px;
    color: white;
    z-index: 200;
}

.outer-wrapper div {
    padding: 5px;
}
.outer-wrapper p {
    text-align: center;
}

上面的代码只是参考：
提供一张图片，鼠标移上去之后生成并展示二维码，鼠标移走之后二维码消失。

下面主要一下实现的两种js方案：

方案一：

使用这个js包：
qrcode.min.js
然后，创建一个QRCode实例对象

const qrcode = new QRCode(document.getElementById("qrcode"), {
        width : 100,
        height : 100,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    })
function showQrcodeImage () {
        $(".outer-wrapper").toggle()
}
qrcode.clear() // 清除代码
// 根据url生成新的二维码
qrcode.makeCode(url)
// 隐藏二维码图片
function hideQrcodeImage () {
    $(".outer-wrapper").toggle()
}

方案二：

使用使用这个js包：
jquery.qrcode.min.js
前提是需要依赖jquery包。

js代码：

function showQrcodeImage () {
        $(".outer-wrapper").toggle()
        $(".outer-wrapper").html('<div id="qrcode"></div><p>扫一扫下载APP</p>')
        $('#qrcode').qrcode({
            render: 'table', // 或者 'canvas'
            height: 100,
            width: 100,
            text: url, // 内容
            typeNumber:-1, // 计算模式
            correctLevel:2, // 二维码纠错级别
            background:"#ffffff", // 背景颜色
            foreground:"#000000"  // 二维码颜色
        })
    }
    function hideQrcodeImage () {
        $(".outer-wrapper").toggle()
        $('#qrcode').remove()
    }

鼠标移上去之后，这里先动态创建qrcode元素节点，然后拿到qrcode元素之后，将qrcode属性赋一个qrcode的对象。
然后鼠标移走之后，直接删除该节点。

其实还有更多方法，比如不用外部js。
之后有时间，再补上。