Ionic1集成二维码扫描

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

1、环境配置

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

npm install -g [email protected]

如果你不想指定版本的话，后面的@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文件。

github地址：传送门

特此记录！

• 我的博客：博客传送门

• 我的：传送门
• 我的CSDN：CSDN传送门
• 我的GitHub：GitHub传送门