二维码相对于条形码存储信息更多，使用更广泛。一般我们静态生成二维码会使用草料二维码。动态生成（代码中）的话一般有以下几种：
一、jquery.qrcode
这里不讨论了，详细见wjhsh.net/zhengweijie…
二、qrcode
这个库可以用在各种环境下。vue、react、静态页面、node环境下，只要是js环境下都可以。使用上也没什么坑。
1、静态页面
QRCode.toCanvas(document.getElementById('canvas'), 'https://www.baidu.com/', function (error) { if (error) console.error(error) console.log('success!'); })
页面效果
2、commonjs和esmodule下
安装 ：yarn add qrcode
引入：
var QRCode = require('qrcode')或者
import QRCode from 'qrcode'
使用：
mounted() { QRCode.toDataURL('https://www.baidu.com/') .then((url) => { this.url = url }) .catch((err) => { console.error(err) }) },
得到的url赋值给页面中的img
<img :src="url" alt="">
详细api见：www.npmjs.com/package/qrc…
官网还有其他用法，这里不都列举了
官网地址：www.npmjs.com/package/qrc…
三、vue-qr（线上经常性出不来二维码，不建议使用）
这个是专门给vue使用的，使用上稍微有一点坑（vue2和vue3引入方式不一样），不支持ie浏览器
安装：yarn add vue-qr
vue2引入：import vueQr from 'vue-qr/src/packages/vue-qr.vue'
vue3引入：import vueQr from 'vue-qr'
以组件方式使用：注册组件->components:{vueQr}
->使用组件
<vue-qr logoSrc="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202012%2F19%2F20201219112305_6a409.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667036841&t=173e33e21c017e1675505419da337f21" :text="qrUrl" :size="260"></vue-qr>
主要api
text:要编码的内容（写文字展示文字，写地址跳转到地址）
size：大小（图片的宽高）
margin：二维码图像的外边距，默认20px
colorDark：实点颜色
colorLight：空白区颜色
bgSrc：背景图地址
gifBgSrc：背景图gif地址，设置后普通背景图失效，设置此选项会影响性能
logoSrc：中间logo图地址
logoScale：logo大小，太大会导致解码失败
logoMargin：logo外边距
logoBackgroundColor：logo背景色，需要设置logoMargin
logoCornerRadius：logo边框圆角
callback：第一个参数生成二维码的地址，第二个参数props传过来qid
官网地址：www.npmjs.com/package/vue…
qrcode和vue-qr对比，qrcode使用范围更广一些，vue-qr配置项更多一些，出来效果更好看，但是vue-qr线上问题较多，个人建议选择qrcode
四、qrcanvas
1、静态页面使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="qrcode"></div><script src="https://cdn.jsdelivr.net/npm/qrcanvas@3"></script><script> const canvas = qrcanvas.qrcanvas({ data: 'https://www.baidu.com/'});document.getElementById('qrcode').appendChild(canvas);</script></body></html>
2、模块内使用详细见官方文档：www.npmjs.com/package/qrc…
五、直接在线生成
这个比较好玩，简单，直接一个标签就行
<img style="width: 300px;height: 300px;" src="https://api.qrserver.com/v1/create-qr-code?data=http://goqr.me/api/" />
参考文章：
有几个好多年没更新的或者不太好用的这里就不列举了。以上是偏应用的，如果对二维码怎么实现的可以参考下这几篇文章：
cloud.tencent.com/developer/a…
其他参考文章：www.cnblogs.com/javalinux/p…
