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

应用场景: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.mzph.cn/news/867425.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

身体(body)的觉醒:如果你贪婪,给你整个宇宙都不够

佛&#xff0c;是一个梵文的汉语音译词&#xff0c;指觉醒者。 何谓觉醒&#xff1f;什么的觉醒&#xff1f;其实很简单&#xff0c;就是身体的觉醒。 佛的另一个名字&#xff0c;叫菩提&#xff0c;佛就是菩提&#xff0c;菩提老祖&#xff0c;就是佛祖。 一、body&#xff…

Webpack: 构建优化

概述 前面章节我们已经详细探讨 Webpack 中如何借助若干工具分析构建性能&#xff0c;以及如何使用缓存与多进程能力提升构建性能的基本方法与实现原理&#xff0c;这两种方法都能通过简单的配置&#xff0c;极大提升大型项目的编译效率。 除此之外&#xff0c;还可以通过一些…

Lambda架构

1.Lambda架构对大数据处理系统的理解 Lambda架构由Storm的作者Nathan Marz提出&#xff0c;其设计目的在于提供一个能满足大数据系统关键特性的架构&#xff0c;包括高容错、低延迟、可扩展等。其整合离线计算与实时计算&#xff0c;融合不可变性、读写分离和复杂性隔离等原则&…

3.js - 裁剪平面(clipIntersection:交集、并集)

看图 代码 // ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui import { GUI } from three/examples/jsm/libs/lil-gui.module.min.js// 导入tween import …

深度解析Ubuntu版本升级:LTS版本升级指南

深度解析Ubuntu版本升级&#xff1a;Ubuntu版本生命周期及LTS版本升级指南 Ubuntu是全球最受欢迎的Linux发行版之一&#xff0c;其版本升级与维护策略直接影响了无数用户的开发和生产环境。Canonical公司为Ubuntu制定了明确的生命周期和发布节奏&#xff0c;使得社区、企业和开…

Spring AOP源码篇三之 xml配置

简单代码示例, 了解Spring AOP基于xml的基本用法 xml配置&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-insta…

django之url路径

方式一&#xff1a;path 语法&#xff1a;<<转换器类型:自定义>> 作用&#xff1a;若转换器类型匹配到对应类型的数据&#xff0c;则将数据按照关键字传参的方式传递给视图函数 类型&#xff1a; str: 匹配除了”/“之外的非空字符串。 /test/zvxint: 匹配0或任何…

golang线程池ants-实现架构

1、总体架构 ants协程池&#xff0c;在使用上有多种方式(使用方式参考这篇文章&#xff1a;golang线程池ants-四种使用方法)&#xff0c;但是在实现的核心就一个&#xff0c;如下架构图&#xff1a; 总的来说&#xff0c;就是三个数据结构&#xff1a; Pool、WorkerStack、goW…

Laravel任务调度:自动化运维的魔法师

标题&#xff1a;Laravel任务调度&#xff1a;自动化运维的魔法师 在现代Web应用开发中&#xff0c;自动化任务调度是一项不可或缺的功能。Laravel框架提供了一个强大的任务调度系统&#xff0c;允许开发者安排定时任务&#xff0c;如定期发送邮件、备份数据库或执行定时脚本。…

面试经典 150 题

文章目录 6、轮转数组 6、轮转数组 1、描述 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6…

【前端实现】在父组件中调用公共子组件:注意事项逻辑示例 + 将后端数组数据格式转换为前端对象数组形式 + 增加和删除行

【前端】在父组件中调用公共子组件的实现方法 写在最前面一、调用公共子组件子组件CommonRow.vue父组件ParentComponent.vue 二、实现功能1. 将后端数组数据格式转换为前端对象数组形式2. 增加和删除row 三、小结 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2…

全景图三维3D模型VR全景上传展示H5开发

全景图三维3D模型VR全景上传展示H5开发 3D互动体验平台的核心功能概览 兼容广泛格式&#xff1a;支持OBJ、FBX、GLTF等主流及前沿3D模型格式的无缝上传与展示&#xff0c;确保创意无界。 动态交互探索&#xff1a;用户可自由旋转、缩放、平移模型&#xff0c;深度挖掘每一处…

STMF4 硬件IIC(天空星开发板)

前言&#xff1a;笔记参考立创开发文档&#xff0c;连接放在最后 #IIC概念介绍 #IIC介绍 IIC通信协议&#xff0c;一种常见的串行通信协议&#xff0c;英文全程是 Inter-Integrated Circuit 使用这种通信方式的模块&#xff0c;通常有SCL&#xff08;Serial Clock Line&…

pytest使用报错(以及解决pytest所谓的“抑制print输出”)

1. 测试类的类名问题 #codingutf-8import pytestclass TestClass1:def setup(self) -> None:print(setup)def test_01(self) -> None:print(test_01111111111111111111111)def test_02(self) -> None:print(test_02)以上述代码为例&#xff0c;如果类名是Test开头&am…

Chair Footrest Protective Cover

Chair Footrest Protective Cover 万能通用型椅子脚垫保护套凳子耐磨硅胶加厚垫桌椅脚垫防滑静音套

【代码随想录算法训练Day60】卡码网107.寻找存在的路径

Day60 图论第五天 卡码网107.寻找存在的路径 #include <iostream> #include <vector> using namespace std;int n; // 节点数量 vector<int> father vector<int> (101, 0); // 按照节点大小定义数组大小// 并查集初始化 void init() {for (int i 1…

windows10/11 不小心删除卓越性能模式后再次开启卓越性能模式,显示无法创建新的电源方案 指定的电源方案、子组或设置不存在。

出现这个问题可能是因为系统中缺少必要的电源计划或权限不足。可以按照以下步骤尝试解决&#xff1a; 检查权限&#xff1a;确保你以管理员身份运行命令提示符或PowerShell。 恢复默认电源计划&#xff1a; 打开命令提示符&#xff08;以管理员身份运行&#xff09;&#xff0…

Docker逃逸CVE-2019-5736、procfs云安全漏洞复现,全文5k字,超详细解析!

Docker容器挂载procfs 逃逸 procfs是展示系统进程状态的虚拟文件系统&#xff0c;包含敏感信息。直接将其挂载到不受控的容器内&#xff0c;特别是容器默认拥有root权限且未启用用户隔离时&#xff0c;将极大地增加安全风险。因此&#xff0c;需谨慎处理&#xff0c;确保容器环…

java多线程之ThreadLocal详解

ThreadLocal 一、ThreadLocal概述二、ThreadLocal解决并发时的线程不安全问题三、ThreadLocal的工作原理 一、ThreadLocal概述 ThreadLocal 是一个线程变量工具类。主要用于将私有线程和该线程存放的副本对象做一个映射&#xff0c;各个线程之间的变量互不干扰&#xff0c;例如…

我使用HarmonyOs Next开发了b站的首页

1.实现效果展示&#xff1a; 2.图标准备 我使用的是iconfont图标&#xff0c;下面为项目中所使用到的图标 3. 代码 &#xff08;1&#xff09;Index.ets&#xff1a; import {InfoTop} from ../component/InfoTop import {InfoCenter} from ../component/InfoCenter import…