zoukankan html css js c++ java

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 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;
             100%;
            left: 0;
            bottom: 0;


        }

        .action .items {
            display: flex;
            justify-content: space-around;
            background: rgba(0, 0, 0, 0.35);
             60%;
            padding: 4px;
            margin: 4px auto;


        }

        .action .items .item {
            flex-basis: 50px;
            text-align: center;


        }

        .action .items img {
             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",
                 "100%",
                height: "500px",
                position: "fixed"
            }
        );
        // 条码识别成功
        scan.onmarked = onmarked;
        function onmarked(type, result, file) {
            result = result.replace(/
/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久

查看全文

相关阅读:
config文件反射方法
 模块"xxxx.dll"已加载，但对DllRegisterServer的调用失败，错误代码为 XXXXXXXXX
多线程定时每天执行
 监控windows服务，当服务停止后自动重启服务
 log4net使用（winform）
sql 第 10条到20条
 windows 服务
 安卓屏幕模拟器
 dg_MeetingRoom 居中显示
 sql 清空所有数据

原文地址：https://www.cnblogs.com/huzhuhua/p/11255211.html