使用Ionic3开发混合APP的架构设计总结

Ionic在2017年3月7号在其官方博客宣布 Ionic3 正式版本发布,采用最新的Angular4,和以往一样的scss,Ionic3和2版本的主要区别就是对懒加载的全面使用。在使用Ionic2的时候,如果应用比较大,将所有的component,directives,pipes,services通通塞到app.module.ts里面,总会让我们感到不太雅观,也不便于代码管理维护,同时在打开应用的时候必然造成等待时间过长,3版本发布,就是为了解决这些问题,它也确实解决了一些问题,但是Ionic3绝不是完美的,它也带来了一些尴尬的问题。

一)懒加载

Ionic3默认采用懒加载机制,什么是懒加载呢?当我们第一次进入应用,会加载app.module,如果没有采用懒加载,那么app.module里的所有东西都会被加载,很显然这是不太合适的,因为里面的组件和服务我们在第一次进入应用时并没有全部使用,可能只使用了很少的一部分,那么对于比较大型的应用来说,由于页面和其他的服务,指令,管道比较多,就会造成比较用户体验不好的影响。 
这个时候我们需要把应用分为一个个module,各自引入自己用到的东西,不要管别的模块。那么第一次进入应用,就只加载很少的app.module和root page对应的module,当我们进入其他页面的时候,才会去加载相应的module。这样的好处是项目代码结构清晰,易于维护,易于开发,而且第一次加载速度比较快。 
当我们使用Ionic3的CLI来新建页面,默认的会是懒加载的结构,甚至不止页面,所有的component,service,directive都默认的是懒加载。 
这里写图片描述 
Ionic3采用IonicPage()和IonicPageModule引入了一个新的概念——page,我们通过CLI新建的Page可以通过很简单的方式来跳转:

      this.navCtrl.push('DeviceListPage', {marker: deviceSourceData});
 
 
  • 1

不需要像Ionic2那样引入组件,只需要使用引号,里面写上页面名字,就可以实现跳转,这是因为IonicPageModule将这个页面Module声明过了:

       IonicPageModule.forChild(DeviceListPage),
 
 
  • 1

二)动态加载组件

这样的确是简化了页面跳转的工作,但是当我们想跳转到某个组件,或者使用某个组件呢?比如说使用ModalController或者PopoversController,我们知道在Ionic2需要传入组件,在当前页面引入Modal Component之后:

    let modal = this.modalCtrl.create(GuideFileListModalComponent);
    modal.present();
 
 
  • 1
  • 2

但是在Ionic3里面如果我们想要在某个module里面这样使用,需要将使用这个组件的Module在app.module.ts里import,然后将Modal Component放到当前module里声明然后引入进entryComponents。

@NgModule({
  declarations: [
    SelectionGuidePage,SearchSelectionGuideModalComponent,GuideFileListModalComponent
  ],
  imports: [
    IonicPageModule.forChild(SelectionGuidePage),
    FootTabBarComponentModule,
    SharedLazyModule,
    AccordionModule
  ],
  entryComponents:[SelectionGuidePage,SearchSelectionGuideModalComponent,GuideFileListModalComponent],
  exports: [
    SelectionGuidePage
  ],
})
export class SelectionGuidePageModule {}

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

以上代码里的SearchSelectionGuideModalComponent和GuideFileListModalComponent是我需要动态加载的组件,SelectionGuidePageModule是引用他们的module,这里的SelectionGuidePageModule就需要在app.module里面import,同时我们注意到这里SelectionGuidePage是进行动态加载modal的component,也在entryComponents列表里面。 
另外一种进行动态加载组件的更加简单的方式是将你的Modal Component使用IonicPage装饰器,将这个Component推入page栈里。受益于Ionic3提供的便利之处,不需要在当前页面引入Modal Component,直接使用动态组件的名称字符串作为参数传入即可。

    let modal = this.modalCtrl.create('GuideFileListModalComponent');
    modal.present();
 
 
  • 1
  • 2

可以想象,如果我们想要在Ionic3里面像一般的Angular2 Web 应用那样在module里面配置自己的路由机制,或者想给一个页面设置子页面,就像Angular2里的路由children属性,是比较困难的,Ionic官博说Ionic4会主要解决这样的页面之间的路由问题。 
当然,还有另外一种场景下,使用懒加载的方式加载组件是很好的,就是只在模板html里面使用组件,并不是动态添加进来,比如有一个Page,里面的内容比较多,我把它写成了很多组件,每个组件有自己的Input和Output:

<div class="device-detail-monitor-content">
      <device-detail-monitor  *ngSwitchCase="'device-monitor'" [theDeviceData]="deviceMonitorData"></device-detail-monitor>

    </div>
    <div class="device-detail-time-content">
      <device-detail-time  *ngSwitchCase="'device-time'"
                           [ChartData]="timePieSingleChart"
                           [TimeLineChart]="timeLineChart"
                           [TimeInterval]="timeAnalysisInterval"
                           (selectTimeInterval)="changeTimeAnalysisInterval($event)"
      ></device-detail-time>
    </div>

    <div class="device-detail-production-content">
      <device-detail-production *ngSwitchCase="'device-production'"
                                [ChartData]="productionLineChart.Data"
                                [ChartOptions]="productionLineChart.Options"
                                [TimeInterval]="timeAnalysisInterval"
                                (selectProductionInterval)="changeProductionAnalysisInterval($event)"
      ></device-detail-production>
    </div>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

这些组件都有各自的module,因此我在这个页面把他们全都引入就可以了:

import {DeviceDetailMonitorComponentModule,
  DeviceDetailTimeComponentModule,
  DeviceDetailProductionComponentModule,
  FootTabBarComponentModule} from '../../components/index';
 
 
  • 1
  • 2
  • 3
  • 4

Ionic3这种懒加载机制会带来一个问题,就是所有的页面在第一次进来没有加载,只有在你点击进入某个页面,它的module才会加载,这个过程会有几秒钟的时间(加载自己module的过程),在浏览器上测试的时候没有这个问题(可能计算机的处理速度比手机要快),在真机上会给人一种我点击了之后没有反应的感觉,用户体验不好。这个问题的解决办法就是:把这些需要第一次进来就加载的module在app.module里面import进来。

三)插件

另外和2相比,使用cordova插件的方式也有所变化,不再是一次性安装,而是使用哪个安装哪个,比如:

import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import {Device} from '@ionic-native/device';
import {AppAvailability} from '@ionic-native/app-availability';
 
 
  • 1
  • 2
  • 3
  • 4

而且在3里面他们全都成了服务,你还需要在app.module的providers属性声明一下:

   providers: [
    StatusBar,SplashScreen,Device, AppAvailability, Transfer, File,FileOpener,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
    ]
 
 
  • 1
  • 2
  • 3
  • 4

此外,在你更新ionic cli的版本之后,还需要更新ionic cordova cli和ionic plugin cli,在build和run的过程上没有太大变化,不过所有的命令行都从以前的ionic XXXX变为了ionic cordova XXXX,可能cordova对ionic对他们的宣传不足有意见吧。 
在开发过程中,国内基本没有Ionic3的资料,连Ionic2都比较少,因此查问题,找解决办法,推荐使用英文搜索,Ionic官方论坛的帖子,还有ionic team github上的issue,还有官方博客,发布的频率比较低,不过每一篇都是精品,必须仔细研读。 
总的来说,Ionic3还是比2进步的,只不过有些新带来的问题还要解决才能更好,期待Ionic4的发布。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值