[uniapp] 实现扫码功能，含APP、h5、小程序

🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~

💟 作者：码喽的自我修养🥰
📝 专栏：uniapp与微信小程序 🎉

🌈 创作不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕

🌈🌈文章目录

场景描述

APP、微信小程序如何实现（原生扫码功能）

h5如何实现（扫码功能插件）

步骤1.导入插件（两种方式，选其一）

步骤2.新建页面 scan-qrcode，作为扫码页面。

步骤3.在需要调用扫码功能的页面进行页面跳转

场景描述

在众多移动应用中需要用到扫码二维码或条码查询信息的场景比比皆是，如商品管理中查询商品信息，订单跟踪过程中扫码单号查询订单信息和库存管理中的商品盘点。

APP、微信小程序如何实现（原生扫码功能）

<!-- 在 'manifest.json' 中允许打开摄像头权限 -->

<template>
	<button @click="scanQRcodes">扫码</button>
</template>

<script setup>
// 扫码
const scanQRcodes = () => {
	uni.scanCode({
		success: (res) => {
			if (res.result) {
				console.log('扫描结果：', res.result);
			} else {
				uni.showToast({
					title: '扫描失败',
					icon: 'none'
				});
			}
		},
		fail: (err) => {
			if (err.errMsg.includes('cancel')) {
				uni.showToast({
					title: '扫描已取消',
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: '调用相机失败',
					icon: 'none'
				});
			}
		}
	});
};
</script>

h5如何实现（扫码功能插件）

步骤1.导入插件（两种方式，选其一）

（1）HBuilder 创建的项目：从应用市场导入 mumu-getQrcode插件到uniapp项目中mumu-getQrcode https://ext.dcloud.net.cn/plugin?id=7007

（2）脚手架创建的 uni 项目：需要自行安装 jsQR 依赖，并且修改组件中源码中的引入。

# 安装 jsQR
npm install jsqr --save

# 修改组件源码对 jsQR 依赖
import jsQR from "jsqr"

步骤2.新建页面 scan-qrcode，作为扫码页面。

<template>
	<view class="container">
		<mumu-get-qrcode @success='qrcodeSucess' @error="qrcodeError"></mumu-get-qrcode>
	</view>
</template>
 
<script>
	import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue'
    
	export default {
		components: {
			mumuGetQrcode  //注册
		},
		data() {
			return {
			}
		},
		name: 'Qrcode',
		methods: {
			qrcodeSucess(data) { //扫码成功
				 console.log(data)
              // 确认弹窗（若不需要可以去除）
				 uni.showModal({
				 	title: '成功',
				 	content: data,
				 	success: () => { // 确认弹窗后的操作 }
				 })
			},
			qrcodeError(err) {  //扫码失败
				uni.showModal({
					title: '摄像头授权失败',
					content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
					success: () => {
						uni.navigateBack({})  //返回到上一页
					}
				})
			}
		}
	};
</script>

步骤3.在需要调用扫码功能的页面进行页面跳转

uni.navigateTo({
    url: '/pages/scan-qrcode/scan-qrcode'
});

相关API

可传属性（Props）

参数	说明	类型	默认值
continue	是否连续获取。false 监听一次 true 持续监听	Boolean	false
exact	选调用摄像头。environment 后摄像头 user 前摄像头	String	environment
size	扫码屏幕大小。whole 全屏 balf 半屏	String	whole
definition	调用摄像头清晰度。fasle 正常 true 高清	Boolean	false

事件（Events）

事件名	说明	回调参数
success	检测到图中有二维码并读取到数据是回调	二维码数据
error	组件内部发送错误，通常是摄像头没有调用成功	错误信息，详情见下

常见的错误信息：

AbortError［中止错误］

尽管用户和操作系统都授予了访问设备硬件的权利，而且未出现可能抛出NotReadableError异常的硬件问题，但仍然有一些问题的出现导致了设备无法被使用。
NotAllowedError［拒绝错误］

用户拒绝了当前的浏览器实例的访问请求；或者用户拒绝了当前会话的访问；或者用户在全局范围内拒绝了所有媒体访问请求。
NotFoundError［找不到错误］

找不到满足请求参数的媒体类型。
NotReadableError［无法读取错误］

尽管用户已经授权使用相应的设备，操作系统上某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问。
OverconstrainedError［无法满足要求错误］

指定的要求无法被设备满足，此异常是一个类型为OverconstrainedError的对象，拥有一个constraint属性，这个属性包含了当前无法被满足的constraint对象，还拥有一个message属性，包含了阅读友好的字符串用来说明情况。
SecurityError［安全错误］

在getUserMedia() 被调用的 Document 上面，使用设备媒体被禁止。这个机制是否开启或者关闭取决于单个用户的偏好设置。
TypeError［类型错误］

constraints 对象未设置［空］，或者都被设置为false。

插槽（slot）

插槽名称	说明	默认值
error	当发送错误时，在页面上显示的内容	相机权限被拒绝提示

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家点点收藏+关注 ~💕

更多专栏订阅推荐：

🥕 JavaScript深入研究

👍 前端工程搭建
💕 vue从基础到起飞

✈️ HTML5与CSS3

🖼️ JavaScript基础

⭐️ uniapp与微信小程序

📝 前端工作常见问题与避坑指南

✍️ GIS地图与大数据可视化

📚 常用组件库与实用工具

💡 java入门到实战