Ionic—二維碼掃描與關於模組的開發
阿新 • • 發佈:2018-12-28
一.二維碼掃描功能佈局開發
1.開發設計
- 功能需求:佈局二維碼掃描頁面
- 二維碼掃描在Ionic Native中為QS Scanner外掛,安裝如下
sudo ionic cordova plugin add cordova-plugin-qrscanner
載入與底層互動的cordova外掛sudo npm install --save @ionic-native/qr-scanner
- app.module的providers中引入QRScanner
import { QRScanner } from '@ionic-native/qr-scanner';
- 生成掃描二維碼頁面
ionic g page scan
- 在more頁面新增跳轉scan頁面的按鈕選項
2.例項程式碼
-
more.html
<ion-header> <ion-navbar> <ion-title>更多</ion-title> </ion-navbar> </ion-header> <ion-content> <div *ngIf="!isLogined"> <ion-card> <
二.二維碼掃描功能實現
1.開發設計
- 功能需求:開發二維碼掃描邏輯功能
- 開發技巧1:注意在跳轉scan掃描頁面時,navCtrl.push()的第三個引數需要設定
{"animate":false}
關閉跳轉動畫【animate的值預設為true】,實現相機能夠在整個螢幕中顯示,如果不加相機就出不來 - 為了使得掃描更加真實,首先將掃描頁面的背景設為透明,之後利用css動畫設定一條綠線上下滑動告訴使用者在掃描中
- 在控制器中編寫scan詳情邏輯:啟動QRScanner,通過回撥引數QRScannerStatus判斷是否被授權,如果被授權再監聽QRScanner的scan事件並利用alter彈框展示,如果沒有被授權或是丟擲異常則會執行其他邏輯,詳情參見Ionic-native對QRScanner的例項講解
- 當提示
scan.ts:65 Error: cordova_not_available
時,表示不能使用掃描功能,因為是用瀏覽器開啟的,當使用真機測試時則不會出現此問題 - 執行
sudo ionic build
將當前專案同步打包到所有註冊的平臺,到對應平臺測試即可
2.例項程式碼
-
more.html中新增內容
<button ion-item (click)="gotoScanQRCode()"> <ion-icon name="qr-scanner" item-start color="dark"></ion-icon> <ion-label>掃描二維碼</ion-label> </button>
-
more.ts中新增內容’
//跳轉進行二維碼掃描頁面 //一定要在第三個引數中設定關閉跳轉動畫{"animate":false},實現相機能夠在整個螢幕中顯示,如果不加相機就出不來 //animate的值預設為true gotoScanQRCode() { this.navCtrl.push(ScanPage,null,{"animate":false}); }
-
scan.html
<ion-header> <ion-navbar> <ion-title>掃描二維碼</ion-title> </ion-navbar> </ion-header> <!-- line樣式用於編寫掃描的線條效果 --> <div class="line"></div>
-
scan.scss
page-scan { //呼叫時,背景色應該完全是透明的,相機才能完全顯示在頁面 html,body,ion-app,ion-content,ion-page,.nav-decor{ //強制變成透明的 background-color: transparent!important; } //設定掃描時左右滾動的綠線 .line { position: absolute; z-index: 99999; top: 15px; height: 1px; width: 100%; background-color: #009900; //動畫 animation: scan 1s infinite alternate; -webkit-animation: scan 1s infinite alternate; } @keyframes scan { from { top: 20%; } to { top: 80%; } } }
-
scan.ts
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular'; import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner'; @Component({ selector: 'page-scan', templateUrl: 'scan.html', }) export class ScanPage { constructor( public navCtrl: NavController, public navParams: NavParams, public qrScanner: QRScanner, public alterCtrl: AlertController) { } //在頁面進入的時候就進行掃描 ionViewDidEnter() { this.scanQRCode(); } //實現掃描功能 scanQRCode() { //準備啟動QRScanner this.qrScanner.prepare() .then((status:QRScannerStatus)=>{ //返回的QRScannerStatus是掃描的狀態 //判斷是否被授權 if(status.authorized){ //如果被授權則監聽掃描 let scanSub = this.qrScanner.scan().subscribe((text:string)=>{ //設定彈框 let alter = this.alterCtrl.create({ title:'二維碼內容', subTitle: text, buttons:['OK'] }); //顯示彈框 alter.present(); //取消監聽掃描事件 scanSub.unsubscribe(); }); //顯示二維碼掃描 this.qrScanner.show(); } //設定如果沒有被授權的處理方式 else if(status.denied){ //提醒使用者許可權沒有開 } else{ //其他操作 } }) .catch((e:any)=>{ //當捕獲異常時列印異常 console.error('Error:',e); }) } }
三.關於模組的App資訊讀取
1.開發設計
- 功能需求:關於模組的資訊讀取功能開發,通過Ionic native的App Version外掛讀取專案的版本資訊
- 版本資訊讀取使用Ionic native的App Version外掛,安裝如下
sudo ionic cordova plugin add cordova-plugin-app-version
sudo npm install --save @ionic-native/app-version
- 在app.module中引入
import { AppVersion } from '@ionic-native/app-version';
,並新增到Providers中
- 生成versions顯示頁面
ionic g page versions
- 在more頁面新增跳轉到versions的邏輯
2.例項程式碼
-
more.html新增內容
<button ion-item (click)="gotoVersions()"> <ion-icon name="help-circle" item-start color="dark"></ion-icon> <ion-label>關於</ion-label> </button>
-
more.ts新增內容
//跳轉到版本頁面 gotoVersions() { this.navCtrl.push(VersionsPage); }
-
versions.html
<ion-header> <ion-navbar> <ion-title>版本資訊</ion-title> </ion-navbar> </ion-header> <ion-content> <ion-list> <ion-item> AppName : {{appName}} </ion-item> <ion-item> PackageName : {{packageName}} </ion-item> <ion-item> VersionCode : {{versionCode}} </ion-item> <ion-item> VersionNumber : {{versionNumber}} </ion-item> </ion-list> </ion-content>
-
versions.ts
import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { AppVersion } from '@ionic-native/app-version'; @Component({ selector: 'page-versions', templateUrl: 'versions.html', }) export class VersionsPage { appName:string; packageName:string; versionCode:string; versionNumber:string; constructor( public navCtrl: NavController, public appVersion: AppVersion, public navParams: NavParams) { } ionViewDidLoad() { //通過Appversion獲取軟體的版本資訊 this.appVersion.getAppName() .then(val=>{ this.appName = val; }); this.appVersion.getPackageName() .then(val=>{ this.packageName = val; }); this.appVersion.getVersionCode() .then((val:string)=>{ this.versionCode = val; }); this.appVersion.getVersionNumber() .then((val:string)=>{ this.versionNumber = val; }); } }