之前在记录扫码 在安卓时,会出现黑屏,错位,闪退等等问题。解决方法在另一篇文章里 https://www.cnblogs.com/huzhuhua/p/11064764.html 。

当时以为 是解决了。后来打包到IOS上时也是 出现。原因是

plus.webview.create(location.href)这个不是在新的窗口打开,都是在同一窗口。我也不知道什么 原因。
当时以为是路径问题,然后想到了换另一个地址试试。然后记录了另一篇vue引用多入口 文件 https://www.cnblogs.com/huzhuhua/p/11202565.html。
后来还是不行。最终只能新建一个静态的camera.html页面,放在dist打包的文件夹内。一块打包成APP。在调用上我是做了区分,安卓还是照上面 的文章做。IOS的话
就跳到camera.html。
具体代码如下。
要跳转去的VUE页面上

    let ws = plus.webview.create("./camera.html", "camera");
ws.show();
ws.addEventListener(
"loaded",
function() {
//页面加载完成后才显示
setTimeout(function() {
ws.show();
}, );
},
false
);
ws.addEventListener(
"close",
function() {
ws = null;
},
false
);

camera.html页面上

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>camera</title>
<style>
html,
body,
div,
span,
img {
margin: ;
padding: ;
} body {
background: #;
} .tips {
margin-top: %;
color: #fff;
text-align: center
} .action {
position: fixed;
z-index: ;
width: %;
left: ;
bottom: ; } .action .items {
display: flex;
justify-content: space-around;
background: rgba(, , , 0.35);
width: %;
padding: 4px;
margin: 4px auto; } .action .items .item {
flex-basis: 50px;
text-align: center; } .action .items img {
width: 27px;
}
</style>
</head> <body>
<div id="camera">
<div id="scan"></div>
<div class="tips">加载中...</div> <div class="action">
<div class="items">
<div class="item" onclick="openLight"><img src="./src/assets/img/png-60@3x.png"></div>
<div class="item" onclick="getPicture"><img src="./src/assets/img/png-59@3x.png"></div>
<!-- <div
class="item"
@click="showInput"
><img src="../assets/img/png-68@3x.png">
</div> -->
<div class="item" onclick="cancelScan"><img src="./src/assets/img/png-61@3x.png"></div>
<!-- <d class="item"><img src="../../assets/img/png-25@3x.png"></d -->
</div>
</div>
</div> </body>
<script> var isLight = false, scan = null;
// 打开闪光灯
function openLight() {
isLight = !isLight;
scan.setFlash(isLight);
} //创建扫描控件
function startRecognize() {
if (!window.plus) return;
scan = null;
scan = new plus.barcode.Barcode(
"scan",
[plus.barcode.QR, plus.barcode.EAN8, plus.barcode.EAN13],
{
frameColor: "#1294cb",
scanbarColor: "#1294cb",
top: "100px",
left: "0px",
width: "100%",
height: "500px",
position: "fixed"
}
);
// 条码识别成功
scan.onmarked = onmarked;
function onmarked(type, result, file) {
result = result.replace(/\n/g, "");
localStorage.setItem("cameraData", result);
let ws = plus.webview.getWebviewById("camera");
ws.close()
}
}
// //开始扫描
function startScan() {
if (!window.plus) return;
startRecognize(); //创建控件
setTimeout(() => {
scan.start();
}, );
}
// 取消扫描
function cancelScan() {
if (!window.plus) return;
plus.navigator.setStatusBarStyle("dark");
if (scan) {
scan.cancel(); //关闭扫描
scan.close(); //关闭条码识别控件
}
let ws = plus.webview.getWebviewById("camera");
ws.close()
}
// 从相册选取二维码相片
function getPicture() {
plus.gallery.pick(src => {
// scan.cancel(); //关闭扫描
plus.barcode.scan(
src,
(type, result) => {
scan.cancel(); //关闭扫描
scan.close();
localStorage.setItem("cameraData", result);
plus.navigator.setStatusBarStyle("dark");
let ws = plus.webview.getWebviewById("camera");
ws.close()
}
);
});
} window.onload = function () {
setTimeout(() => {
plus.navigator.setStatusBarStyle("dark");
startScan()
}, );
}
</script> </html>

这样算解决了。折腾了N久

