Skip to main content

从 Ionic 6 更新到 7

🌐 Updating from Ionic 6 to 7

note

本指南假设你已经将应用更新到最新版本的 Ionic 6。请确保在开始本指南之前，你已经遵循了 升级到 Ionic 6 指南 的步骤。

重大变化

有关从 Ionic 6 到 Ionic 7 的完整破坏性更改列表，请参阅 Ionic Framework 仓库中的破坏性更改文档。

新手上路​

🌐 Getting Started

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，请务必同时更新它们：

🌐 If you are using Ionic Angular Server and Ionic Angular Toolkit, be sure to update those as well:

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

更新你的代码​

🌐 Updating Your Code

浏览器支持​

🌐 Browser Support

Ionic 支持的浏览器列表已发生变化。请查看 浏览器支持指南，以确保你将应用部署到受支持的浏览器上。

🌐 The list of browsers that Ionic supports has changed. Review the Browser Support Guide to ensure you are deploying apps to supported browsers.

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

🌐 If you have a browserslist or .browserslistrc file, update it with the following content:

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

类型​

🌐 Types

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

🌐 Modal

  1. 删除对 swipeToClose 属性的任何使用。卡片模态默认可以滑动，因此如果你希望卡片模态保持可滑动，可以删除 swipeToClose。如果你想防止模态被关闭，请使用 canDismiss 属性。
  2. 删除任何将 canDismiss 属性设置为 undefined 的代码。canDismiss 属性现在默认为 true，因此这段代码不再需要。

拾取器​

🌐 Picker

  1. 删除任何访问 ion-picker-column 上的 refresh 的代码。开发者应该使用 ion-picker 上的 columns 属性来刷新视图。

🌐 Searchbar

  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 迁移指南

需要升级帮助吗？​

🌐 Need Help Upgrading?

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

🌐 Be sure to look at the Ionic 7 Breaking Changes Guide. There were several changes to default property and CSS Variable values that developers may need to be aware of. Only the breaking changes that require user action are listed on this page.

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

🌐 If you need help upgrading, please post a thread on the Ionic Forum.

目录