ionic 3

[uniquejava]

安装

npm i -g ionic 
npm i -g cordova 
npm i -g ios-deploy 
npm i -g ios-sim
ionic help start
ionic start <app_name> <template> [options]
ionic start hello tabs --no-deps --bundle-id=me.cyper.hello
然后
cnpm i
ionic serve (run in browser)
ionic cordova run ios
ionic cordova run ios -lc (livereload and redirect console.log)
ionic cordova run ios -lc --address 192.168.31.118

更多

ionic cordova platform add ios|android
ionic cordova plugin add [plugin]
ionic cordova build ios
ionic cordova run ios
ionic cordova run ios --device (force it to run on a device)
ionic cordova emulate ios
ionic g [page|component|directive|pipe|provider|tabs] NameGoesHere
ionic cordova plugin list
ionic cordova plugin rm [plugin]
ionic cordova platform rm ios

在跑ic platform add ios时出错:

cordova platform add ios --save Error: Failed to fetch platform cordova-ios@~4.5.1 Probably this is either a connection problem, or platform spec is incorrect. Check your connection and platform name/version/URL. Error: npm: Command failed with exit code 254 Error output: npm WARN checkPermissions Missing write access to hello/nodemodules/@angular_compiler-cli@5.0.1@@angular/compiler-cli/node_modules/reflect-metadata ...

解决: 重装cordova | 升级xcode到最新版 | rm -rf ~/.cordova, 参考: 1 | 重新建项目

跑ic run ios --device的时候报如下错误 Signing for "MyApp" requires a development team. Select a development team in the project editor. Code signing is required for product type 'Application' in SDK 'iOS 11.1'

解决: (把config.xml中的id改成唯一的ID), 然后重新执行, 见 2, open platforms/ios/MyApp.xcodeproj然后把bundle id改一下重选一下team, 在xcode中跑一次..

报错:

xcode-select: error: tool ‘xcodebuild’ requires Xcode, but active developer directory ‘/Library/Developer/CommandLineTools’ is a command line tools instance

解决: sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer

我的环境

➜  hello git:(master) ✗ ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.3
    Cordova Platforms  : ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2
    ios-sim    : 6.1.2
    Node       : v8.9.1
    npm        : 5.5.1
    OS         : macOS Sierra
    Xcode      : Xcode 9.1 Build version 9B55

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : legacy

[uniquejava]

Decorators

如下定义Component.

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
}

用法: <page-home />.

@Directive({
  selector: '[my-selector]'
})

用法: <some-element my-selector />

@Pipe({
  name: 'myPipe'
})

用法: {{someThing | myPipe}}

@Inejctable
export class DataService {
}

pipes, directives, injectables, components需要在app.module.ts中declare.

@IonicPage和@Component一样, 但是让Component可以lazy load.

[uniquejava]

Lazy Load

module文件: “src/pages/lazy-load/lazy-load.module.ts"

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { LazyLoad } from './lazy-load';

@NgModule({
  declarations: [
    LazyLoad,
  ],
  imports: [
    IonicModule.forChild(LazyLoad),
  ],
  exports: [
    LazyLoad
  ]
})
export class LazyLoadModule {}

component文件: “src/pages/lazy-load/lazy-load.ts"

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-lazy-load',
  templateUrl: 'lazy-load.html',
})
export class LazyLoad {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LazyLoad');
  }
}

[uniquejava]

class

class Person {
  constructor(name, age){
    this.name = name;
  }

  setAge(age) {
    this.age = age;
    return this;
  }
  isOld(){...}
}

创建一个Page

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  templateUrl: 'my-page.html',
})
// 如果在要ionic中使用service需要通过constructor inject进来.
export class MyPage {
  someMemberVariable: any = 'hey!';

  constructor(platform: Platform, nav: NavController) {
    platform.ready().then(() => {});
  }
  ionViewDidLoad() {
    //this runs once the view has loaded
  }

  someMethod(){
    //this only runs when called
  }

  someOtherMethod(){
    //this only runs when called
  }

}

对应的模板文件

<ion-header>
 <ion-navbar>
  <ion-title>
    My Page
  </ion-title>
 </ion-navbar>
</ion-header>

<ion-content>

  <ion-list>
    <ion-item>I</ion-item>
   <ion-item>Am</ion-item>
    <ion-item>A</ion-item>
    <ion-item>List</ion-item>
  </ion-list>

</ion-content>

注入Service

constructor(platform: Platform, nav: NavController) {
  this.platform = platform;
}

可以简写成

constructor(public platform: Platform, nav: NavController) {
}

创建一个Component

同创建Page, 只是selector是必选项.

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: 'my-component.html'
})
export class MyComponent {

  text: any;

  constructor() {
    this.text = 'Hello World';
  }
}

模板

<div>
  {{text}}
</div>

在app.module.ts中声明

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MyComponent
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: []
})
export class AppModule {}

最后可以在page template中这样使用自定义的component <my-component></my-component>

[uniquejava]

创建directive

“a directive is used to modify the behaviour of an existing element”

import { Directive, ElementRef } from '@angular/core';
“@Directive({
  selector: '[my-directive]'
})
export class MyDirective {
  constructor(element: ElementRef) {
    this.element = element;
  }
}

比如<button ion-button>或<ion-list no-lines>

[uniquejava]

创建pipe

为什么要加@Injectable不加会报什么错? (我发现用ionic g命令生成的pipe并没有加上这个decorator)

import { Injectable, Pipe } from '@angular/core';

@Pipe({
  name: 'myPipe'
})
@Injectable()
export class MyPipe {
  transform(value, args) {
    //do something to 'value'
    return value;
  }
}

使用: {{ someMinding | myPipe:{arg1: true, arg2: false} }}

创建Injectable或Provider

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class Data {

  data: any;

  constructor(public http: Http) {
    console.log('Hello Data Provider');
  }

  load() {

    if (this.data) {
      return Promise.resolve(this.data);
    }

    // don't have the data yet
    return new Promise(resolve => {
      // We're using Angular Http provider to request the data,
      // then on the response it'll map the JSON data to a parsed JS object.
      // Next we process the data and resolve the promise with the new data.
      this.http.get('path/to/data.json')
        .map(res => res.json())
        .subscribe(data => {
          // we've got back the raw data, now generate the core schedule data
          // and save the data for later reference
          this.data = data;
          resolve(this.data);
        });
    });
  }

}

这样声明: providers: [Data] 这样使用:

import { Component } from '@angular/core';
import { Data } from '../../providers/data';

@Component({
  selector: 'home-page',
  templateUrl: 'home.html'
})
export class MyPage {

  constructor(public dataService: Data){
  }
  method(){
    this.dataService.load().then((data) => {
      console.log(data);
    });
  }

[uniquejava]

Templates

<ion-header>
 <ion-navbar color="secondary">
  <ion-title>
    My Friends
  </ion-title>

  <ion-buttons end>
    <button ion-button icon-only (click)="doSomethingCool()"><ion-icon name="add-circle"></ion-icon></button>
  </ion-buttons>
 </ion-navbar>
</ion-header>

<ion-content>
  <ion-searchbar (input)="getItems($event)"></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let item of items">
      <ion-avatar item-left>
        <img [src]="item.picture">
      </ion-avatar>
      <h2>{{item.name}}</h2>
      <p>{{item.description}}</p>
    </ion-item>
  </ion-list>

</ion-content>