最近项目中有个裂变分享的需求, 需要在页面中根据分享人的身份动态生成二维码图片放置在页面中, 所以研究了一下这个功能的实现, 同时把实现过程记录如下:
1. 引入二维码生成模块
NPM install qrcodejs2 --save
注意: 此处安装 qrcodejs2, 安装依赖后可在 main 方法中进行全局引用设置, 也可单独某个页面中进行引用设置.
2. 引入使用
import QRCode from 'qrcodejs2';
备注: 在 main 中设置全局可使用 vue.prototype.
qrCode
3. 页面展示与配置
3.1 html 代码
放置生成二维码图片的容器
<div id="qrCode" ref="qrCodeDiv"></div>
3.2 JS 代码
JS 代码有三种放入位置
第一种: 放置在 mounted 生命周期函数中
- mounted() {
- new QRCode(this.$refs.qrCodeDiv, {
- text: "https://www.baidu.com",
- width: 200,
- height: 200,
- colorDark: "#333333", // 二维码颜色
- colorLight: "#ffffff", // 二维码背景色
- correctLevel: QRCode.CorrectLevel.L // 容错率, L/M/H
- });
- }
第二种: 放置在 created 生命周期函数中, 但是注意一定要放在 this.$nextTick 的回掉函数中
- created() {
- this.$nextTick(function() {
- new QRCode(this.$refs.qrCodeDiv, {
- text: "https://www.baidu.com",
- width: 200,
- height: 200,
- colorDark: "#333333", // 二维码颜色
- colorLight: "#ffffff", // 二维码背景色
- correctLevel: QRCode.CorrectLevel.L // 容错率, L/M/H
- });
- });
- },
第三种方式: 放置在 methods 属性中的指定方法中, 并且在 mouted 生命周期函数中调用这个方法(最好也把这个方法的调用放置在 this.$nextTick 的回掉函数中)
- mounted: function () {
- this.$nextTick(function () {
- this.bindQRCode();
- })
- },
- methods: {
- bindQRCode: function () {
- new QRCode(this.$refs.qrCodeDiv, {
- text: 'https://www.baidu.com',
- width: 200,
- height: 200,
- colorDark: "#333333", // 二维码颜色
- colorLight: "#ffffff", // 二维码背景色
- correctLevel: QRCode.CorrectLevel.L// 容错率, L/M/H
- })
- }
- }
4. 注意点
1. 显示内容 (text 所指向内容) 必须是 UTF-8 编码格式.
2. 生成二维码 JS 必须在 this.$nextTick(function(){调用})或 setTimeout(() => { 调用 }, 100), 是为了确保二维码容器 DOM 已经存在.
3. 为了防止重复生成二维码, 使用置空进行控制: document.getElementById("qrcode").innerHTML = "";
来源: http://www.jianshu.com/p/3ca5580bc943