Ionic二维码扫描插件
系列教程看这里
Ionic2入门教程（一）安装和环境配置
Ionic2入门教程（二）进阶配置：Android打包
ionic2入门教程（三）高仿网易公开课（1）
ionic2入门教程（四）解读目录结构
ionic2入门教程（五）如何使用IonicPage
ionic2入门教程（六）地图服务（谷歌、高德、百度定位）
ionic2入门教程（七）来一个五星评分
ionic2入门教程（八）高仿网易公开课（2）
ionic2入门教程（九）样式修改和主题切换
Ionic2入门教程（十）如何debug一个Ionic应用
Ionic2入门教程（十一）制作一个视频背景欢迎页
Ionic2入门教程（十二）使用阿里巴巴矢量图标库Iconfont
0、关于插件
想在ionic2+中使用插件，要用到ionic native、官方网址如下：
https://ionicframework.com/do...
Ionic Native是一个用于Cordova / PhoneGap插件的TypeScript包装器，它可以让您在Ionic移动应用程序中添加任何您需要的本地功能。
Ionic Native其实不是插件，它是基于typeScript封装了cordova插件的调用模块，也就是说Ionic Native只是调用库，而不包含插件代码。
1、Cordova插件使用方式一：基于cordova
这种方式非常依赖cordova文档
在import之后，@Component之前加上declare的声明代码
declare let DemoPlugin: any;
通过DemoPlugin来调用相关方法2、Cordova插件使用方式二：基于ionic-native
早期的ionic-native是一个封装了全部插件调用库模块，引用一次，就会引入所有插件，很冗余。所以拆分成一个个模块。这样当装哪个cordova插件时，再装对应的native子模块。我们这里用到了就是这样的方式。基于typeScript的class概念，每个方法属性都能较清楚地看到定义和说明。
$ ionic cordova plugin add phonegap-plugin-barcodescanner
$ npm install --save @ionic-native/barcode-scanner0.1、按推荐顺序倒序排列
最近项目用到了二维码扫描的功能，个人觉得学习的过程应该是，会用，用好，会写，写好。
从用别人的插件，到自己能写出一款很好的插件，这样的过程，应该是最有意义的。
三款插件分别是barcode-scanner，zbar，qr-scanner，前两个都比较常用，但是实际上，很难用，第一个扫描时存在闪屏，速度慢，第二款速度到不错，全屏，但总觉得少了什么，因为页面上都没办法进行定制，比如说中间的小方框，上下滚动的线，终于找到了第三个qr-scanner，是通过将页面背景设置为透明，这样页面上的元素就可以完全自己设计，而且作者还将所有方法暴露出来，真正是一个很灵活的插件。
为qr-scanner打call~，虽然star不多，但我个人最喜欢这个~，不过用起来，会比较难一些~
https://github.com/bitpay/cor...
放图：
我实现了上述三种插件的使用，demo下载看这里，使用的话建议从3开始~
https://github.com/JiaXinYi/i...
注意：三个扫描插件互相会冲突，安装新的要移除前一个，移除命令为ionic cordova plugin rm
1、barcode-scanner
https://ionicframework.com/do...
$ ionic cordova plugin add phonegap-plugin-barcodescanner
$ npm install --save @ionic-native/barcode-scannerimport { BarcodeScanner } from '@ionic-native/barcode-scanner';
constructor(private barcodeScanner: BarcodeScanner) { } scan() {
let options: BarcodeScannerOptions = {
preferFrontCamera: false,//前置摄像头
showFlipCameraButton: true,//翻转摄像头按钮
showTorchButton: true,//闪关灯按钮
prompt: '扫描中……',//提示文本
formats: 'QR_CODE',//格式
orientation: 'portrait',//方向
torchOn: false,//启动闪光灯
resultDisplayDuration: 500,//显示扫描文本
disableSuccessBeep: true // iOS and Android
}
this.barcodeScanner
.scan(options)
.then((data) => {
this.barcodeData = data;
const alert = this.alertCtrl.create({
title: 'Scan Results',
subTitle: data.text,
buttons: ['OK']
});
alert.present();
})
.catch((err) => {
const alert = this.alertCtrl.create({
title: 'Attention!',
subTitle: err,
buttons: ['Close']
});
alert.present();
});2、zbar
https://ionicframework.com/do...
$ ionic cordova plugin add cordova-plugin-cszbar
$ npm install --save @ionic-native/zbarimport { ZBar, ZBarOptions } from '@ionic-native/zbar';
constructor(private zbar: ZBar) { } // 扫描
scan() {
let options: ZBarOptions = {
flash: 'off',
text_title: '扫码',
text_instructions: '请将二维码置于红线中央',
// camera: "front" || "back",
drawSight: true
};
this.zbar.scan(options)
.then(result => {
alert("结果：" + result); // Scanned code
})
.catch(error => {
alert(error); // Error message
});
}3、qr-scanner
https://ionicframework.com/do...
$ ionic cordova plugin add cordova-plugin-qrscanner
$ npm install --save @ionic-native/qr-scanner qrscan() {
// this.modalController.create('ScanPage').present();
this.navCtrl.push('ScanPage');
跳转到了scan这个页面~比较符合正常的使用方式吧~
}
.html
<ion-header>
<ion-navbar>
<ion-title>扫描中……</ion-title>
<ion-buttons start>
<button ion-button (click)="dismiss()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content no-scroll class="qrscanner">
<div class="qrscanner-area">
</div>
<div class="through-line"></div>
<div class="button-bottom">
<button (click)="toggleLight()" ion-fab class="icon-camera" margin-right>
<ion-icon name="flash"></ion-icon>
</button>
<button (click)="toggleCamera()" ion-fab class="icon-camera">
<ion-icon name="reverse-camera"></ion-icon>
</button>
</div>
</ion-content>.ts
protected light: boolean = false;
protected frontCamera: boolean = false;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private qrScanner: QRScanner,
public viewCtrl: ViewController
) {
}
ngOnInit() {
this.qrScanner.prepare()
.then((status: QRScannerStatus) => {
if (status.authorized) {
// camera permission was granted
// start scanning
let scanSub = this.qrScanner.scan().subscribe((text: string) => {
// alert(text);
this.qrScanner.hide(); // hide camera preview
scanSub.unsubscribe(); // stop scanning
});
// show camera preview
this.qrScanner.show();
// wait for user to scan something, then the observable callback will be called
} else if (status.denied) {
// camera permission was permanently denied
// you must use QRScanner.openSettings() method to guide the user to the settings page
// then they can grant the permission from there
} else {
// permission was denied, but not permanently. You can ask for permission again at a later time.
}
})
.catch((e: any) => console.log('Error is', e));
}
public dismiss(): void {
this.viewCtrl.dismiss();
}
toggleLight() {
this.light = !this.light;
if (this.light) {
this.qrScanner.disableLight();
} else {
this.qrScanner.enableLight();
}
}
toggleCamera() {
this.frontCamera = !this.frontCamera;
if (this.frontCamera) {
this.qrScanner.useBackCamera();
} else {
this.qrScanner.useFrontCamera();
}
}.scss
很做作的做了一个上下移动的横线，也不知道是受了谁家二维码扫描的影响
.qrscanner {
background: none;
&-area {
width: 100%;
height: 85%;
background: url(../assets/imgs/scanner.svg) no-repeat center center;
background-size: contain;
}
}
.through-line {
left: 20%;
width: 60%;
height: 2px;
background: red;
position: absolute;
animation: myfirst 5s linear infinite alternate;
}
@keyframes myfirst {
0% {
background: red;
top: 180px;
}
25% {
background: yellow;
top: 220px;
}
50% {
background: blue;
top: 240px;
}
75% {
background: green;
top: 260px;
}
100% {
background: red;
top: 280px;
}
}
.button-bottom {
width: 128px;
position: absolute;
left: 50%;
bottom: 80px;
margin-left: -64px;
.icon-camera {
float: left;
}
}对，就是中间这条线~用了css3的动画实现的，还蛮有意思的~
4、demo下载看这里
https://github.com/JiaXinYi/i...
还不够完善~如果你做出了更棒的，欢迎留下你的github噢~互相学习~
如果对各位有帮助的话，欢迎star，fork~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。