【uniapp】H5扫码方案，解决uni.scanCode不支持H5的问题

2021-11-05 12:05:37 阅读：392 来源： 互联网

1. 背景

uniapp 中自带的 uni.scanCode 只能应用于 非H5，在H5上是没有提供该类扫码功能。
在参考了前辈的文章后（在此特别感谢 uniapp H5扫码实现提供的方案和灵感），本文的解决方案是：通过调用相机拍照，拍完进行二维码识别。

2. 效果

完整demo下载地址（希望花您两秒钟的时间点个 star，这将是我持续创作的动力）：https://gitee.com/Jokerlsss/h5-scan-code
在这里插入图片描述

点击按钮调起相机（或相册）
拍照（或选择照片）后确认，自动识别二维码
可识别带 中文 的数据

3. 代码

<template>
	<view class="container">
		<button type="default" @click="scanCode">扫码</button>
		<view>
			扫码结果：{{qrCodeRes}}
		</view>
	</view>
</template>

<script>
	let Qrcode = require('../../utils/reqrcode.js')
	export default {
		data() {
			return {
				qrCodeRes: ''
			}
		},
		methods: {
			// 扫码
			scanCode() {
				// #ifdef APP-PLUS
				this.scanCodeAPP()
				// #endif
				
				// #ifdef H5
				this.scanCodeH5()
				// #endif
			},
			// APP直接调用 uni.scanCode 接口
			scanCodeAPP() {
				uni.scanCode({
					scanType: ['qrCode'],
					success: (res) => {
						this.qrCodeRes = res.result
					}
				})
			},
			// H5通过拉起相机拍照来识别二维码
			scanCodeH5() {
				uni.chooseImage({
					count: 1,
					success: imgRes => {
						Qrcode.qrcode.decode(this.getObjectURL(imgRes.tempFiles[0]))
						Qrcode.qrcode.callback = (codeRes) => {
							if (codeRes.indexOf('error') >= 0) {
								// 二维码识别失败
								this.qrCodeRes = '不合法二维码：' + codeRes
							} else {
								// 二维码识别成功
								let r = this.decodeStr(codeRes)
								this.qrCodeRes = r
							}
						}
					}
				})
			},
			// 获取文件地址函数
			getObjectURL(file) {
				var url = null
				if (window.createObjectURL !== undefined) { // basic
					url = window.createObjectURL(file)
				} else if (window.URL !== undefined) { // mozilla(firefox)
					url = window.URL.createObjectURL(file)
				} else if (window.webkitURL !== undefined) { // webkit or chrome
					url = window.webkitURL.createObjectURL(file)
				}
				return url
			},
			// 解码，输出：中文
			decodeStr(str) {
				var out, i, len, c;
				var char2, char3;
				out = "";
				len = str.length;
				i = 0;
				while (i < len) {
					c = str.charCodeAt(i++);
					switch (c >> 4) {
						case 0:
						case 1:
						case 2:
						case 3:
						case 4:
						case 5:
						case 6:
						case 7:
							// 0xxxxxxx
							out += str.charAt(i - 1);
							break;
						case 12:
						case 13:
							// 110x xxxx 10xx xxxx
							char2 = str.charCodeAt(i++);
							out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
							break;
						case 14:
							// 1110 xxxx 10xx xxxx 10xx xxxx
							char2 = str.charCodeAt(i++);
							char3 = str.charCodeAt(i++);
							out += String.fromCharCode(((c & 0x0F) << 12) |
								((char2 & 0x3F) << 6) |
								((char3 & 0x3F) << 0));
							break;
					}
				}
				return out;
			},
		}
	}
</script>

<style>
	.container{
		padding: 10px;
	}
</style>

核心的 reqrcode.js 我原本直接贴在 CSDN 中，但似乎是代码太长 CSDN 页面会直接卡死，所以就放在 demo 根目录下的 utils - reqrcode.js，有需要的小伙伴将 demo 下载下来就能运行了（希望花费您两秒钟的时间点个 star，这将是我持续创作的动力）

标签：case,uniapp,扫码,window,H5,二维码,uni
来源： https://blog.csdn.net/weixin_42678675/article/details/121159989

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【uniapp】H5扫码方案，解决uni.scanCode不支持H5的问题

1. 背景

2. 效果

3. 代码