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

 

此隨筆乃本人學習工做記錄，若有疑問歡迎在下面評論，轉載請標明出處。

若是對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。