ionic4 混合移动开发 （前世今生）

ionic 从2016年初识，经历了 ionic2 ionic3。至今 ionic4，终于在2018年7月份发布了测试版。

ionic Framework 可以说得上是最接近原生app的ui组件，漂亮的ui组件，强大的cli，兼容性强，可以说得上是webapp众多ui组件中最好的。而且创建项运行项目非常简单。当年作为一个半路出家的前端，都能够创建并跑起来一个项目，即使我不懂什么angular2 不懂什么webpack脚手架，小菜鸡一个，你也能从中一点点做起来。

ionic1在初创的时候他的初衷就是构建一个UI框架，可以任何Web开发人员选择的任何技术都可以使用这套ui框架。当时他们选择Angularjs作为其强大的组件API，当然谁能知道捏，前端百花齐放。我们所知道的前端三大主流框架分别是React、Vue、Angular，而它太依赖angular了。直到ionic4的发布才可以说ionic tream 这才实现了它的初衷。ionic4完全包含现代Web API，如Custom Elements，CSS Variables和Shadow DOM。而且完全与框架无关。现在的ionic4，无论你使用什么前端工具或框架，你都可以用它，优秀不。

Ionic 2发布的时候，那会Angular CLI 的构建工具以及路由及其不稳定，在ionic2，3的时候，ionic tream自己构建了不少工具以及路由也不是用angular的，而是用ionic自己那一套的路由Push/Pop。而如今 angular已经很强大了，从Ionic 4开始，所以ionic4完全接受Angular CLI和路由器！可以更好的去专注于组件，而不是更多的不必要的复杂工具。

目前，Ionic Framework已与angular 正式集成，但对Vue和React的支持正在开发中。期待。。。。

下面简单总结个人对ionic3 与 ionic4的差异性对比

1.结构的变化

在ionic3 新建项目 ionic start myApp，虽然说ionic跟angular是搭配着来用的，可是ionic3的目录结构跟angular的目录结构是不一样的，包括现在如果你新建ionic4项目 是这样的 ionic start myApp tabs --type=angular ，后面多了个type=angular ，截止今日ionic4还处于BETA，maybe 后面会出 type=vue type=react。

而新建的目录结构也跟angluar一样了。ionic3是封装了angular项目，而是ionic4直接就是一个angular项目，而且默认懒加载。

而且以前是默认搭配cordova，现在你可以自由的选择。说实话捏，作为保守派虽然ionic tream 搞的capacitor不错，但是在生产环境下还是不敢使用，而且只支持Android 5.0+。。。。

ionic start myApp tabs --cordova
ionic start myApp tabs --capacitor

2.路由

既然整一个目录结构都跟angular一样了，那么路由呢，是不是走angular自己的路由了，没错。

而且你还可以直接用angular-cli创建一个angular项目在去添加@ionic/core模块。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

tabs.page.html

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

ionic4你可以使用Angualr的路由，这样如果需要跳转直接跳转对应的路由地址即可，路由器上实现了解耦，也决解决了原来路由自页面反复跳转，重复监听的问题。

this.router.navigateByUrl('/home');
this.router.navigate(['/item', { id: itemId }]);

当然也保留了ionic原本的路由。

this.navCtrl.goForward('/home');
this.navCtrl.goRoot('/home');

包括对路由，项目结构的变化，都是为了使ionic4变得更加通用。他现在不依赖于任何框架，而且照这样看来 type=angular新建的目录结构与anglar-cli无异，那么 type=vue 是不是也就是vue-cli新建项目的目录结构一样呢，只是为我们搭好了脚手架和添加好了@ionic/core模块。不过也有一个不好的，如果每个框架都是用框架自己的路由，会不会变得很混乱？？如果继续依赖原有的路由，那你不用管你什么在框架上使用ionic，对你来说路由都是一样的。

3.生命周期

原本的生命周期

• ionViewDidLoad
• ionViewWillEnter
• ionViewDidEnter
• ionViewWillLeave
• ionViewDidLeave
• ionViewWillUnload
• ionViewCanEnter
• ionViewCanLeave

现在的生命周期

• ionNavDidChange
• ionNavWillChange
• ionNavWillLoad

4.指令和组件的变化

指令 end 变成了slot="start"   large 变成size="large" 。其实在ionic以前的版本，项目开发过程中就觉得这样是不大对的，如果是标准的web组件是不会这么搞的，后知后觉。包括button的变化 <button ion-button>变为<ion-button> 都是为了实现组件标准化，也是为了不依赖任何框架了，更通用了。

所以如果对ionic4的组件，还是要上官网重新熟悉他的的api了。这也就意味着，如果你从ionic3/2无法直接升级到ionic4，组件指令很多不一样了，但是好处是。你可以使用angualr2+的组件了啊。

//ionic4 

<ion-header>
  <ion-toolbar>
    <ion-buttons size="large" slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>My Navigation Bar</ion-title>
  </ion-toolbar>

  <ion-toolbar>
    <ion-title>Subheader</ion-title>
  </ion-toolbar>
</ion-header>

//ionic3
<ion-header>
  <ion-navbar>
    <ion-title>
      Subheader
    </ion-title>
    <ion-buttons end>
      <button large (click)="search()" ion-button icon-only>
        <ion-icon name="search" color="light"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

5.主题样式

不仅仅是重新以标准的web component 重新写了组件，整体的主题样式变化不小，ui也更漂亮了。

总结

综上所述，本人不建议直接ionic2/3直接升级到ionic4。以前是ionic1 到 2 翻天覆地，是因为太依赖angular，你angularJS 变成了angualr2 完全不一样了,我能不变嘛。所以ionic1 无法直接升到ionic2。那么现在呢，ionic2/3 又也无法直接升级到ionic4？？what？？ 会不会还有下次，ionic4 也无法升级到 ionic5/6/7？？

不会了，现在是标准的web component，不再依赖框架了。那么angular6或者以后到版本，或者集成与vue，react 框架你是要飞起来也没关系。

不过性能上是有了很大到变化滴，延迟加载也是是Ionic4的重要的变化内容。ionic 组件优化后，在项目打包中，比ionic3体积会小不少，但是我看了一下还是没有集成webpack？？使用的是Angular6的构建器，构建速度相对来说要慢不少呀，而且在ng build 后你可以看到www目录下几百个js文件，吐血。

现在使用vue开发，感觉vue比较流行的几套ui组件都尝试过，坑不少啊，现在都是自己纯手写。尝试过ionic4+vue玩玩，标准的web组件肯定是可以用的，就是比如说

alert 这些没法直接用，下面是一种比较讨巧的方式硬生生来使用alert，还是等待正式版吧

const alertController = document.querySelector('ion-alert-controller');
    await alertController.componentOnReady();
    const alert = await alertController.create({
      header: 'Alert',
      subHeader: 'Subtitle',
      message: '我是弹窗',
      buttons: ['OK']
    });
    await alert.present();

///app.vue

<ion-alert-controller></ion-alert-controller>

 

其他链接：

ionic4+angular6 混合移动开发 capacitor cordova

vue+cordova构建跨平台应用集成并使用Cordova plugin

此随笔乃本人学习工作记录，如有疑问欢迎在下面评论，转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。