Skip to main content

从 Ionic 6 更新到 7

¥Updating from Ionic 6 to 7

注意

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

¥This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the Upgrading to Ionic 6 Guide before starting this guide.

重大变化

有关从 Ionic 6 到 Ionic 7 的重大更改的完整列表，请参阅 Ionic 框架存储库中的 重大变更文档。

¥For a complete list of breaking changes from Ionic 6 to Ionic 7, please refer to the breaking changes document in the Ionic Framework repository.

新手上路​

¥Getting Started

Angular​

  1. Ionic 7 支持 Angular 14+。按照 角度更新指南 更新到最新版本的 Angular。

    ¥Ionic 7 supports Angular 14+. Update to the latest version of Angular by following the Angular Update Guide.

  2. 如果你的项目使用 rxjs，Ionic 7 需要的最低 rxjs 版本为 7.5.0：

    ¥If your project is using rxjs, Ionic 7 requires a minimum rxjs version of 7.5.0:

npm install rxjs@7.5.0

  1. 更新到最新版本的 Ionic 7：

    ¥Update to the latest version of 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 要求角度至少为 15。如果你仍在使用 Angular 14，那么你可以跳过更新到 @ionic/angular-toolkit@9。

¥Note: @ionic/angular-toolkit@9 requires a minimum of Angular 15. If you are still on Angular 14, then you can skip updating to @ionic/angular-toolkit@9.

React​

  1. Ionic 7 支持 React 17+。更新到最新版本的 React：

    ¥Ionic 7 supports React 17+. Update to the latest version of React:

npm install react@latest react-dom@latest

  1. 更新到最新版本的 Ionic 7：

    ¥Update to the latest version of Ionic 7:

npm install @ionic/react@7 @ionic/react-router@7

Vue​

  1. Ionic 7 支持 Vue 3.0.6+。更新到最新版本的 Vue：

    ¥Ionic 7 supports Vue 3.0.6+. Update to the latest version of Vue:

npm install vue@latest vue-router@latest

  1. 更新到最新版本的 Ionic 7：

    ¥Update to the latest version of Ionic 7:

npm install @ionic/vue@7 @ionic/vue-router@7

核心​

¥Core

  1. 更新到最新版本的 Ionic 7：

    ¥Update to the latest version of 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 }。

    ¥ActionSheetAttributes, AlertAttributes, AlertTextareaAttributes, AlertInputAttributes, LoadingAttributes, ModalAttributes, PickerAttributes, PopoverAttributes, and ToastAttributes have been removed. Developers should use { [key: string]: any } instead.

复选框​

¥Checkbox

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

    ¥Rename any usages of the --background and --background-checked CSS Variables to --checkbox-background and --checkbox-background-checked, respectively.

日期时间​

¥Datetime

  1. 删除将 value 属性设置为空字符串 ('') 的任何代码。

    ¥Remove any code that sets the value property to the empty string ('').

  2. 删除访问 value 属性上的时区信息的任何代码。Datetime 不管理时区，因此提供的任何时区信息都将被忽略。

    ¥Remove any code that accesses the time zone information on the value property. Datetime does not manage time zones, so any time zone information provided is ignored.

输入​

¥Input

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

    ¥Update any code that accesses the detail payload for the ionInput event from event.detail to event.detail.value as the detail payload is now an object containing a value and an event.

¥Modal

  1. 删除 swipeToClose 属性的任何使用。默认情况下，卡片模态是可滑动的，因此如果你希望卡片模态保持可滑动，你可以删除 swipeToClose。如果你想防止模式关闭，请使用 canDismiss 属性。

    ¥Remove any usage of the swipeToClose property. Card modals are swipeable by default, so you can remove swipeToClose if you want your card modal to remain swipeable. Use the canDismiss property if you want to prevent a modal from dismissing.

  2. 删除将 canDismiss 属性设置为 undefined 的任何代码。canDismiss 属性现在默认为 true，因此不再需要此代码。

    ¥Remove any code that sets the canDismiss property to undefined. The canDismiss property now defaults to true, so this code is no longer needed.

拾取器​

¥Picker

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

    ¥Remove any code that accesses refresh on ion-picker-column. Developers should use the columns property on ion-picker to refresh the view instead.

¥Searchbar

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

    ¥Update any code that accesses the detail payload for the ionInput event from event.detail to event.detail.value as the detail payload is now an object containing a value and an event.

片段​

¥Segment

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

    ¥Remove any code that sets the value property to null. Developers should use either '' or undefined instead.

幻灯片​

¥Slides

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

    ¥Remove ion-slides, ion-slide, and any associated types. These components have been removed in favor of using Swiper.js directly. The guides below contain more information about this migration:

角度迁移指南
反应迁移指南
Vue 迁移指南

¥Angular Migration Guide
React Migration Guide
Vue Migration Guide

文本区​

¥Textarea

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

    ¥Update any code that accesses the detail payload for the ionInput event from event.detail to event.detail.value as the detail payload is now an object containing a value and an event.

切换​

¥Toggle

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

    ¥Rename any usages of the --background and --background-checked CSS Variables to --track-background and --track-background-checked, respectively.

虚拟滚动​

¥Virtual Scroll

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

    ¥Remove ion-virtual-scroll and any associated types. This component has been removed in favor of using virtual scroll solutions provided by JavaScript Frameworks. The guides below contain more information about this migration:

角度迁移指南
反应迁移指南
Vue 迁移指南

¥Angular Migration Guide
React Migration Guide
Vue Migration Guide

需要升级帮助吗？​

¥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.

目录