javascript二维码生成
二维码的效果图如下：
二维码的生成依赖于qrcodejs2插件，可以通过以下命令下载（qrcodejs2当前只有一个0.0.2版本）：
npm install [email protected]
qrcodejs2的使用也非常简单，在html模版上添加待生成二维码的dom（下例中的id为qrcode的div）：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="qrcode">div>
body>
html>
然后调用qrcodejs2生成二维码：
import QRCode from 'qrcodejs2'
var qrcode = new QRCode("qrcode", {
text: "www.youku.com",
width: 128,
height: 128
});
然后页面就可以生成我们想要的二维码了。
有几点要注意的是：
- 如果要重新生成二维码，不能直接再次new QRCode，可以通过makeCode重新定义二维码的地址，如下例：
import QRCode from 'qrcodejs2'
var qrcode = new QRCode("qrcode", {
text: "www.youku.com",
width: 128,
height: 128
});
setTimeout(function () {
qrcode.makeCode("www.baidu.com");
}, 1000);
待补充变更图。
- 调用qrcodejs2生成二维码时必须保证待生成二维码的dom已经存在，如果dom不存在，则在控制台会报以下错误（插件尝试往待生成二维码的dom下插入子元素时报错）：
Uncaught TypeError: Cannot read property 'appendChild' of null
这个问题常见于需要在模态框中显示二维码的场景，如Bootstrap的Modal，模态框通常有淡入淡出效果，当调用show方法弹出模态框然后立刻调用new QRCode（此时二维码dom还没有生成），就会报上面的错。最简单直白的方法就是弹出模态框时启动定时器检测二维码dom是否存在，不存在则等待，存在则生成二维码并关闭定时器。
笔者是在webpack环境下给出的例子，最后补充一下webpack.config.js和package.json。
webpack.config.js：
'use strict';
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
"main": "./src/main.js"
},
output: {
path: path.resolve(__dirname, "build"),
filename: "[name].js"
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
inject: 'body'
}),
]
};
package.json：
{
"name": "qrcode",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "liqing",
"license": "ISC",
"dependencies": {
"html-webpack-plugin": "^3.2.0",
"qrcodejs2": "0.0.2",
"webpack": "^4.36.1",
"webpack-cli": "^3.3.6"
}
}