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');
}
}
|
