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');

前者注重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来关闭。

四、主题样式的变更

这一块也是变更比较大的,这个我不详做说明了,有空自己看吧: ionic4主题样式

五、打包

因为默认懒加载,所以能很大提高首屏加载速度,适用于Web项目,但没有Webpack集成,默认动不动几十到上百个js文件给人有点凌乱的感觉。

变化还是蛮大的,旧的ionic3项目不太适合升级为ionic4,至于还学不学得动,自己考量吧,我觉得用vue+ionic4也是挺好玩的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏况鹰的专栏

关于Android图片资源瘦身的奇思妙想

替换掉系统的压缩算法。如果你不嫌麻烦和喜欢折腾的话可以在你的apk使用一下,效果还是非常显著的。

2.5K4
来自专栏软件开发

前端机试面试题

1、请实现“https://channel.jd.com/fashion.html”超值购部分内容。

2883
来自专栏菩提树下的杨过

整理了二个基本的css库(高手请绕道)

前一阵公司唯一的前端开发人员走掉了,短期内也没人顶上来,所以切页面/js这种活儿只能咱自个儿揽过来了,花了大半天捣鼓了下css,整理了二个基本的css库,方便以...

19310
来自专栏更流畅、简洁的软件开发方式

【自然框架】——思路、结构、特点的介绍(初稿,欢迎大家多提意见)

开场白   面向过程:面向过程是“写代码”,根据客户提出来的需求来写代码,包括函数。一步一步的写,都写完了,功能也就实现了。 面向对象:面向对象是“做设计”...

2437
来自专栏Web 开发

Mac下面的IE8测试环境

微软提供的IE测试虚拟机里面,Window7的自带的最小版本IE是IE8,so,从IE8测试走起。Vista是个短命的产品,至于XP,让他退役吧。

1190
来自专栏DeveWork

Ionic:高级的 HTML5 移动APP(Web App)开发框架

Ionic 是一个用HTML, CSS 跟JS 开发的一个用于移动设备的混合APP 开发框架,采用 Sass与AngularJS 开发。目前,Ionic 仍然处...

2869
来自专栏九彩拼盘的叨叨叨

网页PPT: reveal.js 介绍

reveal.js 是一个展示内容的框架,可以简单的理解为网页版的PPT。我们用 reveal.js 做出来的PPT其实是一个HTML文件。

4132
来自专栏木宛城主

SharePoint 2013怎样创建Wiki库

我们使用Wiki页面来分享知识,增进团队合作。下面我将向大家展示SharePoint 2013 Wiki的使用方法。教程我都将以这张Wiki页面(即当前页)为示...

2237
来自专栏子勰随笔

前端开发中常用资源收集(网站小图标、css、js 框架等)

6485
来自专栏HTML5学堂

CSS检查工具-CKStyle

HTML5学堂:CSS代码存在压缩工具、检查工具以及重排属性的工具。今天推荐给大家CKStyle这个工具,顺便也来看看其他的一些工具。 各类CSS检查工具 首先...

3946

扫码关注云+社区

领取腾讯云代金券