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久

  • 相关阅读:
    win7跨网段加域提示"找不到网络路径",解决后又提示"将该计算机的主域DNS更改为“”失败,名称仍然为xx.xx, 错误为“指定的服务器无法运行请求的操作”!
    XP原版系统激活
    使用SQLyog远程连接mysql,错误1130 解决方法
    激活Windows Server 2008 R2 Enterprise 方法
    Non-UTF-8 code starting with 'xff'解决,记录
    Linux 中,基础命令 command not found...问题
    winxp_sp3未激活的登录问题
    linux安装tomcat
    Notepad++ 配置python
    python idle 清屏问题的解决
  • 原文地址:https://www.cnblogs.com/huzhuhua/p/11255211.html
Copyright © 2011-2022 走看看