Ionic3 迁移到 Ionic5

因为历史原因，需要将一个项目从 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。