当前位置：首页 > 建站学院 > 前端开发 > vue项目使用html5+ barcode扫码在苹果遇到的问题以及自己的解决方法

vue项目使用html5+ barcode扫码在苹果遇到的问题以及自己的解决方法

前端开发发布日期：2025年04月30日浏览次数：216次

之前在记录扫码在安卓时，会出现黑屏，错位，闪退等等问题。解决方法在另一篇文章里 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();
              }, );
            },
            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: ;
            padding: ;
        }
        body {
            background: #;
        }
        .tips {
            margin-top: %;
            color: #fff;
            text-align: center
        }
        .action {
            position: fixed;
            z-index: ;
            width: %;
            left: ;
            bottom: ;
        }
        .action .items {
            display: flex;
            justify-content: space-around;
            background: rgba(, , , 0.35);
            width: %;
            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();
        }, );
    }
    // 取消扫描
    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()
        }, );
    }
</script>
</html>

这样算解决了。折腾了N久

以上就是vue项目使用html5+ barcode扫码在苹果遇到的问题以及自己的解决方法的详细内容，更多关于vue项目使用html5+ barcode扫码在苹果遇到的问题以及自己的解决方法的资料请关注九品源码其它相关文章！

相关热词： 项目使用 html5+barcode 苹果遇到问题以及自己的解决方法

上一篇：微信小程序 confirm（删除提示）
下一篇：HTML5 Fullscreen API html5全屏编程API

文章分类

IT资讯 CMS教程服务器数据库前端开发后端开发工具使用其他教程

开发前端软件素材源码教程下载网站

vue项目使用html5+ barcode扫码在苹果遇到的问题以及自己的解决方法

文章分类

最后更新

热门排行