在做项目的时候遇到了这样一个问题,首先说一下项目的技术构成背景,这是一个用vue做的h5页面。业务背景就是在微信服务号上新增这个需求的功能入口和H5页面,能够生成自己的专属推荐码和商机链接,在熟人圈中进行分享和推广,收集到的商机会自动分配给对应的人进行处理。
那么在做的时候发现每个客户都有自己的专属推荐码,所以需要给进来的客户生成一个专属的推荐二维码。于是就在网上搜了一下,就发现了qrcode.js
下面就对qrcode.js做一个总结和归纳,以后可能要经常用到。
1.什么是 QRCode.js?
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
2.基本用法
<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://www.runoob.com"); // 设置要生成二维码的链接
</script>
或者使用一些可选参数设置:
var qrcode = new QRCode("test", {
text: "http://www.runoob.com",
width: 128,
height: 128,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
名称 默认值 说明
width 256 图像宽度
height 256 图像高度
typeNumber 4
colorDark “#000000” 前景色
colorLight “#ffffff” 背景色
correctLevel QRCode.CorrectLevel.L 容错级别,可设置为:
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H(默认)
对应的值如下:
QRErrorCorrectLevel = {
L : 1,
M : 0,
Q : 3,
H : 2
};
为了让用户扫码更快,我们都选用低容错级别(建议用QRCode.CorrectLevel.L)
下面让我们来看一下
同样我们可以使用以下方法:
qrcode.clear(); // 清除代码
qrcode.makeCode(“http://www.w3cschool.cc”); // 生成另外一个二维码
实例代码
HTML 代码
<input id="text" type="text" value="http://www.runoob.com" /><br />
<div id="qrcode"></div>
CSS 代码
#qrcode {
width:160px;
height:160px;
margin-top:15px;
}
JavaScript 代码
var qrcode = new QRCode("qrcode");
function makeCode () {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
$("#text").
on("blur", function () {
makeCode();
}).
on("keydown", function (e) {
if (e.keyCode == 13) {
makeCode();
}
});
以上都是结合查的一些资料写的总结,下面我们来看一下我写的demo中的部分代码片段吧
vue写的代码
<template>
<div class='qrcodeWrapper'>
<div class='bgWrapper'>
</div>
<div class='formWrapper'>
<div class="wrapper">
<div id='qrcode'></div>
<div class='tips'>
长按二维码 分享给好友
</div>
</div>
</div>
</div>
</template>
<script>
import { getQueryString } from "lib/uri";
import env from "../../../config/envConfig.js";
import QRCode from 'qrcodejs2';
export default {
data(){
return {
qrcodes: '', //二维码
phone: '', //推荐人手机号
openId: '', //openId
// repeatFlag: '' //?
}
},
created() {
document.title = this.$route.meta.title;
this.openId = getQueryString("openId") ? decodeURI(getQueryString("openId")) : "";
this.phone = this.$route.query.phone ? this.$route.query.phone : (getQueryString("phone") ? decodeURI(getQueryString("phone")) : "");
this.qrcodes = `${env.get("shareUrl")}/index.html?openId=${this.openId}&phone=${this.phone}#/detail`;
this.gobal.share({
title:'您有熟人推荐大礼包,请查收',
desc:'推荐有礼',
url:`index.html?openId=${this.openId}&phone=${this.phone}#/detail`,
pic: "ene.png"
});
},
mounted() {
this.qrcode(this.qrcodes);
this.convertCanvasToImage();
},
methods: {
convertCanvasToImage() {
let myCanvas = document.getElementsByTagName("canvas")[0];
let image = new Image();
image.src = myCanvas.toDataURL("image/jpeg");
document.getElementById("qrcode").innerHTML = "";
document.getElementById("qrcode").appendChild(image);
},
qrcode(url) {
let qrcode = new QRCode('qrcode', {
text: url,
width: 190,
height: 190
})
}
}
}
</script>
<style lang="scss">
.qrcodeWrapper{
.bgWrapper {
background: url('assets/share.png') center top no-repeat;
background-size: cover;
max-width: 750px;
width: 100%;
height: 250px;
img {
display: block;
width: 100%;
}
}
}
</style>