二位码扫描 添加cordova_cordova 扫描二维码 - CSDN
  • cordova 二维码扫描

    千次阅读 2019-05-14 15:52:35
    1添加插件 cordova plugin add cordova-plugin-qrscanner 2创建html <!DOCTYPE html> <html> <head> <meta name="format-detection" content="telephone=no"> <meta name=...

    1添加插件

    cordova plugin add cordova-plugin-qrscanner
    2创建html

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta name="format-detection" content="telephone=no">
      <meta name="msapplication-tap-highlight" content="no">
      <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
      <link rel="stylesheet" href="../css/ercode.css">
      <title>二维码扫描</title>
      <style>
        button {
          margin: .3rem;
        }
      </style>
    </head>
    
    <body>
      <div class="app">
        <div class="qrscanner">
          <div class="qrscanner-area">
          </div>
          <div class="through-line"></div>
          <div class="button-bottom">
            <button id="btn1" class="btn btn-primary">
              手电筒
            </button>
            <button id="btn2" class="btn btn-info">
              切换摄像头
            </button>
          </div>
        </div>
    
      </div>
      <script type="text/javascript" src="../cordova.js"></script>
      <script type="text/javascript" src="../js/index.js"></script>
      <script>
        document.addEventListener("deviceready", onDeviceReady, false);
        var light = false;
        var frontCamera = false;
        function onDeviceReady() {
          if (typeof (QRScanner) != 'undefined') {
            //初始化检测,申请摄像头等权限
            QRScanner.prepare(onDone); // show the prompt
          } else {
            alert('插件加载失败');
          }
          function onDone(err, status) {
            if (err) {
              console.error(err);
            }
            if (status.authorized) {
              //绑定扫描监听
              // `QRScanner.cancelScan()` is called.
              QRScanner.scan(displayContents);
              function displayContents(err, text) {
                if (err) {
                  // an error occurred, or the scan was canceled (error code `6`)
                  alert('启动扫描出错:' + JSON.stringify(err));
                } else {
                  // The scan completed, display the contents of the QR code:
                  alert(text);
                  QRScanner.scan(displayContents);//重复扫描
                }
              }
              //开始扫描,需要将页面的背景设置成透明
              QRScanner.show();
            } else if (status.denied) {
              alert('用户拒绝访问摄像头');
            } else {
            }
          }
    
    
          //切换开启手电筒
    
          document.querySelector('#btn1').addEventListener('click', function () {
            if (light) {
              QRScanner.enableLight();
              alert('enableLight');
            } else {
              QRScanner.disableLight();
            }
            light = !light;
          });
    
    
          //切换前后摄像头
          document.querySelector('#btn2').addEventListener('click', function () {
            if (frontCamera) {
              QRScanner.useFrontCamera();
              alert('useFrontCamera');
            } else {
              QRScanner.useBackCamera();
            }
            frontCamera = !frontCamera;
          });
    
        }
      </script>
    </body>
    
    </html>

    3编译项目(android)

    此过程可能出错,不要着急根据提示信息一步步来,

    我主要的问题有:

    a编译版本问题

    b摄像头权限声明重复

    c依赖方式 compile 换成 implementation

               d.  js文件夹下index.js自动生成的代码报错了,receivedEvent方法中报null了判空处理以下就可以了

     

     

    展开全文
  • 扫描二维码在此说明,cordova打包6.3版本以前的Android是可以的,本人用cordova测试7.0,未成功,以下是6.0的教程1.进入插件网站搜索扫描二维码插件 BarcodeScanner 找到如图选项,打开连接2.打开页面中找到如下图所...

    cordova插件网址

    http://cordova.apache.org/plugins/?platforms=cordova-android

    一.扫描二维码

    在此说明,cordova打包6.3版本以前的Android是可以的,本人用cordova测试7.0,未成功,以下是6.0的教程

    1.进入插件网站

    搜索扫描二维码插件  BarcodeScanner  找到如图选项,打开连接


    2.打开页面中找到如下图所示,在cmd中运行如图命令,选一个就好,添加二维码插件


    3.打开页面中找到如下图所示,把下图内容放在js里面,在需要的地方调用,我测试时实在音量上下键触发的调用摄像头扫二维码,记得在html中引入cordova.js文件


    展开全文
  • 这个是我自己写的cordova的插件。 主要是实现的功能是从本地图库选图片,根据选择的图片来判断是否含有二维码。 如果有,直接识别并返回信息,如有没有,会提示图片格式错误。 解压后,大家可以直接添加cordova...
  • 这是一个用来扫描二维码cordova插件,在做项目的时候想实现类似于微信的扫一扫功能,就想到了cordova的$cordovaBarcodeScanner插件,用很少量的代码就可以实现了,下面来看一下具体的实现步骤: 扫描二维码: ...

    这是一个用来扫描二维码的cordova插件,在做项目的时候想实现类似于微信的扫一扫功能,就想到了cordova的$cordovaBarcodeScanner插件,用很少量的代码就可以实现了,下面来看一下具体的实现步骤:

    • 扫描二维码:

    1、首先需要有一个简单的项目,然后在命令行输入添加插件的命令:

    cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git

    2、在HTML中的代码如下,就是写了一个ng-click事件来触发此功能:

    <div class="card">
      <div class="item">
        <button class="button button-block button-positive" ng-click="scanStart()">
          <i class="icon ion-qr-scanner"></i>
          Scan Now
        </button>
      </div>
    </div>
    <div class="card">
      <div class="item item-divider">Scan Results</div>
      <div class="item item-text-wrap">
        {{barcodeData}}
      </div>
    </div>

    3、在JS中的代码如下,这个代码写在相应的控制器里并且依赖‘$cordovaBarcodeScanner’,记得在app.js里依赖‘ngCordova’,:

    $scope.scanStart = function () {
     
      $cordovaBarcodeScanner
        .scan()
        .then(function (barcodeData) {
          alert(barcodeData);
          $scope.barcodeData = barcodeData;
          // Success! Barcode data is here
        }, function (error) {
          alert('失败')
          // An error occurred
        });
    };

    4、这样子就可以运行到手机上来扫描了,但是在实现了扫描的功能之后还有一个问题,如果是类似于微信的扫描的话,还需要生成属于自己的二维码,这个我看了下ngCordova的官方文档(http://ngcordova.com/docs/plugins/barcodeScanner/),文档中有这个功能的代码,但是现在似乎是不完善,所以用不了!!因此,我就找了一些用js生成二维码的方法。

    • 生成二维码:

    1、需要下载qrcode.js和jquery.js,可以到网上随便找有很多,这里提供一下可以下载的地方(https://github.com/davidshimjs/qrcodejs/),下载到本地之后引入到项目中

    2、相关HTML的代码如下:

    <div id="qrcode">
    </div>

    3、相关JS的代码如下:

    var qrcode = new QRCode(document.getElementById("qrcode"), {
      width: 96,//设置宽高
      height: 96
    });
    qrcode.makeCode("http://www.baidu.com");

     快来试一下吧,这样子就生成了独一无二的二维码了,不过我还是期待codova官方的插件啊,希望早一点能用!


    原文链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-2-cordovabarcodescanner/

    展开全文
  • zxing二维码扫描功能

    2017-04-10 19:05:08
    经常要用到二维码扫描功能 现给出示例代码 import com.google.zxing.WriterException; import com.zxing.activity.CaptureActivity; import com.zxing.encoding.EncodingHandler; import android.app....
    经常要用到二维码扫描功能
    
    现给出示例代码

    
    import com.google.zxing.WriterException;
    import com.zxing.activity.CaptureActivity;
    import com.zxing.encoding.EncodingHandler;
    
    import android.app.Activity;
    import android.content.Intent;
    import android.graphics.Bitmap;
    import android.os.Bundle;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.widget.Button;
    import android.widget.EditText;
    import android.widget.ImageView;
    import android.widget.TextView;
    import android.widget.Toast;
    
    public class BarCodeTestActivity extends Activity {
        /** Called when the activity is first created. */
    	private TextView resultTextView;
    	private EditText qrStrEditText;
    	private ImageView qrImgImageView;
    	
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            
            resultTextView = (TextView) this.findViewById(R.id.tv_scan_result);
            qrStrEditText = (EditText) this.findViewById(R.id.et_qr_string);
            qrImgImageView = (ImageView) this.findViewById(R.id.iv_qr_image);
            
            Button scanBarCodeButton = (Button) this.findViewById(R.id.btn_scan_barcode);
            scanBarCodeButton.setOnClickListener(new OnClickListener() {
    			
    			@Override
    			public void onClick(View v) {
    				//打开扫描界面扫描条形码或二维码
    				Intent openCameraIntent = new Intent(BarCodeTestActivity.this,CaptureActivity.class);
    				startActivityForResult(openCameraIntent, 0);
    			}
    		});
            
            Button generateQRCodeButton = (Button) this.findViewById(R.id.btn_add_qrcode);
            generateQRCodeButton.setOnClickListener(new OnClickListener() {
    			
    			@Override
    			public void onClick(View v) {
    				try {
    					String contentString = qrStrEditText.getText().toString();
    					if (!contentString.equals("")) {
    						//根据字符串生成二维码图片并显示在界面上,第二个参数为图片的大小(350*350)
    						Bitmap qrCodeBitmap = EncodingHandler.createQRCode(contentString, 350);
    						qrImgImageView.setImageBitmap(qrCodeBitmap);
    					}else {
    						Toast.makeText(BarCodeTestActivity.this, "Text can not be empty", Toast.LENGTH_SHORT).show();
    					}
    					
    				} catch (WriterException e) {
    					// TODO Auto-generated catch block
    					e.printStackTrace();
    				}
    			}
    		});
        }
    
    	@Override
    	protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    		super.onActivityResult(requestCode, resultCode, data);
    		//处理扫描结果(在界面上显示)
    		if (resultCode == RESULT_OK) {
    			Bundle bundle = data.getExtras();
    			String scanResult = bundle.getString("result");
    			resultTextView.setText(scanResult);
    		}
    	}
    }
    


    注册CaptureActivity.java
    <activity
      android:configChanges="orientation|keyboardHidden"
      android:name="com.zxing.activity.CaptureActivity"
      android:screenOrientation="portrait"
      android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
      android:windowSoftInputMode="stateAlwaysHidden" >
    </activity>
    


    添加两个权限,振动&照相机
    
    <uses-permission android:name="android.permission.CAMERA"/>
    <uses-permission android:name="android.permission.VIBRATE"/>
    


    详情见附件


    QRCodeReaderView 是基于 ZXING 条形码扫描工具项目改进,为了在肖像模式和增强现实目的下进行更简单的 Android 二维码检测。此项目可以在相机的预览中显示是否有二维码。
    http://www.open-open.com/lib/view/open1446534728935.html


    android Zxing扫描二维码
    1:工程中需要引入android-support-v7-appcompat
    2:扫描界面现在做的效果是四个角在框的外面,如果需要改变二维码扫描的框,可以通过修改ViewfinderView类的onDraw方法来实现不同的效果。
    3:项目中现在已经集成了从相册中扫描图片二维码,生成我的二维码,如果你的项目中不需要用到这些,可以去CaptureActivity类中删除相应的代码即可。
    4:生成我的二维码那块,现在默认写成了我的名字,如果需要修改的话可以通过传参数的形式来实现要生成的二维码。
    https://github.com/gexingfeiyang/TestForMyCapture
    展开全文
  • 最近在做一些混合式的APP开发,主要用到了ionic+...现在在团队中主要负责一些cordova调用底层硬件设备的插件的用法比如:调用通讯录、调用拨号功能、定位、调用摄像头扫描二维码。好了重点来了!这篇文章就是调用cordova
  • 二维码扫描功能布局开发 1.开发设计 功能需求:布局二维码扫描页面 二维码扫描在Ionic Native中为QS Scanner插件,安装如下 sudo ionic cordova plugin add cordova-plugin-qrscanner加载与底层交互的cordova插件 ...
  • 扫描二维码插件:cordova-plugin-cszbar 不多BB直接上代码 $scope.isScanning = false; $scope.scanStart = function () { if ($scope.isScanning) { return; } $scope.isScanning = true; c
  • ionic集成二维码扫描

    2017-03-31 17:37:25
    由于下个ionic项目需要用到二维码扫描,就提前研究了,为了快速开发,选择使用优秀的第三方。 在网上看许多人都介绍了...2,添加二维码扫描的插件(如果使用VS,可以直接在插件中安装),cordova安装插件的命令:
  • ZBar二维码扫描

    千次阅读 2013-03-29 15:03:25
    ZBar是一个开源库,用于扫描、读取二维码和条形码。支持的二维码包括:EAN/UPC,QR等。可以扫描含有链接的二维码,...对二维码扫描要在真机测试。 要添加的库 QuartzCore.framework/CoreVideo.framework/Core
  • cordova-plugin-barcodescanner 插件安装
  • ionic angular app添加二维码扫描功能

    千次阅读 2015-12-14 22:48:01
    添加二维码功能采用的是:ngcordova 官方网站:http://ngcordova.com/ 使用方式:下载ngcordova GitHub地址:https://github.com/driftyco/ng-cordova 官网地址::http://ngcordova.com/ 1、将ng-...
  • 以android平台为例,IDE使用 android-studio(因为需要引用aar文件)...当我们按照cordova官方说明为cordova项目添加 phonegap-plugin-barcodescanner 插件后,我们发现libs目录下多了一个 barcodescanner.aar 文件
  • 开源软件 https://github.com/phonegap/phonegap-plugin-barcodescanner 可以支持各种类型的扫描,包括二维码等等…… QR Code Data Matrix UPC E UPC A EAN 8 EAN 13 Code 128 ...
  • phonegap的二维码扫描功能的实现

    千次阅读 2017-01-07 16:56:08
    1、我使用的phonegap版本是2.9.1,不太了解phonegap3.0以后的版本,不过可以保证的是phonegap2.0.0之后的按照下面的方法来实现二维码是没有问题的。 2、phonegap的插件都是放在github上托管的,到...
  • 最近公司要求用cordova插件处理二维码(基于android平台),查阅了各种资料,简单实现了效果,现将其记录下来,希望对新手有所帮助。至于cordova的安装需要借助于npm包管理工具,可自行Google第一步:进入cmd第二步...
  • 最近没事做了下二维码扫描,用的是ZXing的开源代码,官方源码地址:http://code.google.com/p/zxing/downloads/list; 我是在ZXing2.2基础上做的,因此只下载了ZXing-2.2.zip; 此外还需要ZXing的核心Jar包,下载...
  • Ionic ngcordova 二维码扫描

    千次阅读 2016-05-17 19:17:06
    ionic 中ngcordova提供二维码扫描功能 二维码插件 http://ngcordova.com/docs/plugins/barcodeScanner ionic corodova nodejs bower 的安装方法网上有教程,下面是各个模块的版本 版本号 下面开启项目之旅 1、...
  • Vue基于Cordova调用扫一扫

    千次阅读 热门讨论 2018-10-18 10:09:52
    Vue基于Cordova调用扫一扫 Vue使用Cordova打包的app如何调用扫一扫功能?在这里简单描述一下过程 Vue层面代码 1.在某个.vue里面添加下面代码 &lt;template&gt; &lt;div id="app"&gt; &...
1 2 3 4 5 ... 19
收藏数 367
精华内容 146
关键字:

二位码扫描 添加cordova