2017年7月6日 星期四

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 有分為declartionsimportsetrycomponentsprivders 等,分別代表什麼意思?
  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或二維條碼等資訊囉~  

沒有留言:

張貼留言