跳到主要内容
版本：v7

从 Ionic 6 升级到 7

备注

本指南假设您已将应用程序更新到 Ionic 6 的最新版本。开始本指南前，请确保已遵循 升级到 Ionic 6 指南。

重大变更

有关从 Ionic 6 到 Ionic 7 的完整重大变更列表，请参阅 Ionic Framework 仓库中的 重大变更文档。

开始之前​

Angular​

  1. Ionic 7 支持 Angular 14+。请按照 Angular 更新指南 更新到最新的 Angular 版本。
  2. 如果您的项目正在使用 rxjs，Ionic 7 要求 rxjs 最低版本为 7.5.0：
npm install rxjs@7.5.0
  1. 更新到 Ionic 7 的最新版本：
npm install @ionic/angular@7

如果您正在使用 Ionic Angular Server 和 Ionic Angular Toolkit，请确保也更新它们：

npm install @ionic/angular@7 @ionic/angular-server@7 @ionic/angular-toolkit@9

注意：@ionic/angular-toolkit@9 要求最低 Angular 版本为 15。如果您仍在使用 Angular 14，则可以跳过更新到 @ionic/angular-toolkit@9。

React​

  1. Ionic 7 支持 React 17+。更新到最新的 React 版本：
npm install react@latest react-dom@latest
  1. 更新到 Ionic 7 的最新版本：
npm install @ionic/react@7 @ionic/react-router@7

Vue​

  1. Ionic 7 支持 Vue 3.0.6+。更新到最新的 Vue 版本：
npm install vue@latest vue-router@latest
  1. 更新到 Ionic 7 的最新版本：
npm install @ionic/vue@7 @ionic/vue-router@7

Core​

  1. 更新到 Ionic 7 的最新版本：
npm install @ionic/core@7

更新您的代码​

浏览器支持​

Ionic 支持的浏览器列表已更改。请查阅 浏览器支持指南 以确保您将应用部署到受支持的浏览器。

如果您有 browserslist 或 .browserslistrc 文件，请用以下内容更新它：

Chrome >=79
ChromeAndroid >=79
Firefox >=70
Edge >=79
Safari >=14
iOS >=14

类型​

  1. ActionSheetAttributes、AlertAttributes、AlertTextareaAttributes、AlertInputAttributes、LoadingAttributes、ModalAttributes、PickerAttributes、PopoverAttributes 和 ToastAttributes 已被移除。开发者应改用 { [key: string]: any }。

Checkbox​

  1. 将所有使用 --background 和 --background-checked CSS 变量的地方，分别重命名为 --checkbox-background 和 --checkbox-background-checked。

Datetime​

  1. 移除所有将 value 属性设置为空字符串 ('') 的代码。
  2. 移除所有访问 value 属性上时区信息的代码。Datetime 不管理时区，因此提供的任何时区信息都将被忽略。

Input​

  1. 更新所有访问 ionInput 事件 detail 有效负载的代码，从 event.detail 改为 event.detail.value，因为现在 detail 有效负载是一个包含值和事件的对象。
  1. 移除所有使用 swipeToClose 属性的地方。卡片模态框默认是可滑动的，因此如果您希望卡片模态框保持可滑动，可以移除 swipeToClose。如果您想阻止模态框关闭，请使用 canDismiss 属性。
  2. 移除所有将 canDismiss 属性设置为 undefined 的代码。canDismiss 属性现在默认为 true，因此不再需要此代码。

Picker​

  1. 移除所有访问 ion-picker-column 上 refresh 方法的代码。开发者应改用 ion-picker 上的 columns 属性来刷新视图。
  1. 更新所有访问 ionInput 事件 detail 有效负载的代码，从 event.detail 改为 event.detail.value，因为现在 detail 有效负载是一个包含值和事件的对象。

Segment​

  1. 移除所有将 value 属性设置为 null 的代码。开发者应改用 '' 或 undefined。

Slides​

  1. 移除 ion-slides、ion-slide 以及所有相关类型。这些组件已被移除，建议直接使用 Swiper.js。以下指南包含了有关此迁移的更多信息：

Angular 迁移指南
React 迁移指南
Vue 迁移指南

Textarea​

  1. 更新所有访问 ionInput 事件 detail 有效负载的代码，从 event.detail 改为 event.detail.value，因为现在 detail 有效负载是一个包含值和事件的对象。

Toggle​

  1. 将所有使用 --background 和 --background-checked CSS 变量的地方，分别重命名为 --track-background 和 --track-background-checked。

Virtual Scroll​

  1. 移除 ion-virtual-scroll 以及所有相关类型。此组件已被移除，建议使用 JavaScript 框架提供的虚拟滚动解决方案。以下指南包含了有关此迁移的更多信息：

Angular 迁移指南
React 迁移指南
Vue 迁移指南

需要升级帮助？​

请务必查看 Ionic 7 重大变更指南。默认属性和 CSS 变量值有几处变更，开发者可能需要留意。本页面仅列出了需要用户操作的重大变更。

如果您需要升级帮助，请在 Ionic 论坛 上发帖。

Contents

编辑此页