Ionic4与Ionic3部分比较

liang1234_ 2019-03-24

展开全文

有较长时间没有用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');

前者注重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，这个我不详做说明了，有空自己看吧：
ionic4主题样式

五、打包

延迟加载是Ionic4的重要内容。如果您不熟悉延迟加载，那么基本的想法是将应用程序分解为更小的块，并且仅加载当时所需的内容。首次加载应用程序时，只需加载显示第一个屏幕所需的组件。
使用延迟加载，您的应用程序可以更快地启动，因为它不需要加载太多 - 您可能拥有50个页面的庞大应用程序，但它仍然可以像只有2页的应用程序一样快地加载。在没有延迟加载的情况下，您需要在完成任何操作之前预先加载整个应用程序。

基于上述原因，Ionic4优化了在Web项目上的表现，差不多比ionic3压缩了一半体积，但默认使用Angular6的构建器，构建速度慢了很多，还没有Webpack集成，动不动几十到上百个js文件给人有点凌乱的感觉，同时也增加了网络请求开销。