位置: IT常识 - 正文

H5项目实现扫描二维码功能 -- html5-qrcode(h5实现扫码功能)

编辑:rootadmin
H5项目实现扫描二维码功能 -- html5-qrcode

推荐整理分享H5项目实现扫描二维码功能 -- html5-qrcode(h5实现扫码功能),希望有所帮助,仅作参考,欢迎阅读内容。

H5项目实现扫描二维码功能 -- html5-qrcode(h5实现扫码功能)

文章相关热门搜索词:h5实现扫码二维码,h5实现扫码二维码,h5 扫描,h5调用扫一扫功能,h5实现扫码二维码,h5调用扫一扫功能,h5实现扫码功能,h5实现扫码功能,内容如对您有帮助,希望把文章链接给更多的朋友!

vue3中使用html5-qrcode实现扫描二维码功能。

实现原理:调取手机摄像头扫一扫功能实现 注:调取手机摄像头需要再https协议下才可以,有的项目启动配置https:true可以实现启动的项目协议为https且可以访问,有的还是需要证书才能访问

实现1、下载html5-qrcodenpm i html5-qrcode2、使用<template> <div class="container" v-show="isShow"> <div id="reader"></div> </div></template><script setup>import { reactive, onMounted, onUnmounted, ref } from 'vue'import { showToast } from 'vant';import { Html5Qrcode } from 'html5-qrcode'let html5QrCode = ref(null)onMounted(() => { getCameras()})const onSearchOrder = () => { console.log('在运运单') router.push('order')}onUnmounted(() => { stop()})const getCameras = () => { Html5Qrcode.getCameras() .then((devices) => { if (devices && devices.length) { isShow.value = true html5QrCode = new Html5Qrcode('reader') // start开始扫描 start() } }) .catch((err) => { // handle err console.log('获取设备信息失败', err) // 获取设备信息失败 showToast('获取设备信息失败') })}const start = () => { html5QrCode .start( {facingMode: "environment" }, { fps: 20, // 设置每秒多少帧 qrbox: { width: 250, height: 250 } // 设置取景范围 // scannable, rest shaded. }, (decodedText, decodedResult) => { alert('扫码结果' + decodedText) }, (errorMessage) => { // parse error, ideally ignore it. For example: // console.log(`QR Code no longer in front of camera.`); console.log('暂无额扫描结果', errorMessage) } ) .catch((err) => { // Start failed, handle it. For example, console.log(`Unable to start scanning, error: ${err}`) })}const stop = () => { if (devicesInfo.value) { html5QrCode .stop() .then((ignore) => { // QR Code scanning is stopped. console.log('QR Code scanning stopped.', ignore) }) .catch((err) => { // Stop failed, handle it. console.log('Unable to stop scanning.', err) }) }}</script><style lang="scss" scoped>.container { position: relative; top: 0px; left: 0px; height: 100vh; width: 100%; background: rgba($color: #000000, $alpha: 0.48); z-index: 999;}#reader { top: 50%; left: 0; transform: translateY(-50%);}</style>

本文链接地址:https://www.jiuchutong.com/zhishi/273820.html 转载请保留说明!

上一篇:微软输入法打不出中文标点解决方法(微软输入法打不出汉字)

下一篇:清除COOKIES有什么好处?(清除cookies有什么用)

  • 北京增值税发票查验平台
  • 前一年度进项税少记了怎么办
  • 预缴税款如何做会计分录
  • 工程结算属于什么行业
  • 负数怎么在excel里输入
  • 发票专用章和财务章区别
  • 个体户个税计算方法2022税率表
  • 购入原材料开出商业承兑汇票会计分录
  • 油费补助记什么科目
  • 车间职工报销医药费能使用现金吗
  • 房产税计税依据含税还是不含税
  • 长期股权投资权益法初始成本的确定
  • 土地使用税的免税规定有哪些
  • 回迁房的交易流程
  • 收到保险公司赔款计入什么科目
  • 无形资产研究阶段的支出全部费用化
  • 子公司打钱给母公司
  • 进口代理公司怎么收费
  • 应征增值税不含税销售额(3%征收率)怎么算
  • 开票码是什么意思
  • 职工个人负担的医疗保险可以在计算个人所得税前扣除
  • 餐饮发票可以抵扣成本吗
  • 应付职工薪酬包括公积金吗
  • 非居民个人所得税税率表2021
  • 辅助生产费用怎么归集
  • 小规模纳税人取得专票如何处理
  • 存货入库后的仓储费记录
  • 建筑企业预缴企业所得税会计分录
  • 审计查出假发票怎么补救
  • 协会收取会员单位的会务费怎么做账
  • Mac怎么禁用icloud
  • win10右键个性化打不开 没有与之关联程序
  • 根据完工产品编制记账凭证
  • PHP:Memcached::decrement()的用法_Memcached类
  • linux mount命令详解
  • 银行本票实际金额小于票面金额
  • 增值税发票红冲后税款怎么办
  • 纳税人转让不动产增值税征收管理暂行办
  • 营改增后土增税收入
  • 解读一篇文章
  • 今日七夕祝福语
  • php模板引擎原理
  • 餐费计入什么费用
  • 前端v3
  • php的输出语句
  • 怎么买好空调
  • 权益法转换为成本法
  • 小规模申请一般纳税人的条件
  • 天使投资
  • 固定成本和变动成本举例
  • 累计折旧借贷方向表示什么意思
  • 实际出资和名义出资
  • 利润表主营业务收入怎么算
  • 发票金额大于实际报销怎么做账
  • 公司借给股东钱
  • 固定资产折旧方法不考虑净残值
  • 企业筹建期的开办不少于多少年
  • 个人保险发票能做账吗
  • 加油票的发票抬头怎么写
  • 报关单填制的运费怎么算
  • mysql获取当前日期时间函数
  • windows7如何获得正版
  • windows7/vista/server(no slic)
  • ubuntu如何安装
  • 文件夹字体变成蓝色怎么恢复
  • linux常见信号
  • explore.exe进程的作用
  • win7系统设备管理器没有端口
  • android opengles2.0教程
  • js动态表单
  • 批处理判断一个文件是否存在
  • python字符串的用法
  • 税务局航天信息的操作流程
  • 河北省网上税务局电子税务局
  • 税务纪检部门
  • 三方协议开票流程
  • 土地增值税优惠政策办理流程和手续方面的精简措施
  • 长安cs752016款2.0手动
  • 瑞典交税
  • 煤矸石占地需要哪些手续
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设