本次项目为基于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>
技术借鉴出处:
文章浏览阅读3k次,点赞3次,收藏13次。root@server ~]# vim /etc/named.rfc1912.zones #添加如下内容,也可直接更改模板。[root@server ~]# vim /etc/named.conf #打开主配置文件,将如下两处地方修改为。注意:ip地址必须反向书写,这里文件名需要和反向解析数据文件名相同。新建或者拷贝一份进行修改。nslookup命令。_dns反向解析
文章浏览阅读2.5w次,点赞16次,收藏103次。这个函数TIM_SetCompare1,这个函数有四个,分别是TIM_SetCompare1,TIM_SetCompare2,TIM_SetCompare3,TIM_SetCompare4。位于CH1那一行的GPIO口使用TIM_SetCompare1这个函数,位于CH2那一行的GPIO口使用TIM_SetCompare2这个函数。使用stm32f103的除了tim6和tim7没有PWM..._tim_setcompare1
文章浏览阅读950次,点赞33次,收藏19次。多线程_进程和线程,并发与并行,线程优先级,守护线程,实现线程的四种方式,线程周期;线程同步,线程中的锁,Lock类,死锁,生产者和消费者案例
文章浏览阅读2.9k次。ifort 编译器的安装ifort 编译器可以在 intel 官网上下载。打开https://software.intel.com/content/www/us/en/develop/tools/oneapi/components/fortran-compiler.html#gs.7iqrsm点击网页中下方处的 Download, 选择 Intel Fortran Compiler Classic and Intel Fortran Compiler(Beta) 下方对应的版本。我选择的是 l_在linux系统的用户目录下安装ifort和mkl库并配置
文章浏览阅读689次,点赞7次,收藏8次。些项目时需要一个生成图片的方法,我在网上找到比较方便且适合我去设置一些样式的生成方式之一就是使用Freemarker,在对应位置上先写好一个html格式的ftl文件,在对应位置用${参数名}填写上。还记得当时为了解决图片大小设置不上,搜索了好久资料,不记得是在哪看到的需要在里面使用width与height直接设置,而我当时用style去设置,怎么都不对。找不到,自己测试链接,准备将所有含有中文的图片链接复制一份,在服务器上存储一份不带中文的文件。突然发现就算无中文,有的链接也是打不开的。_ftl格式pdf的样式调整
文章浏览阅读1.5k次,点赞6次,收藏12次。拉取librealsense。_opt/ros/noetic/lib/nodelet/nodelet: symbol lookup error: /home/admin07/reals
文章浏览阅读3.4k次,点赞3次,收藏29次。一.单选题二.填空题三.判断题一.单选题静态链接是在( )进行的。A、编译某段程序时B、装入某段程序时C、紧凑时D、装入程序之前Pentium处理器(32位)最大可寻址的虚拟存储器地址空间为( )。A、由内存的容量而定B、4GC、2GD、1G分页系统中,主存分配的单位是( )。A、字节B、物理块C、作业D、段在段页式存储管理中,当执行一段程序时,至少访问()次内存。A、1B、2C、3D、4在分段管理中,( )。A、以段为单位分配,每._系统抖动现象的发生由什么引起的
文章浏览阅读2.4k次。在实际的工作生产中,零件的加工制造一般都需要二维工程图来辅助设计。UG NX 的工程图主要是为了满足二维出图需要。在绘制工程图时,需要先确定所绘制图形要表达的内容,然后根据需要并按照视图的选择原则,绘制工程图的主视图、其他视图以及某些特殊视图,最后标注图形的尺寸、技术说明等信息,即可完成工程图的绘制。1.视图选择原则工程图合理的表达方案要综合运用各种表达方法,清晰完整地表达出零件的结构形状,并便于看图。确定工程图表达方案的一般步骤如下:口分析零件结构形状由于零件的结构形状以及加工位置或工作位置的不._ug-nx工程图
文章浏览阅读920次,点赞29次,收藏18次。原文《智能制造数字化工厂智慧供应链大数据解决方案》PPT格式主要从智能制造数字化工厂智慧供应链大数据解决方案框架图、销量预测+S&OP大数据解决方案、计划统筹大数据解决方案、订单履约大数据解决方案、库存周转大数据解决方案、采购及供应商管理大数据模块、智慧工厂大数据解决方案、设备管理大数据解决方案、质量管理大数据解决方案、仓储物流与网络优化大数据解决方案、供应链决策分析大数据解决方案进行建设。适用于售前项目汇报、项目规划、领导汇报。
文章浏览阅读2w次,点赞38次,收藏102次。在服务器端,socket()返回的套接字用于监听(listen)和接受(accept)客户端的连接请求。这个套接字不能用于与客户端之间发送和接收数据。 accept()接受一个客户端的连接请求,并返回一个新的套接字。所谓“新的”就是说这个套接字与socket()返回的用于监听和接受客户端的连接请求的套接字不是同一个套接字。与本次接受的客户端的通信是通过在这个新的套接字上发送和接收数_当在函数 'main' 中调用 'open_socket_accept'时.line: 8. connection request fa
文章浏览阅读4.3k次。对象销毁对象销毁的标准语法Close和Stop何时销毁对象销毁对象时清除字段对象销毁的标准语法Framework在销毁对象的逻辑方面遵循一套规则,这些规则并不限用于.NET Framework或C#语言;这些规则的目的是定义一套便于使用的协议。这些协议如下:一旦销毁,对象不可恢复。对象不能被再次激活,调用对象的方法或者属性抛出ObjectDisposedException异常重复地调用对象的Disposal方法会导致错误如果一个可销毁对象x 包含或包装或处理另外一个可销毁对象y,那么x的Disp_c# 销毁对象及其所有引用
文章浏览阅读1.1w次。这是记录,在中项、高项过程中的错题笔记;https://www.zenwu.site/post/2b6d.html1. 信息系统的规划工具在制订计划时,可以利用PERT图和甘特图;访谈时,可以应用各种调查表和调查提纲;在确定各部门、各层管理人员的需求,梳理流程时,可以采用会谈和正式会议的方法。为把企业组织结构与企业过程联系起来,说明每个过程与组织的联系,指出过程决策人,可以采用建立过程/组织(Process/Organization,P/O)矩阵的方法。例如,一个简单的P/O矩阵示例,其中._大型设备可靠性测试可否拆解为几个部分进行测试