有較長時(shí)間沒有用Ionic了，見新的公眾號需求比較簡單，便決定使用Ionic4來實(shí)現(xiàn)蚊逢。
其實(shí)，Ionic2和Ionic3的差別不大箫章，而ionic4則變化比較大了烙荷，它支持angular、vue檬寂、react或其它任意js框架终抽，甚至不使用js框架，它更像一個(gè)純粹UI庫焰薄。
截止到此文時(shí)拿诸，ionic4還是beta3版，所以還有不少bug存在塞茅，但整個(gè)項(xiàng)目下來亩码，感覺也沒有特別硬性不能解決的bug，就算有野瘦，基本也有替代方案描沟。
一、項(xiàng)目差異
那現(xiàn)在來看看怎么用ionic4鞭光，首先吏廉，我們還是以傳統(tǒng)的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
其中，創(chuàng)建使用原生功能的項(xiàng)目惰许，除了Cordova外席覆，多了Capacitor的選擇，此外汹买，創(chuàng)建Angular版本ionic4項(xiàng)目的命令是這個(gè)(注意：帶參數(shù)佩伤。不帶參數(shù)創(chuàng)建的是ionic3項(xiàng)目)：
ionic start myApp tabs --type=angular
當(dāng)然也可以用angular-cli創(chuàng)建普通Angular項(xiàng)目聊倔，然后npm添加@ionic/core模塊，創(chuàng)建完成后到目錄結(jié)構(gòu)如下圖所示生巡，它不再像ionic3那樣封裝了angular項(xiàng)目耙蔑，而是直接就是一個(gè)angular項(xiàng)目，而且默認(rèn)懶加載：
二孤荣、路由差異
也許Ionic 4中最顯著的變化甸陌，以及需要對現(xiàn)有應(yīng)用程序進(jìn)行最大改變的變化，是轉(zhuǎn)向Angular風(fēng)格的路由盐股。Ionic過去使用的典型Push/Pop風(fēng)格導(dǎo)航仍然可用钱豁，您甚至可以直接通過Ionic的Web組件使用這種導(dǎo)航方式，但推薦的方法是使用Angular Router疯汁。
觀察目錄結(jié)構(gòu)寥院，很容易發(fā)現(xiàn)這是一個(gè)angular項(xiàng)目，是因?yàn)樗幸粋€(gè)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 {}
而對應(yīng)的路由組件是ion-router-outlet涛目，是對Angular的router-outlet擴(kuò)展，以兼容舊的導(dǎo)航方式凛澎，打開tabs.page.html可看到下面內(nèi)容：
<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的生命周期函數(shù)由原來的：
ionViewDidLoad
ionViewWillEnter
ionViewDidEnter
ionViewWillLeave
ionViewDidLeave
ionViewWillUnload
ionViewCanEnter
ionViewCanLeave
也相應(yīng)做了調(diào)整霹肝，增加了如下部分：
ionNavDidChange
ionNavWillChange
ionNavWillLoad
言外之意是，你既可以使用如下Angular方式做路由跳轉(zhuǎn)：
this.router.navigateByUrl('/login');
this.router.navigate(['/detail', { id: itemId }]);
也可以使用原有Ionic方式管控堆棧：
this.navCtrl.goForward('/route');
this.navCtrl.goBack('/route');
this.navCtrl.goRoot('/route');
但原來接受參數(shù)的navParams只能應(yīng)用于modals和popovers塑煎，而不能用于頁面跳轉(zhuǎn)沫换。
前者注重URL管控，好處是靈活控制跳轉(zhuǎn)的位置最铁；后者注重代碼管控讯赏，好處是它允許您指定導(dǎo)航的“方向”，這將有助于Ionic <ion-router-outlet>正確顯示頁面過渡冷尉。
Ionic團(tuán)隊(duì)的目標(biāo)是使Ionic更加通用漱挎，以便它不依賴于任何特定的框架，并且為每個(gè)框架實(shí)現(xiàn)他們自己的導(dǎo)航/路由可能會變得非橙干冢混亂磕谅，并且最終會有些不必要。相反雾棺，你應(yīng)該只依賴于原始導(dǎo)航膊夹，無論你使用Ionic的框架是什么。Angular在這方面有點(diǎn)特殊捌浩，由于Ionic / Angular過去已經(jīng)緊密集成放刨，因此Ionic特定的Push/Pop導(dǎo)航已經(jīng)存在并且正在被其應(yīng)用程序中的人們使用。
三尸饺、組件和指令的變更
Ionic為了更通用化进统，把原來的指令調(diào)整為更通用標(biāo)準(zhǔn)的屬性方式助币，如icon-right調(diào)整為slot="end", large變成size="large",<button ion-button>變?yōu)?code><ion-button>，所以對于ionic4的組件使用麻昼，還是建議先上官網(wǎng)了解組件的api奠支，特別留意下xxx-controller的變更，常見的有如下幾個(gè)：
modal-controller
popover-controller
action-sheet-controller
loading-controller
……
前面2個(gè)一般是有自定義UI的抚芦，在ionic3中是可通過自定義組件注入ViewController來關(guān)閉窗口倍谜，在ionic4中已經(jīng)沒有這個(gè)方法，改為通過監(jiān)聽事件或回調(diào)給外面的xxx-controller來關(guān)閉叉抡。
注意：也就是說現(xiàn)有的一些第三方ionic2/3組件大部分不能用在ionic4上尔崔，但是angular2+的組件就可以。
四褥民、主題樣式的變更
這一塊也是變更比較大的季春，主要是ionic4使用了大量的ShadowDOM和CSS變量，這個(gè)我不詳做說明了消返，有空自己看吧：
ionic4主題樣式
五载弄、打包
延遲加載是Ionic4的重要內(nèi)容。如果您不熟悉延遲加載撵颊，那么基本的想法是將應(yīng)用程序分解為更小的塊宇攻，并且僅加載當(dāng)時(shí)所需的內(nèi)容。首次加載應(yīng)用程序時(shí)倡勇，只需加載顯示第一個(gè)屏幕所需的組件逞刷。
使用延遲加載，您的應(yīng)用程序可以更快地啟動妻熊，因?yàn)樗恍枰虞d太多 - 您可能擁有50個(gè)頁面的龐大應(yīng)用程序夸浅，但它仍然可以像只有2頁的應(yīng)用程序一樣快地加載。在沒有延遲加載的情況下扔役，您需要在完成任何操作之前預(yù)先加載整個(gè)應(yīng)用程序帆喇。
基于上述原因，Ionic4優(yōu)化了在Web項(xiàng)目上的表現(xiàn)亿胸，差不多比ionic3壓縮了一半體積番枚，但動不動幾十到上百個(gè)js文件可能給人有點(diǎn)凌亂的感覺，同時(shí)也增加了網(wǎng)絡(luò)請求開銷损敷。此外葫笼，默認(rèn)使用Angular6的構(gòu)建器，構(gòu)建速度慢了很多拗馒。
總結(jié)
變化還是蠻大的路星，舊的ionic3項(xiàng)目不太適合升級為ionic4，至于還學(xué)不學(xué)得動，自己考量吧洋丐，我覺得用Vue+Ionic4也是挺好玩的呈昔。
