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久

  • 相关阅读:
    215. Kth Largest Element in an Array
    214. Shortest Palindrome
    213. House Robber II
    212. Word Search II
    210 Course ScheduleII
    209. Minimum Size Subarray Sum
    208. Implement Trie (Prefix Tree)
    207. Course Schedule
    206. Reverse Linked List
    sql 开发经验
  • 原文地址:https://www.cnblogs.com/huzhuhua/p/11255211.html
Copyright © 2011-2022 走看看