有較長時間沒有用Ionic了，見新的公眾號需求比較簡單，便決定使用Ionic4來實現。
其實，Ionic2和Ionic3的差別不大，而ionic4則變化比較大了，它支持angular、vue、react或其它任意js框架，甚至不使用js框架，它更像一個純粹UI庫。
截止到此文時，ionic4還是beta3版，所以還有不少bug存在，但整個項目下來，感覺也沒有特別硬性不能解決的bug，就算有，基本也有替代方案。
一、項目差異
那現在來看看怎么用ionic4，首先，我們還是以傳統的angular來使用之：
ionic start <name> <template> [options]
而示例命令有：
ionic start myApp
ionic start myApp blank
ionic start myApp tabs --cordova
ionic start myApp tabs --capacitor
ionic start myApp tabs --type=angular
ionic start myApp blank --type=ionic1
其中，創建使用原生功能的項目，除了Cordova外，多了Capacitor的選擇，此外，創建Angular版本ionic4項目的命令是這個(注意：帶參數。不帶參數創建的是ionic3項目)：
ionic start myApp tabs --type=angular
當然也可以用angular-cli創建普通Angular項目，然后npm添加@ionic/core模塊，創建完成后到目錄結構如下圖所示，它不再像ionic3那樣封裝了angular項目，而是直接就是一個angular項目，而且默認懶加載：
二、路由差異
也許Ionic 4中最顯著的變化，以及需要對現有應用程序進行最大改變的變化，是轉向Angular風格的路由。Ionic過去使用的典型Push/Pop風格導航仍然可用，您甚至可以直接通過Ionic的Web組件使用這種導航方式，但推薦的方法是使用Angular Router。
觀察目錄結構，很容易發現這是一個angular項目，是因為它有一個routing模塊：
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 {}
而對應的路由組件是ion-router-outlet，是對Angular的router-outlet擴展，以兼容舊的導航方式，打開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>
而原來ionic3的生命周期函數由原來的：
ionViewDidLoad
ionViewWillEnter
ionViewDidEnter
ionViewWillLeave
ionViewDidLeave
ionViewWillUnload
ionViewCanEnter
ionViewCanLeave
也相應做了調整，增加了如下部分：
ionNavDidChange
ionNavWillChange
ionNavWillLoad
言外之意是，你既可以使用如下Angular方式做路由跳轉：
this.router.navigateByUrl('/login');
this.router.navigate(['/detail', { id: itemId }]);
也可以使用原有Ionic方式管控堆棧：
this.navCtrl.goForward('/route');
this.navCtrl.goBack('/route');
this.navCtrl.goRoot('/route');
但原來接受參數的navParams只能應用于modals和popovers，而不能用于頁面跳轉。
前者注重URL管控，好處是靈活控制跳轉的位置；后者注重代碼管控，好處是它允許您指定導航的“方向”，這將有助于Ionic <ion-router-outlet>正確顯示頁面過渡。
Ionic團隊的目標是使Ionic更加通用，以便它不依賴于任何特定的框架，并且為每個框架實現他們自己的導航/路由可能會變得非常混亂，并且最終會有些不必要。相反，你應該只依賴于原始導航，無論你使用Ionic的框架是什么。Angular在這方面有點特殊，由于Ionic / Angular過去已經緊密集成，因此Ionic特定的Push/Pop導航已經存在并且正在被其應用程序中的人們使用。
三、組件和指令的變更
Ionic為了更通用化，把原來的指令調整為更通用標準的屬性方式，如icon-right調整為slot="end", large變成size="large",<button ion-button>變為<ion-button>，所以對于ionic4的組件使用，還是建議先上官網了解組件的api，特別留意下xxx-controller的變更，常見的有如下幾個：
modal-controller
popover-controller
action-sheet-controller
loading-controller
……
前面2個一般是有自定義UI的，在ionic3中是可通過自定義組件注入ViewController來關閉窗口，在ionic4中已經沒有這個方法，改為通過監聽事件或回調給外面的xxx-controller來關閉。
注意：也就是說現有的一些第三方ionic2/3組件大部分不能用在ionic4上，但是angular2+的組件就可以。
四、主題樣式的變更
這一塊也是變更比較大的，主要是ionic4使用了大量的ShadowDOM和CSS變量，這個我不詳做說明了，有空自己看吧：
ionic4主題樣式
五、打包
延遲加載是Ionic4的重要內容。如果您不熟悉延遲加載，那么基本的想法是將應用程序分解為更小的塊，并且僅加載當時所需的內容。首次加載應用程序時，只需加載顯示第一個屏幕所需的組件。
使用延遲加載，您的應用程序可以更快地啟動，因為它不需要加載太多 - 您可能擁有50個頁面的龐大應用程序，但它仍然可以像只有2頁的應用程序一樣快地加載。在沒有延遲加載的情況下，您需要在完成任何操作之前預先加載整個應用程序。
基于上述原因，Ionic4優化了在Web項目上的表現，差不多比ionic3壓縮了一半體積，但動不動幾十到上百個js文件可能給人有點凌亂的感覺，同時也增加了網絡請求開銷。此外，默認使用Angular6的構建器，構建速度慢了很多。
總結
變化還是蠻大的，舊的ionic3項目不太適合升級為ionic4，至于還學不學得動，自己考量吧，我覺得用Vue+Ionic4也是挺好玩的。
