uni-app-H5页面调用设备摄像头扫描二维码

news/2024/7/12 3:45:55 标签: uni-app

应用场景:APK里面webView,访问用uniapp写的H5页面,需要调用设备摄像头扫描二维码

首先下载导入扫描插件:H5调用摄像头识别二维码(原生H5调用,不需要任何sdk,本地扫描识别,不需要后端) - DCloud 插件市场

插入好之后,新建页面用于展示扫描界面

<template>
	<view>
		<mumu-get-qrcode @success="qrcodeSucess" @error="qrcodeError" :continue="false">
			<template v-slot:error>
				<view>摄像头启动失败</view>
			</template>
		</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 {}
	},
	methods: {
		qrcodeSucess(data) {
			uni.showModal({
				title: '成功',
				content: data,
				success: () => {
					uni.navigateBack({})
				}
			})
		},
		qrcodeError(err) {
			console.log(err)
			uni.showModal({
				title: '摄像头授权失败',
				content: '摄像头授权失败,请检测当前浏览器是否有摄像头权限。',
				success: () => {
					uni.navigateBack({})
				}
			})
		}
	}
}
</script>

<style></style>

点击扫描按钮

//扫描二维码
		saomiao() {
			uni.navigateTo({
				url: `/pages/saomiao/saomiao`
			})
		},

这样就可以打开扫描界面,返回你扫描得到的信息。

切记!!!H5页面的环境必须是HTTPS!!!

切记!!!H5页面的环境必须是HTTPS!!!

切记!!!H5页面的环境必须是HTTPS!!!


http://www.niftyadmin.cn/n/5540410.html

相关文章

Android --- 新电脑安装Android Studio 使用 Android 内置模拟器电脑直接卡死,鼠标和键盘都操作不了

新电脑安装Android Studio 使用 Android 内置模拟器电脑直接卡死&#xff0c;鼠标和键盘都操作不了 大概原因就是,初始化默认Google的安卓模拟器占用的RAM内存是2048&#xff0c;如果电脑的性能和内存一般的话就可能卡死&#xff0c;解决方案是手动修改安卓模拟器的config文件&…

SpringBoot 生产实践:没有父 starter 的打包问题

文章目录 前言一、搜索引擎二、Chat GPT三、官方文档四、小结推荐阅读 前言 今天刚准备写点文章&#xff0c;需要 SpringBoot 项目来演示效果。一时心血来潮&#xff0c;没有采用传统的方式&#xff08;即通过引入 spring-boot-starter-parent 父工程的方式&#xff09;。 &l…

昇思25天学习打卡营第12天| 基于MindNLP+MusicGen生成自己的个性化音乐

之前都是看图文类的东西&#xff0c;今天体验一点不一样的。来点听力的内容。 mindspore有音乐生成模型MusicGen&#xff0c;MusicGen支持两种生成模式&#xff1a;贪心&#xff08;greedy&#xff09;和采样&#xff08;sampling&#xff09;。在实际执行过程中&#xff0c;采…

Go 中的类型推断

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

宝塔-Linux模板常用命令-centos7

一、宝塔-Linux模板常用命令&#xff1a; 1.停止宝塔 /etc/init.d/bt stop 2.启动宝塔 /etc/init.d/bt start 3.重启宝塔 /etc/init.d/bt restart 4.卸载宝塔 /etc/init.d/bt stop && chkconfig --del bt && rm -f /etc/init.d/bt && rm -rf …

grpc-go客户端接口添加

【1】 proto相关文件同服务端&#xff0c;如已经生成&#xff0c;可以直接使用服务端的文件&#xff08;包&#xff09; 【2】新建一个目录“WHG_CLIENT”&#xff0c;目录下新建一个main.go文件 package mainimport ("context""log""grpc-go-maste…

大数据面试题之Presto[Trino](1)

目录 什么是Presto&#xff0c;它主要用于解决什么问题&#xff1f; Presto和传统数据库有什么区别&#xff1f; 描述Presto的MPP架构。 Presto查询引擎是如何工作的&#xff1f; 解释Presto中的Coordinator和Worker的角色。 Presto由哪些主要组件构成&#xff1f; …

Spring解耦合分析和总结

在我们的日常开发中&#xff0c;创建对象的操作随处可见以至于对其十分熟悉的同时又感觉十分繁琐&#xff0c;每次需要对象都需要亲手将其new出来&#xff0c;甚至某些情况下由于坏编程习惯还会造成对象无法被回收&#xff0c;这是相当糟糕的。但更为严重的是&#xff0c;我们一…