有較長時間沒有用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也是挺好玩的。