vue项目使用html5+ barcode扫码在苹果遇到的问题以及自己的解决方法
之前在记录扫码 在安卓时，会出现黑屏，错位，闪退等等问题。解决方法在另一篇文章里 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();
}, 200);
},
false
);
ws.addEventListener(
"close",
function() {
ws = null;
},
false
); camera.html页面上
<!DOCTYPE html>
<html >
<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: 0;
padding: 0;
}
body {
background: #000;
}
.tips {
margin-top: 50%;
color: #fff;
text-align: center
}
.action {
position: fixed;
z-index: 777;
width: 100%;
left: 0;
bottom: 0;
}
.action .items {
display: flex;
justify-content: space-around;
background: rgba(0, 0, 0, 0.35);
width: 60%;
padding: 4px;
margin: 4px auto;
}
.action .items .item {
flex-basis: 50px;
text-align: center;
}
.action .items img {
width: 27px;
}
</style>
</head>
<body>
<div >
<div ></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();
}, 100);
}
// 取消扫描
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()
}, 400);
}
</script>
</html>这样算解决了。折腾了N久
- 上一篇 »HTML5本地存储IndexedDB基础使用
- 下一篇 »移动端html5问题总结
