【qrcode】JavaScript&uniapp使用qrcode生成二维码，小程序扫一扫二维码

来自湖南的阿晨

已于 2023-08-18 10:33:54 修改

阅读量1.3k

点赞数 1

分类专栏： Javascript与ES6~ html5 && css3 && 浏览器 uniapp全栈文章标签： javascript 开发语言 ecmascript

于 2023-06-30 09:22:51 首次发布

本文链接：https://blog.csdn.net/weixin_52479803/article/details/131469043

版权

Javascript与ES6~ 同时被 3 个专栏收录

45 篇文章 2 订阅

订阅专栏

html5 && css3 && 浏览器

31 篇文章 1 订阅

订阅专栏

uniapp全栈

20 篇文章 3 订阅

订阅专栏

QRCode简介：

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

JavaScript生成二维码

使用步骤：

点击下载：
https://github.com/davidshimjs/qrcodejs 或者mirrors / davidshimjs / qrcodejs · GitCode

用法一、

<!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>
    <script src="./js/qrcode.min.js"></script>
</head>

<body>
    <div id="qrcode"></div>
    <script type="text/javascript">
        new QRCode(document.getElementById("qrcode"), "http://www.runoob.com");	//要生成二维码的链接
    </script>
</body>

</html>

用法二、

<!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>
    <script src="./js/qrcode.min.js"></script>
</head>

<body>
    <div id="qrcode"></div>
    <script type="text/javascript">
        var qrcode = new QRCode("qrcode", {
            text: "https://blog.csdn.net/weixin_52479803?type=sub&spm=1011.2415.3001.5348",	//要生成二维码的链接
            width: 128,	//二维码的宽度
            height: 128,	//二维码的高度
            colorDark: "#000000",	//前景色
            colorLight: "#ffffff",	//背景色
            correctLevel: QRCode.CorrectLevel.H	//纠错等级
        });

    </script>
</body>

</html>

注解：

纠错等级：二维码容错率即是指二维码图标被遮挡多少后，仍可以被扫描出来的能力。容错率越高，则二维码图片能被遮挡的部分越多。大多数情况下，建议采用30%的容错率

重新生成二维码：

<!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>
    <button onclick="again()">重新生成</button>
    <script src="./js/qrcode.min.js"></script>
</head>

<body>
    <div id="qrcode"></div>
    <script type="text/javascript">
        var qrcode = new QRCode("qrcode", {
            text: "https://blog.csdn.net/weixin_52479803?type=sub&spm=1011.2415.3001.5348",	//要生成二维码的链接
            width: 128,	//二维码的宽度
            height: 128,	//二维码的高度
            colorDark: "#000000",	//前景色
            colorLight: "#ffffff",	//背景色
            correctLevel: QRCode.CorrectLevel.H	//纠错等级
        });
        function again() {
            qrcode.clear(); //清除
            qrcode.makeCode("http://www.w3cschool.cc"); //要生成二维码的链接
        }
    </script>
</body>

</html>

效果：

uniapp生成二维码，以及调用微信扫一扫

生成二维码：

首先到插件市场下载uQRCode插件：

uQRCode 全端二维码生成插件支持nvue 支持nodejs服务端 - DCloud 插件市场

然后可以直接使用：

<view class="modeOne">
			<uni-title title1="方式一"></uni-title>
			<view class="reviewed">待审核五人</view>
			<view class="container">
				<view class="qrcode-container">
					<uqrcode ref="uqrcode" canvas-id="qrcode" :value="qrcodeData" :options="{ margin: 10 }"></uqrcode>
				</view>
			</view>
			<view class="bottom">
				<text class="text">劳务工使用微信扫描二维码，即可完成劳务工入场</text>
				<view class="btn">
					<u-button shape="circle" @click="saveQRCode" color="#22bf8e" :plain="true"
						text="下载二维码到手机"></u-button>
				</view>
			</view>
</view>

效果图：

二维码属性讲解：

value属性为二维码生成对应内容，假设 value="https://uqrcode.cn/doc"，那么扫码之后就会跳转到这个链接，如何要参数可以加到后面，例如：value="https://uqrcode.cn/doc?date=123"
options属性，类型是Object，二维码配置选项，可配置二维码样式，绘制Logo

二维码保存：

saveQRCode() {
				this.$refs.uqrcode.save({
					success: () => {
						uni.showToast({
							icon: 'success',
							title: '保存成功'
						});
					}
				});
}

调用微信扫一扫

			wxSweep() {
				uni.scanCode({
					success: function(res) {
						console.log(res.result)
					},
					fail: function(res) {
						console.log(res.errMsg)
					}
				})
			}