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。
之后有时间,再补上。