1.  
  1. 之前在记录扫码 在安卓时，会出现黑屏，错位，闪退等等问题。解决方法在另一篇文章里 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页面上

  1.     let ws = plus.webview.create("./camera.html", "camera");
  2.           ws.show();
  3.           ws.addEventListener(
  4.             "loaded",
  5.             function() {
  6.               //页面加载完成后才显示
  7.               setTimeout(function() {
  8.                 ws.show();
  9.               }, );
  10.             },
  11.             false
  12.           );
  13.           ws.addEventListener(
  14.             "close",
  15.             function() {
  16.               ws = null;
  17.             },
  18.             false
  19.           );

camera.html页面上

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>camera</title>
  9.     <style>
  10.         html,
  11.         body,
  12.         div,
  13.         span,
  14.         img {
  15.             margin: ;
  16.             padding: ;
  17.         }
  18.  
  19.         body {
  20.             background: #;
  21.         }
  22.  
  23.         .tips {
  24.             margin-top: %;
  25.             color: #fff;
  26.             text-align: center
  27.         }
  28.  
  29.         .action {
  30.             position: fixed;
  31.             z-index: ;
  32.             width: %;
  33.             left: ;
  34.             bottom: ;
  35.  
  36.         }
  37.  
  38.         .action .items {
  39.             display: flex;
  40.             justify-content: space-around;
  41.             background: rgba(, , , 0.35);
  42.             width: %;
  43.             padding: 4px;
  44.             margin: 4px auto;
  45.  
  46.         }
  47.  
  48.         .action .items .item {
  49.             flex-basis: 50px;
  50.             text-align: center;
  51.  
  52.         }
  53.  
  54.         .action .items img {
  55.             width: 27px;
  56.         }
  57.     </style>
  58. </head>
  59.  
  60. <body>
  61.     <div id="camera">
  62.         <div id="scan"></div>
  63.         <div class="tips">加载中...</div>
  64.  
  65.         <div class="action">
  66.             <div class="items">
  67.                 <div class="item" onclick="openLight"><img src="./src/assets/img/png-60@3x.png"></div>
  68.                 <div class="item" onclick="getPicture"><img src="./src/assets/img/png-59@3x.png"></div>
  69.                 <!-- <div
  70.                 class="item"
  71.                 @click="showInput"
  72.               ><img src="../assets/img/png-68@3x.png">
  73.               </div> -->
  74.                 <div class="item" onclick="cancelScan"><img src="./src/assets/img/png-61@3x.png"></div>
  75.                 <!-- <d class="item"><img src="../../assets/img/png-25@3x.png"></d -->
  76.             </div>
  77.         </div>
  78.     </div>
  79.  
  80. </body>
  81. <script>
  82.  
  83.     var isLight = false, scan = null;
  84.     // 打开闪光灯
  85.     function openLight() {
  86.         isLight = !isLight;
  87.         scan.setFlash(isLight);
  88.     }
  89.  
  90.     //创建扫描控件
  91.     function startRecognize() {
  92.         if (!window.plus) return;
  93.         scan = null;
  94.         scan = new plus.barcode.Barcode(
  95.             "scan",
  96.             [plus.barcode.QR, plus.barcode.EAN8, plus.barcode.EAN13],
  97.             {
  98.                 frameColor: "#1294cb",
  99.                 scanbarColor: "#1294cb",
  100.                 top: "100px",
  101.                 left: "0px",
  102.                 width: "100%",
  103.                 height: "500px",
  104.                 position: "fixed"
  105.             }
  106.         );
  107.         // 条码识别成功
  108.         scan.onmarked = onmarked;
  109.         function onmarked(type, result, file) {
  110.             result = result.replace(/\n/g, "");
  111.             localStorage.setItem("cameraData", result);
  112.             let ws = plus.webview.getWebviewById("camera");
  113.             ws.close()
  114.         }
  115.     }
  116.     // //开始扫描
  117.     function startScan() {
  118.         if (!window.plus) return;
  119.         startRecognize(); //创建控件
  120.         setTimeout(() => {
  121.             scan.start();
  122.         }, );
  123.     }
  124.     // 取消扫描
  125.     function cancelScan() {
  126.         if (!window.plus) return;
  127.         plus.navigator.setStatusBarStyle("dark");
  128.         if (scan) {
  129.             scan.cancel(); //关闭扫描
  130.             scan.close(); //关闭条码识别控件
  131.         }
  132.         let ws = plus.webview.getWebviewById("camera");
  133.         ws.close()
  134.     }
  135.     // 从相册选取二维码相片
  136.     function getPicture() {
  137.         plus.gallery.pick(src => {
  138.             // scan.cancel(); //关闭扫描
  139.             plus.barcode.scan(
  140.                 src,
  141.                 (type, result) => {
  142.                     scan.cancel(); //关闭扫描
  143.                     scan.close();
  144.                     localStorage.setItem("cameraData", result);
  145.                     plus.navigator.setStatusBarStyle("dark");
  146.                     let ws = plus.webview.getWebviewById("camera");
  147.                     ws.close()
  148.                 }
  149.             );
  150.         });
  151.     }
  152.  
  153.     window.onload = function () {
  154.         setTimeout(() => {
  155.             plus.navigator.setStatusBarStyle("dark");
  156.             startScan()
  157.         }, );
  158.     }
  159. </script>
  160.  
  161. </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. shell脚本如何判断文件大小

    转自:https://blog.csdn.net/lovegengxin/article/details/80762329 1 .ls -lls -l $filename | awk '{print ...

  2. 重新学习Spring注解——servlet3.0

    53.servlet3.0-简介&测试 54.servlet3.0-ServletContainerInitializer 55.servlet3.0-ServletContext注册三大组件 ...

  3. 洛谷 CF997A Convert to Ones

    洛谷 CF997A Convert to Ones 洛谷传送门 题意翻译 给你一个长度为 nn 的01串( n \leq 310^5n*≤3∗105 ),你有两种操作: 1.将一个子串翻转,花费 XX ...

  4. 小学四则运算口算练习app---No.2

    经过昨天的了解,虽然还是很懵,总要下手摸到鼠标来写第一个页面! 这是一开始设置出体数目和时间的页面,使用者根据提示进行相关设置即可! 代码如下: <?xml version="1.0& ...

  5. webpack的一些坑

    最近自己着手做一个小的Demo需要webpack,目前版本号是4.41.2,想使用的版本是3.6.0,因3x版本和4x版本很多地方不同,所以在安装过程中也是很多坎坷,下面是遇到的一些坑,和一些解决办法 ...

  6. MySQL5.7调优参数

    1. 更改MySQL Data File位置 datadir=/data/mysqlsocket=/data/mysql/mysql.sock 2. 调整OS参数 * soft nproc 10240 ...

  7. LeetCode 717. 1比特与2比特字符(1-bit and 2-bit Characters)

    717. 1比特与2比特字符 LeetCode717. 1-bit and 2-bit Characters 题目描述 有两种特殊字符.第一种字符可以用一比特0来表示.第二种字符可以用两比特(10 或 ...

  8. golang微服务框架go-micro 入门笔记2.4 go-micro service解读

    本章节阐述go-micro 服务发现原理 go-micro架构 下图来自go-micro官方 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go- ...

  9. Scala 函数式编程

    将函数赋值给变量 // Scala中的函数是一等公民,可以独立定义,独立存在,而且可以直接将函数作为值赋值给变量 // Scala的语法规定,将函数赋值给变量时,必须在函数后面加上空格和下划线 def ...

  10. Java学习：JDBC快速入门

    本节类容 JDBC基本概念 快速入门 JDBC基本概念 概念: Java DataBase Connectivity Java 数据库连接,Java语言操作数据库 JDBC本质: 其实是官方(sun公 ...