之前在记录扫码 在安卓时，会出现黑屏，错位，闪退等等问题。解决方法在另一篇文章里 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扫码在苹果遇到的问题以及自己的解决方法的更多相关文章

  1. 关于Android Studio3.2新建项目无法运行出现Failed to find Build Tools revision 28.0.3的解决方法

    关于Android Studio3.2新建项目无法运行出现Failed to find Build Tools revision 28.0.3的解决方法 https://blog.csdn.net/h ...

  2. PC、h5项目接入第三方支付宝扫码登录、扫码付款

    首先介绍一下pc项目接入支付宝扫码支付. 1.pc.移动接入支付宝扫码支付. 其实这个逻辑很简单,前端所需要处理的不是很多,后台会给一个连接,前端只需要将要支付的订单id拼接在这个连接上,然后打开跳转 ...

  3. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-6.微信扫码登录回调本地域名映射工具Ngrock

    笔记 6.微信扫码登录回调本地域名映射工具Ngrock         简介:讲解微信扫码回调本地域名ngrock讲解 1.为什么要用这个,微信扫码需要配置回调,需要配置对应的域名          ...

  4. 微信支付之扫码支付开发：我遇到的坑及解决办法(附：Ecshop 微信支付插件)

    前段时间帮一个朋友的基于ecshop开发的商城加入微信扫描支付功能,本以为是很简单的事儿——下载官方sdk或开发帮助文档,按着里面的做就ok了,谁知折腾了两三天的时间才算搞定,中间也带着疑问在网上找了 ...

  5. 在android源码环境下写上层应用的一个初步解决方法

    在android源码环境下编写上层应用,一直以来我都觉得很麻烦.因为如果单纯将应用导入eclipse,那么framework层一些定制的API无法自动提示和补全,使用起来不太方便:如果将整个andro ...

  6. 项目导入时报错：The import javax.servlet.http.HttpServletRequest cannot be resolved 解决方法

    Error: The import javax.servlet cannot be resolved The import javax.servlet.http.HttpServletRequest ...

  7. QT项目升级(QT4.6.3到QT5.2)时，遇到的问题和解决方法

    QT4升级到QT5修改: PC部分: [改QTDIR变量] 在project根文件夹下找到.user文件, 如InnoTabPlugin.vcxproj.user 改动指向你的QT5根文件夹: < ...

  8. （转）新建maven项目时报错Error:Maven Resources Compiler: Maven project configuration required for module 'XX'解决方法

    转载地址:https://blog.csdn.net/qq784515681/article/details/85070195 在新建maven项目时,Problems中报错: Error:Maven ...

  9. vue项目条形码和二维码生成工具试用

    项目开发需要,优惠券分不同类型,简单的使用id生成条形码供店铺使用,麻烦点的需要多个字段的就需要使用二维码来展示了,对应的效果如下 条形码(一维码)使用工具code128 需引入code128.js ...

随机推荐

  1. 10-cmake语法-CMakeParseArguments

    include(CMakeParseArguments) 是为了使用 cmake_parse_arguments(),看样子是用来解析输入参数的. 给出参考: https://cmake.org/pi ...

  2. flask框架搭建项目的具体步骤

    flask是一个使用python编写的轻量级Web应用框架.与django不同,Django创建工程时,会直接构架好工程目录.而flask工程几乎是自己创建结构. 1.导入相关模块以及需要使用的模块: ...

  3. 解决 IDEA 创建 Gradle 项目没有src目录问题

    解决 IDEA 创建 Gradle 项目没有src目录问题 前几天遇到一个问题,就是使用IDEA创建gradle项目后,src目录没有自动生成出来,今天就给大家分享一下怎么解决. 1. 目录:创建的 ...

  4. netlify搭建静态站+https

    转载[大雄的学习人生 - 原文地址:https://www.cnblogs.com/codernie/p/9062104.html] 一.使用github或者gitlab登陆netlify 首先,打开 ...

  5. zookeeper shell

    1.启动zk客户端 ./zkCli.sh -server 192.168.67.35:2182,192.168.67.36:2182,192.168.67.37:2182   2.创建zk节点 cre ...

  6. 可能是全网最好的MySQL重要知识点 | 面试必备

    可能是全网最好的MySQL重要知识点 | 面试必备  mp.weixin.qq.com 点击蓝色“程序猿DD”关注我 回复“资源”获取独家整理的学习资料! 标题有点标题党的意思,但希望你在看了文章之后 ...

  7. ASP.NET 网站迁移 HTTP 错误 500.22 - Internal Server Error 检测到在集成的托管管道模式下不适用

    前提:今天要做网站迁移,把A服务器上的网站迁移到B服务器上,A服务器当时的环境是.NET 4.0 ,而B服务器是.NET2.0,A服务器IIS为6.0,B服务器IIS版本为7.0  第一步,先在B服务 ...

  8. DI 依赖注入之unity（mvc）

    DI 依赖注入之unity(使用unity.mvc) 一.nuget下载安装: 使用Nuget安装Unity.MVC 安装完成后会在~/App_Start/目录下自动生成UnityMvcActivat ...

  9. 《Linux就该这么学》培训笔记_ch12_使用Samba或NFS实现文件共享

    <Linux就该这么学>培训笔记_ch12_使用Samba或NFS实现文件共享 文章最后会post上书本的笔记照片. 文章主要内容: SAMBA文件共享服务 配置共享资源 Windows挂 ...

  10. 小程序报错 “渲染层错误” Expect END descriptor with depth 0 but get another

    项目中有几个页面在控制台出现这个“渲染层错误”,虽然不影响业务操作,怕存在潜在风险,今天抽时间找了下原因,解决这个问题. 控制台报错日志如下: (中国标准时间) 渲染层错误 Error: Expect ...