跳至主要内容
版本：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 [email protected]
  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

核心​

  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 } 代替。

复选框​

  1. 将任何使用 --background 和 --background-checked CSS 变量的代码分别重命名为 --checkbox-background 和 --checkbox-background-checked。

日期时间​

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

输入​

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

选择器​

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

段​

  1. 移除任何将 value 属性设置为 null 的代码。开发人员应使用 '' 或 undefined 代替。

幻灯片​

  1. 移除 ion-slides、ion-slide 和任何相关类型。这些组件已被移除，取而代之的是直接使用 Swiper.js。以下指南包含有关此迁移的更多信息

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

文本区​

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

切换​

  1. 将任何使用 --background 和 --background-checked CSS 变量的代码分别重命名为 --track-background 和 --track-background-checked。

虚拟滚动​

  1. 移除 ion-virtual-scroll 和任何相关类型。此组件已被移除，取而代之的是使用 JavaScript 框架提供的虚拟滚动解决方案。以下指南包含有关此迁移的更多信息

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

需要升级帮助？​

请务必查看 Ionic 7 重大变更指南。默认属性和 CSS 变量值发生了几个更改，开发人员可能需要了解这些更改。本页仅列出了需要用户采取操作的重大变更。

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

内容

编辑此页面