本次项目为基于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>
技术借鉴出处:
文章浏览阅读411次。1. 修改httpd.conf去掉#Include conf/extra/httpd-vhosts.conf前面的#,启用虚拟主机功能2.修改httpd-vhost.conf在原有的 ## ServerName localhost# DocumentRoot d:/wamp64/www# # Options +Indexes +Includes +FollowS_options +indexes +includes +followsymlinks +multiviews allowoverride all
文章浏览阅读828次,点赞2次,收藏2次。做过前端,或对小程序有些了解的同学都知道,小程序是没有域名访问概念的,访问的路径都是以:“/pages/index”、“/pages/my”这种方式进行页面跳转的。域的概念从何而来?事情是这样的,前段时间突然冒出个想法,大家上下班,有些人离公司比较远,回家路上/地铁上,可能都会比较无聊,看看新闻、听听音乐啥的。但是对于IT行业的程序员们来说,入了IT领域就意味着,永远有学不完的东西,经常就有看..._微信小程序防盗链image设置白名单
文章浏览阅读36次。sole adj.唯一的;独有的;单独的; n.脚底, 鞋底; 袜底; v.装鞋底;solely adv.单独; along 强调一种孤独感 solely强调独自consequently adv.所以, 因此, 结果; thus, therefore都是”所以“的意思, consequently虽然也是“所以”但使用时前面没必要加since, 只需给出原因就行 co...
文章浏览阅读2.2k次。题目描述已知成绩表形成一个矩阵A,第1列为学号,第2列~第4列分别为数学、语文、英语成绩现要求完成统计,按指定的排列方式进行输出。输入1,对应数学降序输出输入2,对应语文降序输出输入3,对应英语降序输出输入4,对应总分降序输出A矩阵为:1700201 98 86 831700202 85 90 781700203 92 78 951700204 88 88 851700205 78 95 88输入一行整数,表述_某班同学成绩已经存放在矩阵a中,每行为某一位同学的数据,第1列为学号,第2列至第4
文章浏览阅读2.5w次,点赞21次,收藏32次。EnvironmentNotWritableError: The current user does not have write permissions to the target environment. environment location: C:\ProgramData\Anaconda3\envs\pythonProjectEnvironmentNotWritableError: The current user does not have write permissions to ._pycharmenvironmentnotwritableerror: the current user does not have write per
文章浏览阅读873次。Python模块导入出现ModuleNotFoundError: No module named ‘***’解决方法_python导入no module named 'fastbot
文章浏览阅读6.3k次,点赞4次,收藏9次。实训时需要安装SQL server2008 R所以我上网上找了一个.exe 的安装包链接:https://pan.baidu.com/s/1_FkhB8XJy3Js_rFADhdtmA提取码:ztki注:解压后1.04G安装时Microsoft需下载.NET,更新安装后会自动安装如下:点击第一个傻瓜式安装,唯一注意的是在修改路径的时候如下不可修改:到安装实例的时候就可以修改啦数据..._sqlserver 127 0 01 无法连接
文章浏览阅读7.4k次。1. Object.keys(item); 获取到了key之后就可以遍历的时候直接使用这个进行遍历所有的key跟valuevar infoItem={ name:'xiaowu', age:'18',}//的出来的keys就是[name,age]var keys=Object.keys(infoItem);2. 通常用于以下实力中 <div *ngFor="let item of keys"> <div>{{item}}.._js 遍历对象的key
文章浏览阅读2.2w次,点赞51次,收藏310次。粒子群算法求解路径规划路径规划问题描述 给定环境信息,如果该环境内有障碍物,寻求起始点到目标点的最短路径, 并且路径不能与障碍物相交,如图 1.1.1 所示。1.2 粒子群算法求解1.2.1 求解思路 粒子群优化算法(PSO),粒子群中的每一个粒子都代表一个问题的可能解, 通过粒子个体的简单行为,群体内的信息交互实现问题求解的智能性。 在路径规划中,我们将每一条路径规划为一个粒子,每个粒子群群有 n 个粒 子,即有 n 条路径,同时,每个粒子又有 m 个染色体,即中间过渡点的_粒子群算法路径规划
文章浏览阅读353次。所谓稳健的评估指标,是指在评估的过程中数据的轻微变化并不会显著的影响一个统计指标。而不稳健的评估指标则相反,在对交易系统进行回测时,参数值的轻微变化会带来不稳健指标的大幅变化。对于不稳健的评估指标,任何对数据有影响的因素都会对测试结果产生过大的影响,这很容易导致数据过拟合。_rar 海龟
文章浏览阅读607次,点赞2次,收藏7次。–基于STM32F103ZET6的UART通讯实现一、什么是IAP,为什么要IAPIAP即为In Application Programming(在应用中编程),一般情况下,以STM32F10x系列芯片为主控制器的设备在出厂时就已经使用J-Link仿真器将应用代码烧录了,如果在设备使用过程中需要进行应用代码的更换、升级等操作的话,则可能需要将设备返回原厂并拆解出来再使用J-Link重新烧录代码,这就增加了很多不必要的麻烦。站在用户的角度来说,就是能让用户自己来更换设备里边的代码程序而厂家这边只需要提供给_value line devices connectivity line devices
文章浏览阅读834次。概述ALSA(Advanced Linux Sound Architecture )高级Linux声音体系结构,是linux主流的音频体系结构,为 Linux 系统提供了统一的音频和MIDI功能和驱动,提供一个称为libasound的API库供开发者使用。参考网址:http://www.alsa-project.org术语声音是由变化的气压组成,被麦克风这样的转换器转换成电子连续模拟量,...