Ionic3 迁移到 Ionic5

栏目: IT技术 · 发布时间: 4年前

内容简介:因为历史原因,需要将一个项目从 Ionic3 迁移到 Ionic5,开始迁移前已经做了评估,预见了一些可能的问题,但是未曾想,还是坑你没商量,好在被折磨后,各种坑被填平,系统正常上线。其实从 Ionic4 开始,组件和路由就有了很大的变化。在迁移前,可先浏览下

因为历史原因,需要将一个项目从 Ionic3 迁移到 Ionic5,开始迁移前已经做了评估,预见了一些可能的问题,但是未曾想,还是坑你没商量,好在被折磨后,各种坑被填平,系统正常上线。

其实从 Ionic4 开始,组件和路由就有了很大的变化。

Ionic 组件的迁移

在迁移前,可先浏览下 Breaking Changes ,看下有哪些组件的用法改变了,做到心中有数。迁移过程中,对于组件的具体用法可参见 Ionic 文档

路由迁移

Ionic3 中页面中的跳转用的是 NavController 的 push、pop 方法,而在 Ionic4 开始,就引入了 Angular Router 概念,对页面的路由更加灵活、方便。Router 的用法与 Angular 中一样,这里不赘述。

从 Cordova 到 Capacitor

Ionic3 使用的是 Cordova,但在 Ionic4 之后,默认使用的应用容器是 Capacitor,而 Capacitor 也因其跨平台、易使用等特点,被广泛采用。

在使用 Capacitor 前,请先行自查下列 Capacitor 不兼容的插件列表 ,做好应对措施。

如果在 Ionic5 中还要使用 Ionic 的 native 插件,这里需要注意插件引用路径的改变,需要在路径后添加“ngx”,例如:

import { StatusBar } from "@ionic-native/status-bar";
//改为
import { StatusBar } from "@ionic-native/status-bar/ngx";

另外 Capacitor 生成的 Android 工程是可以直接编辑的,避开会被 Capacitor 覆盖的文件之外,别的文件都可以覆盖,如果需要多环境,可以直接编辑这些工程配置文件。

App 路径

Ionic3 打包的 Android App 在真机上运行时, 使用的路径为http://localhost:8080,而在Ionic5 使用的是http://localhost。如果App中使用 LocalStorage 存储了一些持久数据,这里就需要注意了,如果 APP 已经上线,就要考虑数据迁移了。所以 Ionic 开发时,还是建议使用 Native Storage 进行数据存储。

旧版本插件的支持

尽可能使用 capacitor 插件替换掉 cordova 插件,对于某些不方便替换或者找不到替代品的场景,需要做一些兼容性处理。

对于某些使用旧版本的 Android 包在 capacitor 的 AndroidX 项目编译失败,可以用以下命令转换代码,使之兼容 AndroidX 工程:

npx jetifier

对于开屏图使用 capacitor-resources 这个 工具 可以统一处理,不再依赖 cordova。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

软件开发者路线图

软件开发者路线图

Dave H. Hoover、Adewale Oshineye / 王江平 / 机械工业出版社 / 2010年9月 / 35.00元

作为一名软件开发者,你在奋力推进自己的职业生涯吗?面对今天日新月异和不断拓展的技术,取得成功需要的不仅仅是技术专长。为了增强专业性,你还需要一些软技能以及高效的学习技能。本书的全部内容都是关于如何修炼这些技能的。两位作者Dave Hoover和Adewale Oshineye给出了数十种行为模式,来帮你提高主要的技能。 本书中的模式凝结了多年的调查研究、无数次的访谈以及来自O’Reilly在......一起来看看 《软件开发者路线图》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试