本次项目为基于vue2+vant的H5,套壳APP,无法使用APK的扫码时选择使用h5qrcode进行扫码,实现扫码单。
1.安装html5-qrcode
npm i html5-qrcode
2.在所需组件处使用
模版:
<div class="canTab" @click="startScan" v-if="!isScanning"><van-icon name="scan" size="45" color="#fff" /></div>
<div class="scan" v-if="isScanning">
<div class="scan-box">
<div id="scanning" width="800px"></div>
</div>
<span class="close-scan" @click="stopScan">
<svg t="1681382339822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2626" width="200" height="200">
<path d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z" fill="#ffffff" p-id="2627"></path>
<path d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z" fill="#ffffff" p-id="2628"></path>
</svg>
</span>
</div>
JS:
// 引入扫描二维码
import { Html5Qrcode } from 'html5-qrcode';
data() {
return {
isScanning: false, // 扫码
}
method: {
//扫码接单
startScan(){
this.isScanning = true
this.$nextTick(() => {
this.html5QrCode = new Html5Qrcode('scanning');
this.html5QrCode.start({
facingMode: "environment"
}, {
fps: 10,
aspectRatio: 1, // 4:3:1.333334 16:9:1.777778 1:1:1.0
qrbox: {
width: 280,
height: 280
},
}, (decodedText, decodedResult) => {
let codeUrl = decodedText; //获取二维码信息
// 以下为自己所需的业务逻辑处理
this.stopScan() // 结束扫码
// alert("识别结果" + decodedText)
}, errorMessage => {
},
)
.catch(err => {});
});
},
// 结束扫码
stopScan() {
this.html5QrCode.stop().then(() => {
this.isScanning = false;
})
},
}
style:
/* 扫码样式 */
.scan {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
.scan-box {
width: 100%;
}
.close-scan {
position: absolute;
top: 20px;
right: 20px;
svg {
width: 40px;
height: 40px;
}
}
}
.start-scan{
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 100px);
display: flex;
align-items: center;
justify-content: center;
border: none;
width: 200px;
height: 50px;
background: #00aaff;
color: #fff;
border-radius: 10px;
}
这是复制别人的逻辑,已经表明出处,仅供自己记录笔记,防止以后使用时忘记。
完整代码(此处仅有扫描二维码代码,其他已摘去):
<template>
<div class="driverMyBox">
<div class="canTab" @click="startScan" v-if="!isScanning">
<van-icon name="scan" size="45" color="#fff" />
</div>
<div class="scan" v-if="isScanning">
<div class="scan-box">
<div id="scanning" width="800px"></div>
</div>
<span class="close-scan" @click="stopScan">
<svg t="1681382339822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2626" width="200" height="200">
<path d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z" fill="#ffffff" p-id="2627"></path>
<path d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z" fill="#ffffff" p-id="2628"></path>
</svg>
</span>
</div>
</div>
</template>
<script type='text/javascript'>
// 引入扫描二维码
import { Html5Qrcode } from 'html5-qrcode';
export default {
data() {
return {
//扫码
isScanning: false, // 是否正在扫一扫
}
//扫码接单
startScan(){
this.isScanning = true;
this.$nextTick(() => {
this.html5QrCode = new Html5Qrcode('scanning');
this.html5QrCode.start({
facingMode: "environment"
}, {
fps: 10,
aspectRatio: 1, // 4:3:1.333334 16:9:1.777778 1:1:1.0
qrbox: {
width: 280,
height: 280
},
}, (decodedText, decodedResult) => {
let codeUrl = decodedText; //获取扫码信息
//这里进行自己的业务逻辑操作
this.stopScan() // 结束扫码
// alert("识别结果" + decodedText)
}, errorMessage => {
},
)
.catch(err => {});
});
},
// 结束扫码
stopScan() {
this.html5QrCode.stop().then(() => {
this.isScanning = false;
})
},
}
</script>
<style lang='scss' scoped>
/* 扫码样式 */
.scan {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
.scan-box {
width: 100%;
}
.close-scan {
position: absolute;
top: 20px;
right: 20px;
svg {
width: 40px;
height: 40px;
}
}
}
.start-scan{
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 100px);
display: flex;
align-items: center;
justify-content: center;
border: none;
width: 200px;
height: 50px;
background: #00aaff;
color: #fff;
border-radius: 10px;
}
</style>
技术借鉴出处:
文章浏览阅读4.1k次。因为网络问题,常常拉不下来(github上的一般能拿下来),所以用国内的一个工具来获取第三方库.gopm:https://gopm.io/1. 拿 github上的包:(前提是安装git)go get -u github.com/gpmgo/gopm稍微等一会儿,然后就可以看到它为我做了几件事:在GOPATH下生成了E:\GoProjects\src\gi..._go get github
文章浏览阅读1.2w次,点赞45次,收藏262次。深度学习是机器学习的分支,大语言模型是深度学习的分支。机器学习是人工智能(AI)的一个子领域,它的核心是让计算机系统能够通过对数据的学习来提高性能。在机器学习中,我们不是直接编程告诉计算机如何完成任务,而是提供大量的数据,让机器通过数据找出隐藏的模式或规律,然后用这些规律来预测新的、未知的数据。深度学习是机器学习的一个子领域,它尝试模拟人脑的工作方式,创建所谓的人工神经网络来处理数据。这些神经网络包含多个处理层,因此被称为“深度”学习。_大语言模型相关ppt
文章浏览阅读2.9k次,点赞3次,收藏8次。python 安装.whl文件(针对No module named "xxxx.pep425tags"问题)_cryptography-42.0.5-cp37-abi3-win_amd64.whl
文章浏览阅读3.6k次。Nacos Discovery 对外暴露的 Endpoint1.给项目添加依赖2.修改配置文件3.查询效果Nacos Discovery 内部提供了一个 Endpoint, 对应的 endpoint id 为 nacos-discovery。我们通过该 Endpoint,能获取到:当前服务有哪些服务订阅者 ;当前应用 Nacos 的基础配置信息 ;1.给项目添加依赖假设我们想看服务提供者(provider)有那些订阅者,以及 Nacos 的基础配置信息。我们就需要给 provider 项目_nacos discovery endpoint
文章浏览阅读1.3w次,点赞20次,收藏53次。在早期的版本中(Java SE5及以前版本)中只能通过tools.jar中的com.sun.tools.javac包来调用Java编译器,但由于tools.jar不是标准的Java库,在使用时必须要设置这个jar的路径。而在Java SE6中为我们提供了标准的包来操作Java编译器,这就是javax.tools包。编译java文件使用Java API来编译Java源代码有非常多方法,目前让..._java compiler api
文章浏览阅读2.1k次。利用绘制球体sphere(n),展示了MATLAB中的surf,surfc,surfl,surfnorm,surface五个绘图命令。启动MATLAB,新建脚本(Ctrl+N),输入如下代码:close all; clear all; clcn=20;[x,y,z]=sphere(n);figure(1);surf(x,y,z);axis equalfigure(2);surfc(x,y,z);a..._利用sphere(n)产生绘制球面数据,其中的n取值为学号后两位(若后两位小于等于5,需要
文章浏览阅读1.2k次,点赞23次,收藏26次。本篇介绍了NoSQL注入的基础以及思路,详细内容包含了、NoSQL1、为什么使用NoSQL2、RDBMS与NoSQL区别3、NoSQL产品4、NoSQL 数据库分类-、MongoDB1、认识MongoDB2、MongoDB特性3、MongoDB工作方式4、MongoDB缺陷5、MongoDB基本概念数据库Database7、文档Document8、集合Collection三、MongoDB基本操作1、数据库操作2、集合操作3、文档操作4、Where语句比较四、Mon等内容_nosql sql注入
文章浏览阅读124次。我国第一台大型通用电子计算机使用的逻辑部件是( )。A:集成电路B:大规模集成电路C:晶体管D:电子管。_我国第一台大型通用电子计算机使用的逻辑部件是( ) 。
文章浏览阅读399次。tp文件上传到远程服务器 内容精选换一换为加强对系统数据的容灾管理,云堡垒机支持配置日志备份,提高审计数据安全性和系统可扩展性。本小节主要介绍如何在系统配置FTP/SFTP服务器参数,将日志远程备份至FTP/SFTP服务器。开启远程备份后,系统默认在每天零点备份前一天的系统数据。以天为单位自动备份,生成日志文件,并上传到FTP/SFTP服务器相应路径。服务器同一路径下,不能重复以昇腾模型压缩工具的..._tp6上传远程服务器
文章浏览阅读2.8w次,点赞2次,收藏7次。解题报告 破折号 最简单的算法_尺取法课后作业 答 题 卡 上 一 题 下 一 题 2. k13629 字符计数 题目描述 给定一
文章浏览阅读490次。代表性学术成果1.Yiwei Liu, Jiamou Liu, Zijian Zhang, Liehuang Zhu, Ansheng Li. REM: From Structural Entropy To Community Structure Deception. NeurIPS 2019, Accepted, Vancouver, Canada.2.Liehuang Zhu, Meng ..._rem: from structural entropy to community structure deception
文章浏览阅读4.9k次。人工智能城市和智慧城市Smart cities aren’t just sci-fi or cyberpunk dreams, but an actual solution based on Artificial Intelligence and the Internet of Things. But the question is, what is the mechanism that put ..._intelligent edge computing based on machine learning for smart city