跳到主要内容
版本：v8

从 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，因为详情负载现在是一个包含值和事件的对象。
  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，因为详情负载现在是一个包含值和事件的对象。

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，因为详情负载现在是一个包含值和事件的对象。

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

编辑此页