Ionic1集成二维码扫描

公司的有一个项目是使用ionic开发的,最近客户提出了一个新功能:二维码扫描。我瞬间懵逼了,在原生上面实现二维码扫描是一件很容易的事情,但是自己从来没有在ionic上面使用二维码扫描,但是也没办法,默默地google,最后发现也不是那么的难,只是界面实现出来丑了点。

1、环境配置

首先需要配置jdk、sdk、cordova、node、ionic的环境变量,使用该插件还需要使用phongGap,我使用的是5.1.1版本的phoneGap(和cordova一样,自我觉得一样比较好),配置phoneGap:

npm install -g phoneGap@5.1.1

如果你不想指定版本的话,后面的@5.1.1可以不加。

2、安装插件

phonegap plugin add phonegap-plugin-barcodescanner

3、调用插件

$scope.scan = function (dispatchId) {
    cordova.plugins.barcodeScanner.scan(
      function (result) {
        if (result.wasCancelled) {
          popup.loadMsg("返回按钮回到这个页面");
        }
        alert("We got a barcode\n" +
          "Result: " + result.text + "\n" +
          "Format: " + result.format + "\n" +
          "Cancelled: " + result.cancelled);
      },
      function (error) {
        alert("Scanning failed: " + error);
      },
      {
        preferFrontCamera: false, // iOS and Android
        showFlipCameraButton: false, // iOS and Android 
        showTorchButton: true, // iOS and Android 显示开起手电筒的按钮
        torchOn: false, // Android, launch with the torch switched on (if available)  默认开启手电筒
        prompt: "请将二维码放在扫描框中", // Android 提示信息
        resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500 多久开始识别
        formats: "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
        orientation: "portrait", // Android only (portrait|landscape), default unset so it rotates with the device 垂直还是水平
        // disableAnimations : true // iOS
      }
    );
  }

4、在index.html中引入js文件。

  <script src="lib/ngCordova/dist/ng-cordova.js"></script>
  <script src="lib/ngCordova/dist/ng-cordova-mocks.js"></script>
  <script src="cordova.js"></script>

特此记录!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值