公司的有一个项目是使用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="cordova.js"></script>
github地址:传送门
特此记录!
- 我的博客:博客传送门