前景：在进行某个业务的迭代的时候，需求是要新增一个可以扫码跳转到h5页面进行签名。首先要实现在web端可以生成二维码，这时候同事推荐给我qrcode.js，我也百度查询了一下。
具体实现，在vue项目中可以使用qrcode.js生成二维码
1、首先安装包qrcodejs2：
npm install --save qrcodejs2
2、在项目中引入
import QRCode from "qrcodejs2"; //二维码
<el-col
:span='4'
:offset='1'
class="qrcode-box"
style="padding-left: 15px"
>
<div id="qrcode"
ref="qrcode"
style="padding:5px;border: 2px solid #DBDBDB">
</div>
<p class="qrcode_bottom">手机扫一扫签名</p>
</el-col>
这里要注意二维码的跳转路径：localhostUrl
/* 扫码签名 */
qrcode () {
console.log('qrcode====',base.Microservice)
let localhostUrl = window.location.href; //获取到测试or正式环境路径等等
localhostUrl = localhostUrl.split("#");
localhostUrl = localhostUrl[0];
console.log("本地url：", localhostUrl)
//二维码的生成
let qrcode = new QRCode("qrcode", {
width: 140,
height: 140, // 高度
text: `${localhostUrl}#/writtenSign?id=${this.orderListId}`
});
}
注意生成二维码的函数调用，要在mounted中先调用
//注意：二维码的生成原理也是canvas绘图，因此在mounted中先调用
mounted () {
this.qrcode();
}
详情参考：QRCode.js：使用 JavaScript 生成二维码
还可以使用以下方法等：
qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码
