Ionic 混合应用开发：从 H5 到跨平台 App 的演进之路

// 3.0 之前：全量加载
@NgModule({
  declarations: [MyPage, OtherPage, AnotherPage]
})

// 3.0 之后：按需加载
@IonicPage({
  segment: 'my-page',
  name: 'MyPage'
})
@Component({
  template: '...'
})
export class MyPage {}

// 创建 Ionic Native 封装
import { Plugin, Cordova, IonicNativePlugin } from '@ionic-native/core';

@Plugin({
  pluginName: 'MyPlugin',
  plugin: 'com.example.myplugin',
  pluginRef: 'cordova.plugins.MyPlugin'
})
export class MyPlugin extends IonicNativePlugin {
  @Cordova()
  coolMethod(message: string): Promise<string> {
    return;
  }
}

// 在模块中提供
@NgModule({
  providers: [MyPlugin]
})
export class AppModule {}

// 在页面中使用
constructor(private myPlugin: MyPlugin) {}

async testPlugin() {
  try {
    const result = await this.myPlugin.coolMethod('Hello Plugin');
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

import { CodePush } from '@ionic-native/code-push';

@NgModule({
  declarations: [AppComponent],
  imports: [IonicModule.forRoot(AppComponent)],
  bootstrap: [IonicApp],
  entryComponents: [AppComponent],
  providers: [
    { provide: ErrorHandler, useClass: IonicErrorHandler },
    CodePush
  ]
})
export class AppModule {}

// 检查更新
constructor(private codePush: CodePush) {}

ionViewDidLoad() {
  this.codePush.sync().subscribe((status) => {
    console.log('更新状态', status);
  });
}

@Component({
    selector: 'animation-elements',
    template: `
    <div class="animation-container">
        <city-sky-wheel></city-sky-wheel>
        <blue-fly-balloon></blue-fly-balloon>
        <city-building></city-building>
        <red-fly-balloon></red-fly-balloon>
        <city-flight></city-flight>
        <city-trees></city-trees>
        <city-cloud></city-cloud>
        <map-cloud></map-cloud>
        <city-train></city-train>
        <city-bus></city-bus>
        <city-car></city-car>
    </div>`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class AnimationElementsComponent {
    constructor() {}
}

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HomePage {
  // OnPush 策略减少不必要的变更检测，提升性能
}

@Injectable()
export class AudioPlayerService {
    constructor(
        private _nativeAudio: NativeAudio,
        private _appGlobalsService: AppGlobalsService,
    ) {}

    init() {
        // 预加载所有音效资源
        _.each(this._appGlobalsService.AUDIO_RESOURCES, obj => {
            this._nativeAudio.preloadComplex(obj.KEY, obj.PATH, 1, 1, 0);
        });
    }

    play(key: string) {
        if (!this._appGlobalsService.SESSION.soundEffectDisable) {
            this._nativeAudio.play(key);
        }
    }

    loop(key: string) {
        if (!this._appGlobalsService.SESSION.soundEffectDisable) {
            this._nativeAudio.loop(key);
        }
    }

    stop(key: string) {
        this._nativeAudio.stop(key);
    }
}

// 发布事件
this._events.publish('Notice_Main_Add', {
    chattype: NoticeCountType.WaBao,
    message: 'New message'
});

// 订阅事件
this._events.subscribe('Notice_Main_Add', (res) => {
    switch (res.chattype) {
        case NoticeCountType.WaBao:
            this.waBaoMsgCount += 1;
            break;
        case NoticeCountType.MaiBao:
            this.maiBaoMsgCount += 1;
            break;
    }
});

@Injectable()
export class BaiduMapService {
    private map: any;

    initMap(mapElement: HTMLElement) {
        this.map = new BMap.Map(mapElement);
        this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);

        // 添加地图控件
        this.map.addControl(new BMap.NavigationControl());
        this.map.addControl(new BMap.ScaleControl());
    }

    addMarker(point: BMap.Point, options: any) {
        const marker = new BMap.Marker(point);
        this.map.addOverlay(marker);
        return marker;
    }
}

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

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

  constructor() { }

  ngOnInit() {
    console.log('组件初始化完成');
  }

  ionViewDidLoad() {
    console.log('页面加载完成');
  }

  ionViewWillEnter() {
    console.log('页面即将进入');
  }

  ionViewDidEnter() {
    console.log('页面已进入');
  }

  ionViewWillLeave() {
    console.log('页面即将离开');
  }

  ionViewDidLeave() {
    console.log('页面已离开');
  }

  ionViewWillUnload() {
    console.log('页面即将销毁');
  }
}

import { NavController } from 'ionic-angular';

export class HomePage {
  constructor(public navCtrl: NavController) { }

  // 推入新页面
  goToDetail() {
    this.navCtrl.push(DetailPage, {
      id: 1,
      name: 'Item'
    });
  }

  // 返回上一页
  goBack() {
    this.navCtrl.pop();
  }

  // 设置根页面
  setRoot() {
    this.navCtrl.setRoot(HomePage);
  }
}

import { Camera, CameraOptions } from '@ionic-native/camera';

export class PhotoPage {
  constructor(private camera: Camera) { }

  takePicture() {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    };

    this.camera.getPicture(options).then(
      (imageData) => {
        let base64Image = 'data:image/jpeg;base64,' + imageData;
      },
      (err) => {
        console.error('拍照失败', err);
      }
    );
  }
}

// main.ts - 启用生产模式
import { enableProdMode } from '@angular/core';

enableProdMode();

// 使用虚拟滚动
<ion-virtual-scroll [items]="items">
  <div *ngFor="let item of items">
    
  </div>
</ion-virtual-scroll>