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> <ion-card-header text-center> Log in 'Free Skin' and experience more features... </ion-card-header> <ion-card-content text-center> <button ion-button outline (click)="presentLoginModal()"> Sign in / Sign up </button> </ion-card-content> </ion-card> </div> <div *ngIf="isLogined"> <ion-list class="marginTop0px"> <button ion-item (click)="editUserInfo()"> <ion-avatar item-start> <img [src]="avatarUrl"> </ion-avatar> <h2> {{userName}} </h2> <p>Click to edit your user info</p> </button> </ion-list> <ion-list class="marginTop10px"> <ion-list-header> 我的資訊 </ion-list-header> <button ion-item (click)="gotoDataList('question')"> <!-- 使用color屬性也可以給icon新增顏色,color中的值在theme中定義,可以直接給定顏色 --> <ion-icon name="paper" item-start color="primary"></ion-icon> <ion-label>我的直播</ion-label> </button> <button ion-item (click)="gotoDataList('favourite')"> <ion-icon name="star" item-start color="orange"></ion-icon> <ion-label>我的關注</ion-label> </button> <button ion-item (click)="gotoDataList('answer')"> <ion-icon name="disc" item-start color="secondary"></ion-icon> <ion-label>我的護膚</ion-label> </button> </ion-list> <ion-list class="marginTop10px"> <ion-list-header> 個人設定 </ion-list-header> <ion-item> <ion-icon name="cloudy-night" item-start color="purple"></ion-icon> <ion-label>夜間模式</ion-label> <!-- 左右切換小按鈕 --> <ion-toggle color="purple" (ionChange)="toggleChangeTheme()"></ion-toggle> </ion-item> <!-- 掃描二維碼功能頁面按鈕 --> <button ion-item> <ion-icon name="qr-scanner" item-start color="dark"></ion-icon> <ion-label>掃描二維碼</ion-label> </button> </ion-list> </div> </ion-content>
二.二維碼掃描功能實現
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-versionsudo 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; }); } }