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

 

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

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