vue项目使用html5+ barcode扫码在苹果遇到的问题以及自己的解决方法的更多相关文章

  1. 关于Android Studio3.2新建项目无法运行出现Failed to find Build Tools revision 28.0.3的解决方法

    关于Android Studio3.2新建项目无法运行出现Failed to find Build Tools revision 28.0.3的解决方法 https://blog.csdn.net/h ...

  2. PC、h5项目接入第三方支付宝扫码登录、扫码付款

    首先介绍一下pc项目接入支付宝扫码支付. 1.pc.移动接入支付宝扫码支付. 其实这个逻辑很简单,前端所需要处理的不是很多,后台会给一个连接,前端只需要将要支付的订单id拼接在这个连接上,然后打开跳转 ...

  3. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-6.微信扫码登录回调本地域名映射工具Ngrock

    笔记 6.微信扫码登录回调本地域名映射工具Ngrock         简介:讲解微信扫码回调本地域名ngrock讲解 1.为什么要用这个,微信扫码需要配置回调,需要配置对应的域名          ...

  4. 微信支付之扫码支付开发:我遇到的坑及解决办法(附:Ecshop 微信支付插件)

    前段时间帮一个朋友的基于ecshop开发的商城加入微信扫描支付功能,本以为是很简单的事儿——下载官方sdk或开发帮助文档,按着里面的做就ok了,谁知折腾了两三天的时间才算搞定,中间也带着疑问在网上找了 ...

  5. 在android源码环境下写上层应用的一个初步解决方法

    在android源码环境下编写上层应用,一直以来我都觉得很麻烦.因为如果单纯将应用导入eclipse,那么framework层一些定制的API无法自动提示和补全,使用起来不太方便:如果将整个andro ...

  6. 项目导入时报错:The import javax.servlet.http.HttpServletRequest cannot be resolved 解决方法

    Error: The import javax.servlet cannot be resolved The import javax.servlet.http.HttpServletRequest ...

  7. QT项目升级(QT4.6.3到QT5.2)时,遇到的问题和解决方法

    QT4升级到QT5修改: PC部分: [改QTDIR变量] 在project根文件夹下找到.user文件, 如InnoTabPlugin.vcxproj.user 改动指向你的QT5根文件夹: < ...

  8. (转)新建maven项目时报错Error:Maven Resources Compiler: Maven project configuration required for module 'XX'解决方法

    转载地址:https://blog.csdn.net/qq784515681/article/details/85070195 在新建maven项目时,Problems中报错: Error:Maven ...

  9. vue项目条形码和二维码生成工具试用

    项目开发需要,优惠券分不同类型,简单的使用id生成条形码供店铺使用,麻烦点的需要多个字段的就需要使用二维码来展示了,对应的效果如下 条形码(一维码)使用工具code128 需引入code128.js ...

随机推荐

  1. JAVA web 框架集合

    “框架”犹如滔滔江水连绵不绝, 知道有它就好,先掌握自己工作和主流的框架: 在研究好用和新框架. 主流框架教程分享在Java帮帮-免费资源网 其他教程需要时间制作,会陆续分享!!! 152款框架,你还 ...

  2. centos 用户名密码忘记了怎么办?

    进入互动式命令行 打开虚拟机,进入模式选择界面,即有两个模式的主界面,然后在时间结束前按e, 进入编辑选项菜单 按↓键定位到类似 linux16 /vmlinuz-3.10.0-123.el7.x86 ...

  3. mysql数据库锁的机制-及事务事件

    事务隔离级别,脏读.不可重复读.幻读,乐观锁.悲观锁(共享锁.排它锁) 数据库事务具有四个特征,分别是原子性(Atomicity).一致性(Consistency).隔离性(Isoation).持久性 ...

  4. Codeforces Round #135 (Div. 2) D - Choosing Capital for Treeland(两种树形DP)

  5. ajax有哪些方法可以实现跨域?他们都有哪些局限性?

    1.服务器端代理:在服务器端设置一个代理,由服务器端向跨域下的网站发出请求,再将请求结果返回给前端. 属于后端的技术,实现起来最麻烦. 2.jsonP,只支持get方式调用. 3.XHR2(cors) ...

  6. 【cf补题记录】Codeforces Round #607 (Div. 2)

    比赛传送门 这里推荐一位dalao的博客-- https://www.cnblogs.com/KisekiPurin2019/ A:字符串 B:贪心 A // https://codeforces.c ...

  7. ZROI1119 【十一·联考】幸福

    ZROI1119 [十一·联考]幸福 传送门 一道矩阵快速幂. #include<iostream> #include<cstdio> #include<algorith ...

  8. rpm续

    一.安装源码包 安装源码包通常须要一下三步: (1) ./configure. 这步可以定制功能,加上相应 的选项即可,具体有什么选项可以通过命令./configure help来查看.这一步会 自动 ...

  9. Docker快速搭建Zookeeper和kafka集群

    使用Docker快速搭建Zookeeper和kafka集群 镜像选择 Zookeeper和Kafka集群分别运行在不同的容器中zookeeper官方镜像,版本3.4kafka采用wurstmeiste ...

  10. hanlp添加词典不起作用

    不起作用的原因很多,这里列举几个 这里的hanlp我虽然用的maven建立的但是要添加自定义词典,所以没有用maven引入的方式,而是下载了data+hanlp.jar文件          data ...