之前在记录扫码 在安卓时，会出现黑屏，错位，闪退等等问题。解决方法在另一篇文章里 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 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: 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 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(); }, 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久
查看更多关于【html教程】的文章
