什么是 QRCode.js?
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"),
"https://www.qtshe.com" // 设置要生成二维码的链接
);
</script>
或者使用一些可选参数设置:
var qrcode = new QRCode("test", {
text: "https://www.qtshe.com",
width: 130,
height: 130,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
同样我们可以使用以下方法:
qrcode.clear(); // 清除代码
qrcode.makeCode("https://m.qtshe.com"); // 生成另外一个二维码
在vue里使用qrcodeJs
vue里安装qrcodejs的npm包
npm install qrcodejs2
import QRCode from 'qrcodejs2'
<div class="qrcode" ref="qrCodeUrl"></div>
creatQrCode() {
var qrcode = new QRCode(this.$refs.qrCodeUrl, {
text: 'https://www.qtshe.com',
width: 100,
height: 100,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
},
浏览器兼容性
IE6〜10,Chrome,Firefox,Safari,Opera,Mobile Safari,Android,Windows Mobile等
就说到这吧。有啥问题加QQ群111857902 或者QQ8662054
青团社招聘:
招聘岗位:高级前端开发工程师P5及以上
坐标杭州市余杭区文一西路1380号金之源大厦11层
简历投递到:hr@qtshe.com || haochen@qtshe.com
职位描述:
1、建设工具、提炼组件、抽象框架,促进前端工程化、服务化,持续提升研发效率,保障线上产品质量
2、构建H5/PC应用基础设施,主导建设前端各种发布/监控等平台,指导落实解决方案
3、持续优化前端页面性能,维护前端代码规范,钻研各种前沿技术和创新交互,增强用户体验、开拓前端能力边界