二维码qrcode插件
# 需求
在页面中显示二维码，如微信native支付
# qrcode插件
github地址：davidshimjs/qrcodejs: Cross-browser QRCode generator for javascript (github.com) (opens new window)
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
# 常规js用法
<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
text: "http://jindo.dev.naver.com/collie",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
qrcode.clear(); // clear the code.
qrcode.makeCode("http://naver.com"); // make another code.
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 在vue中的用法
<div class="qrcode" ref="qrCodeUrl"></div>
methods: {
creatQrCode(codeUrl='https://www.baidu.com') {
this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: codeUrl,
width: 300,
height: 300,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
},
}
_this.qrcode.clear(); // clear the code.
_this.qrcode.makeCode("http://naver.com"); // make another code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
参考文章：