Ionic4與Ionic3部分比較

有較長時間沒有用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項目,而且默認懶加載:


image.png

二、路由差異

也許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也是挺好玩的。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評論 6 546
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,814評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,980評論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 64,064評論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,779評論 6 414
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,109評論 1 330
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評論 3 450
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,287評論 0 291
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,799評論 1 338
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,515評論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,750評論 1 375
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,933評論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,327評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,667評論 1 296
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,492評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,703評論 2 380

推薦閱讀更多精彩內容