使用JS代码制作二维码并且生成功能（详细教程）

HTML代码：

<img style="display: none" id="qrcode" data-width="100" data-height="100" data-url="https://www.baidu.com/">

相关JS代码：

再给大家分享一下其他生成二维码的案例：

使用jquery.qrcode生成二维码

1、首先在页面中加入jquery库文件和qrcode插件

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

2、在页面中需要显示二维码的地方加入以下代码：

<p id="code"></p>

3、调用qrcode插件。支持canvas和table两种方式进行图片渲染

canvas方式：

table方式：

4、如果生成的二维码内容包含文字，需要把字符串转换成UTF-8

定义转化方法：

在生成的时候调用转化方法：

二、在Vue-cli项目中动态生成二维码

1、引入qrcode--------npm install qrcode

2、在main.js中引入

3、在需要使用到生成二维码的组件中引入

4、在HTML中定义生成的位置，注意添加样式

5、在js中定义生成二维码的方法并调用

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

vue页面加载闪烁问题的解决方法

jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】

vue-cli axios请求方式及跨域处理问题

以上就是使用JS代码制作二维码并且生成功能（详细教程）的详细内容，更多请关注Gxl网其它相关文章！