IONIC3的BarCodeScanner 簡易示範

  Ionic 經歷了angualr1~angualr2 終於邁向 ionic3，它的好夥伴angular 也發展到angular 4，雖然過去的來不及參與，但我們現在就可以參與最新的ionic APP的威力吧，我們就簡單的示範如何用最新的ionic3。

步驟1: 確認node.js 是否最新版

C:\Users\joyce>ionic info [WARN] You are not in an Ionic project directory. Project context may be missing. global packages:     @ionic/cli-utils : 1.0.0-rc.2     Ionic CLI        : 3.0.0-rc.2 System:     Node       : v7.10.0     OS         : Windows 10     Xcode      : not installed     ios-deploy : not installed     ios-sim    : not installed

之前無法順利升級的ionic3 原因在node.js 非最新版本，請各位多加注意

步驟2: 安裝ionic

npm install -g cordova ionic       ionic start myApp tabs cd myApp

步驟3:

ionic cordova plugin add phonegap-plugin-barcodescanner npm install –save@ionic-native/barcode-scanner

步驟4: 引用ionic 的barcodeScanner的模組

路徑: App\app.module.ts

import { NgModule, ErrorHandler } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.component'; import { BarcodeScanner } from '@ionic-native/barcode-scanner'; import { AboutPage } from '../pages/about/about'; import { BarcodePage } from '../pages/barcode/barcode'; import { HomePage } from '../pages/home/home'; import { TabsPage } from '../pages/tabs/tabs'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; @NgModule({   declarations: [     MyApp,     AboutPage,     BarcodePage,     HomePage,     TabsPage   ],   imports: [     BrowserModule,     IonicModule.forRoot(MyApp)   ],   bootstrap: [IonicApp],   entryComponents: [     MyApp,     AboutPage,     BarcodePage,     HomePage,     TabsPage   ],   providers: [     StatusBar,     SplashScreen,     BarcodeScanner,     {provide: ErrorHandler, useClass: IonicErrorHandler}   ] }) export class AppModule {}

【注意】 prviders:加入BarcodeScanner

在ionic的新框架中的app.module.ts 有分為declartions、imports、etrycomponents、privders 等，分別代表什麼意思?

declarations: [     MyApp,     AboutPage,     HomePage,     TabsPage,     BarcodePage   ],   imports: [     BrowserModule,     IonicModule.forRoot(MyApp)   ],   bootstrap: [IonicApp],   entryComponents: [     MyApp,     AboutPage,     HomePage,     BarcodePage,     TabsPage   ],   providers: [     StatusBar,     SplashScreen,     BarcodeScanner,     {provide: ErrorHandler, useClass: IonicErrorHandler}   ]

Declarations : 用來注入所有component的相關物件, 如同app.component.ts 或其客製的component.ts

EntryComponents : 根據ionic官方說法， 建立model時會事先編譯的組件，所以如果新建立componet，也會被宣告在這區塊中。

步驟5:建立一個新的分頁

ionic generate page barcode

自動在pages\產生barcode資料夾

產生的檔案

步驟6:修改barcode.html

<ion-header>   <ion-navbar>     <ion-title>barcodePage</ion-title>   </ion-navbar> </ion-header> <ion-content padding>   <button ion-button (click)="scan()">Scan</button> </ion-content>

增加Button 並加上scan的事件

步驟7:修改barcode.ts

import { Component } from '@angular/core'; import { IonicPage } from 'ionic-angular'; import { BarcodeScanner } from '@ionic-native/barcode-scanner'; /**  * Generated class for the BarcodePage page.  *  * See http://ionicframework.com/docs/components/#navigation for more info  * on Ionic pages and navigation.  */ @IonicPage() @Component({   selector: 'page-barcode',   templateUrl: 'barcode.html', }) export class BarcodePage {   constructor(private barcodeScanner: BarcodeScanner) {   }   scan(){     console.log("enter scan");       this.barcodeScanner.scan().then((barcodeData) => {       // Success! Barcode data is here       alert(barcodeData.text);     }, (err) => {       // An error occurred     });   }   ionViewDidLoad() {     console.log('ionViewDidLoad BarcodePage');   } }

這樣按下button就能自動取得QR-Code或二維條碼等資訊囉~