还是扫描二维码登录的需求,既然和二维码相关肯定需要实现二维码生成啦!

0安装

生成二维码的包不止一种,这里一个坑 qrcode 包,他也可以生成二维码,但是很难设置二维码大小,颜色等,强烈不建议安装这个。我已经掉坑里过。
那么推荐使用jquery.qrcode。

npm install jquery.qrcode -s

这里前提是需要安装jquery并且在webpack中配好,先说一下代码,以后会详细说明

1
2
3
4
5
6
plugins:[
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
]

1使用

之后引用jquery.qrcode

1
require('jquery.qrcode')

在之后在Html中定义div容器

1
<div id="query"></div>

这里可以不用设置div大小,因为可以再js中设置二维码大小

再之后是js部分

1
2
3
4
5
6
7
8
9
10
11
//动态生成二维码     
$("#query").qrcode({
render: "canvas", // 渲染方式有table方式和canvas方式
width: 256, //默认宽度
height: 256, //默认高度
text: encodeURI("http://www.cnblogs.com/HtmlCss3/"), //二维码内容
typeNumber: -1, //计算模式一般默认为-1
correctLevel: 2, //二维码纠错级别
background: "#ffffff", //背景颜色
foreground: "#000000" //二维码颜色
});

说明下encodeURI是为了防止中文乱码。应该不会怎么用上。
至于如果想在二维码中间添加图片,目前不支持添加图片,不过我们可以自己把图片移到中间位置

最后更新: 2018年11月10日 16:58

原始链接: http://linjiad.github.io/2018/05/18/jQuery生成二维码/

× 请我吃糖~
打赏二维码