跳到主要内容
版本：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 负载现在是一个包含 value 和 event 的对象。
  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 负载现在是一个包含 value 和 event 的对象。

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 负载现在是一个包含 value 和 event 的对象。

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 论坛 上发布帖子。

目录

编辑此页