开源鸿蒙底部选项卡开发全规范（细化版）✨ | 多终端适配+三方库接入+工程落地

前言 📖

底部选项卡是移动应用的核心导航组件 🧭，直接决定用户操作体验和页面交互效率！本文基于开源鸿蒙（OpenHarmony） 技术体系，从功能结构、页面实现、跨平台三方库接入、终端验证、代码提交到核心问题解决，制定一套标准化、可落地、高适配的底部选项卡开发规范，全覆盖手机📱、平板🖥️、开发板💻等多终端，同时兼容React Native/Flutter跨平台技术栈，助力开发者高效实现符合鸿蒙官方交互规范的底部选项卡组件！

学习任务：扩展开源鸿蒙跨平台应用核心功能，通过新增底部选项卡及完善对应页面实现，丰富应用交互维度与服务能力，并完成开源鸿蒙设备运行验证。

一、选项卡功能与结构要求 📚

1.1 核心服务场景覆盖 🎯

基础必含4个核心选项卡，可根据业务需求灵活扩展（如「服务中心」「工作台」等），核心场景全覆盖：

• 🏠 首页：应用核心功能统一入口，聚合高频操作，打造用户第一视觉界面
• 📋 数据列表：业务核心内容集中展示，支撑筛选/排序等核心操作
• 👤 我的中心：用户信息、个人设置、功能入口一体化聚合，提升个人操作效率
• 📩 消息通知：用户互动反馈、系统通知等信息集中展示，保证消息触达

1.2 交互状态完整性 ✨

严格遵循鸿蒙官方交互规范，保证点击体验和视觉辨识度，点击区域统一≥48x48dp（鸿蒙核心交互标准），各状态定义如下：

状态	图标样式	文字样式	额外视觉标识
默认状态	灰色（中性色）⚪	次要文本色，常规字重	无
选中状态	主色调高亮 🔴	主色调，文字加粗	底部添加2dp高选中条（宽度与文字自适应）

1.3 状态保留机制 📌

基于鸿蒙PageSlider+Fragment组合实现页面切换，核心保证页面切换后状态不丢失、无重复重建：

1. 🚀 预加载配置：通过setOffscreenPageLimit(3)设置预加载，避免切换相邻页面时视图重建，提升切换流畅度
2. 📦 状态绑定方式：
   • 轻量状态：使用@State/@Link装饰器实现组件间状态双向绑定，适配简单页面状态
   • 跨页面/复杂状态：通过ViewModel统一存储（如列表滚动位置、输入框内容、筛选条件等），实现状态与视图解耦

二、切换交互优化要求 ⚡

2.1 平滑切换实现 🌈

保证切换过程视觉流畅，无生硬跳转，核心配置双要求：

1. 🎬 动画实现：通过PageSlider的setPageTransformer配置切换动画（淡入淡出/平移动画均可），动画时长严格≤300ms（用户无感知切换标准）
2. 📥 数据刷新优化：禁用页面切换时的过度刷新，通过onPageSelected回调仅更新当前选中页面的核心数据，减少不必要的资源消耗

2.2 性能优化策略 🚀

从加载时机和资源管理双维度优化，彻底避免卡顿、掉帧问题：

1. 🥚 非首屏页面懒加载：首次切换至目标页面时，才执行onCreateView生命周期和数据请求，大幅减少应用启动耗时
2. 📦 静态资源预加载：应用启动阶段，将选项卡图标、文字、固定图片等静态资源通过鸿蒙资源管理能力预加载至内存，避免切换时重复加载，提升切换速度

三、选项卡页面实现要求（增强版）📈

3.1 四大核心页面功能闭环 🔄

每个基础选项卡页面需实现完整的业务功能闭环，满足用户核心操作需求，具体要求如下：

🏠 首页

• 核心组件：轮播图（支持自动播放+手势滑动+轮播指示器）、快捷入口网格（标准3x2布局）、推荐内容列表（支持下拉刷新+上拉加载更多）
• 交互要求：轮播图自动播放间隔3-5s，支持手动打断；列表加载有骨架屏占位💀，避免空白等待，提升用户体验

📋 数据列表

• 核心功能：多条件筛选（时间/类型/状态等）、排序（升序/降序）、批量操作（删除/标记/导出）
• 列表项规范：必须包含缩略图、标题、时间、状态标签（如「待处理」「已完成」），布局统一，无内容溢出，保证视觉一致性

👤 我的中心

• 核心模块：用户信息区（头像+昵称+唯一标识）、功能入口区（设置、帮助中心、关于、退出登录等，图标+文字组合）、数据统计卡片📊（如「已完成任务100」「待办30」，可视化展示）
• 交互要求：头像支持点击更换，统计卡片支持点击跳转详情页，实现操作闭环

📩 消息通知

• 状态区分：严格区分「未读/已读」状态（未读消息标红/加粗🔴，已读消息常规样式⚪），提升消息辨识度
• 操作支持：列表项左滑触发操作（删除/标记已读），适配移动端高频操作习惯
• 空状态处理：无消息时显示专属空状态插图+引导文案（如「暂无消息，快来互动吧」），支持点击插图/文案触发刷新，优化空状态体验

3.2 多终端适配方案 📱🖥️💻

适配鸿蒙手机、平板、开发板等不同终端，保证布局合理、交互友好，核心从屏幕尺寸和横竖屏两个维度实现全适配！

屏幕尺寸适配 📏

1. 🧩 布局核心：使用鸿蒙Flex布局+weight属性统一分配选项卡宽度，彻底避免固定像素导致的适配问题
2. 🔍 终端判断：通过MediaQuery动态判断设备类型，差异化设置宽度规则：

// 鸿蒙ETS示例代码 ✨
let tabWidth: string | number;
if (MediaQuery.matchMediaSync('(device-type: tablet)').matches) {
  tabWidth = 120; // 平板端固定宽度（dp）🖥️
} else {
  tabWidth = '25%'; // 手机端平均占比（4个选项卡）📱
}

3. 📐 对齐规则：手机端左对齐占满整屏，平板端固定宽度+居中对齐，避免底部导航过于松散，保证视觉美观

横竖屏适配 ↔️

1. 🔄 布局动态调整：横屏时底部选项卡可改为顶部布局，图标+文字横向排列，避免底部横向空间拥挤
2. 🎧 事件监听：通过监听onConfigurationChanged配置变化事件，动态修改选项卡的flexDirection（横竖屏布局方向）和布局位置
3. ⚡ 适配要求：横竖屏切换时，页面状态不丢失、布局无错乱，切换完成时间≤300ms，实现无缝切换

3.3 异常处理规范 ⚠️

全覆盖开发和使用过程中的常见异常场景，保证用户体验一致性，所有异常界面需遵循「图标+文案+操作按钮」的统一布局规范：

1. ❌ 数据加载失败：显示错误图标+「加载失败，请重试」文案，底部添加明显的「重试」按钮，点击后重新发起数据请求
2. 📭 空数据场景：显示专属空状态插图+个性化引导文案（如数据列表「暂无数据，点击刷新」、消息通知「暂无消息」），支持点击插图/文案触发刷新操作
3. 404 页面跳转异常：通过try-catch捕获路由跳转错误，统一跳转至应用专属「404页面」，页面提供「返回首页」核心按钮，支持一键回到主界面
4. 🌐 网络异常：无网络时，所有页面显示网络异常提示，支持点击「检测网络」跳转到系统网络设置，实现异常闭环处理

四、跨平台技术栈三方库接入指南 🌐

针对基于React Native/Flutter开发的鸿蒙跨平台应用，提供经过真机验证的三方库推荐、集成步骤和适配优化方案，所有推荐库均为鸿蒙兼容版 ✅！

4.1 React Native技术栈 🚀

推荐三方库 📦

@react-navigation/bottom-tabs（鸿蒙兼容版v6.5.8+），搭配@react-navigation/native使用，是React Native生态最成熟的底部导航库，支持状态持久化、高度自定义样式，鸿蒙多终端适配性拉满！

核心集成步骤 📝

1. 📥 安装依赖：

npm install @react-navigation/bottom-tabs @react-navigation/native

2. 🔧 鸿蒙原生层配置：在entry/src/main/ets/entryability/EntryAbility.ts中注册导航容器，保证鸿蒙容器能识别React Native导航组件
3. 📌 页面状态保留：通过navigationOptions的persist属性开启页面持久化，避免切换时状态丢失

版本适配与问题解决 🛠️

1. 📱 鸿蒙SDK兼容（API 10+）：若库与鸿蒙SDK不兼容，修改库源码中ViewPropTypes相关代码，替换为鸿蒙官方PropTypes
2. 🔄 切换失效问题：
   • 检查navigationContainer是否包裹所有页面组件，确保根布局唯一
   • 确认routeName与页面组件一一对应，无命名错误/重复

4.2 Flutter技术栈 🦋

推荐三方库 📦

persistent_bottom_nav_bar（鸿蒙兼容版v5.0.2+），核心优势是原生级别的状态持久化，完美适配鸿蒙多终端，支持高度自定义，开发板适配友好！

核心集成步骤 📝

1. 📥 配置依赖：在pubspec.yaml中添加依赖并执行flutter pub get

dependencies:
  persistent_bottom_nav_bar: ^5.0.2 # 鸿蒙兼容版 ✨

2. 🔧 核心组件配置：通过PersistentTabView组件绑定选项卡与页面，设置items属性定义选项卡图标、文字、对应页面
3. 📌 开启状态持久化：通过配置项开启，同时设置导航栏高度适配鸿蒙规范：

// Flutter代码示例 🦋
persistentTabViewSettings: PersistentTabViewSettings(
  navigationBarHeight: 60, // 适配鸿蒙底部导航栏高度规范 📐
  persistTabs: true, // 强制开启状态持久化 📌
)

开发板适配优化 💻

鸿蒙开发板（如Hi3516DV300）屏幕尺寸小、渲染能力有限，针对性优化三要点：

1. 🔤 文字模糊问题：在MaterialApp中设置textScaleFactor: 1.0，禁用系统文字缩放
2. 🧩 布局错乱问题：通过MediaQuery.of(context).size动态计算屏幕宽高，适配选项卡高度/宽度，彻底避免固定值
3. ⚡ 渲染性能问题：禁用阴影、渐变等复杂样式，减少组件嵌套层级，降低渲染压力

五、开源鸿蒙终端验证与代码提交规范 ✅

5.1 终端验证要点 🧪

必须完成真机+模拟器+开发板多终端全维度验证，确保功能、性能、适配全达标，杜绝线上问题！

测试设备覆盖 📱🖥️💻

• 📱 鸿蒙手机：如Mate 60（API 10/11）、P60（API 9/10）（主流机型全覆盖）
• 🖥️ 鸿蒙平板：如MatePad Pro（API 11）（大屏适配核心测试设备）
• 💻 鸿蒙开发板：如Hi3516DV300、Hi3861（基础版）（嵌入式终端适配测试）

核心验证项 📋

1. 🔄 选项卡切换：流畅度（无卡顿/掉帧/白屏）、切换时长（≤300ms）、状态保留（滚动位置/输入内容/筛选条件不丢失）
2. 📌 页面功能：所有按钮可正常点击、数据可正常加载/提交、批量操作/左滑操作等交互有效
3. 📱🖥️💻 多终端适配：无内容溢出/布局重叠/文字截断，不同屏幕密度（hdpi/xhdpi/xxhdpi）下显示正常
4. ⚠️ 异常场景：加载失败/空数据/网络异常/页面跳转异常的处理逻辑正常，操作可触发
5. ⚡ 性能指标：应用启动后首次切换选项卡无延迟，连续切换10次以上无内存泄漏

调试日志要求 📝

验证过程中需留存完整调试日志，日志包含以下核心信息，便于问题追溯：

• 📱 设备基础信息：设备型号、鸿蒙SDK版本（API Level）、屏幕分辨率/密度
• 📋 操作步骤：如「启动应用→切换至数据列表页→执行多条件筛选→切换至我的中心」
• 📝 日志内容：正常操作日志、错误日志（若有，需包含报错堆栈、触发时机）
• ⚡ 性能数据：如切换时长、页面加载耗时、内存占用峰值

5.2 Git提交规范（AtomGit/CodeGitee）📜

遵循统一的Commit Message格式和合理的提交粒度，保证代码提交历史清晰、可追溯，便于团队协作和问题排查！

Commit Message 统一格式 📝

<type>: <subject>
// 空行（必须）
<body>（可选，详细描述，换行以-开头）
// 空行（必须）
<footer>（可选，如关联Issue、关闭Bug）

核心字段说明 ✨

1. type：提交类型，仅允许以下4种，严格小写：
   • feat：新增功能（如新增选项卡、新增页面功能）🚀
   • fix：修复问题（如修复布局错乱、修复状态丢失）🛠️
   • refactor：代码重构（无功能增删，如优化代码结构、提取公共组件）♻️
   • docs：文档修改（如更新开发规范、补充注释、完善README）📖
2. subject：提交主题，简洁明了（≤50字），首字母小写，结尾无标点
3. body：可选，详细描述提交的内容、修改原因、实现思路
4. footer：可选，关联Issue号、Bug号，如「Close #123」「关联#456」

示例 ✅

feat: 新增底部选项卡及4个核心基础页面 🚀
- 基于PageSlider+Fragment实现选项卡切换
- 完成首页/数据列表/我的中心/消息通知页面基础布局
- 实现选项卡默认/选中状态视觉效果

关联#78

fix: #123 修复平板端选项卡布局错乱问题 🛠️
- 修改MediaQuery设备判断逻辑，优化平板端固定宽度计算
- 调整Flex布局对齐方式，实现平板端居中显示
- 修复选中条宽度与文字不匹配问题

Close #123

提交粒度规范 📌

1. 🧩 功能模块独立提交：每个核心模块单独提交（如「底部选项卡组件实现」「首页轮播图功能」「数据列表筛选逻辑」），避免大杂烩提交
2. 🐛 Bug修复精准提交：单个Bug单独提交，必须关联对应的Issue号，描述清楚修复点
3. 📖 文档与代码分离提交：文档修改（如规范更新、注释补充）单独提交，不与代码修改混在一起
4. ♻️ 重构代码单独提交：代码重构无功能变化，单独提交，便于Code Review

六、核心技术问题解决与思考 🤔

6.1 自定义实现类问题（鸿蒙原生开发）📱

页面状态丢失解决方案 📌

鸿蒙原生基于PageSlider+Fragment开发时，页面切换易出现状态丢失（如列表滚动位置、输入框内容），核心解决四步法：

1. 📦 ViewModel+LiveData：通过ViewModel存储页面核心数据（如列表数据、滚动位置、筛选条件），利用LiveData观察数据变化，实现数据与视图解耦，页面重建后数据不丢失
2. 📝 生命周期持久化：在onSaveInstanceState中保存临时状态（如输入框文字、弹窗状态），在onRestoreInstanceState中恢复，应对页面意外重建
3. ❌ 禁用销毁属性：鸿蒙PageSlider默认开启destroyOnExit（页面离开即销毁），需手动关闭该属性，保证页面实例不被销毁
4. 🌐 全局状态管理：跨页面的公共状态（如用户信息、全局筛选条件），通过鸿蒙AppStorage/LocalStorage实现全局共享，保证多页面状态一致

多终端布局错乱排查思路 🧩

布局错乱是多终端适配的常见问题，按以下五步排查法逐一验证，高效定位问题：

1. 🔢 检查单位使用：是否使用固定px值（绝对像素），必须改为鸿蒙推荐的dp（设备独立像素）或%（占比），保证不同屏幕密度下显示一致
2. 🧩 检查Flex布局配置：确认flexDirection（布局方向）、justifyContent（主轴对齐）、alignItems（交叉轴对齐）配置正确（手机端垂直，平板端可水平）
3. 📦 检查资源适配：测试不同屏幕密度（hdpi/xhdpi/xxhdpi）下的显示效果，确保资源文件（图标、布局）放在对应密度的资源目录（如drawable-hdpi/drawable-xhdpi）
4. 🔍 检查MediaQuery判断：确认设备类型（手机/平板）、屏幕尺寸的判断逻辑无错误，差异化配置生效
5. 📊 检查组件嵌套：是否存在过度组件嵌套，导致布局计算异常，适当减少嵌套层级，使用鸿蒙Stack/Column/Row基础布局组合

性能优化方法 ⚡

针对鸿蒙原生开发的性能优化，聚焦「减少视图创建」「优化加载时机」「降低资源消耗」三个核心，实现丝滑体验：

1. 🥚 实现精准懒加载：通过onPageSelected回调监听页面选中状态，仅当页面被首次选中时执行initData()方法（数据请求、资源加载），避免启动时一次性加载所有页面
2. 📦 资源预加载与缓存：应用启动时，通过鸿蒙ResourceManager将选项卡图标、固定图片、字符串等静态资源预加载至内存，同时对网络图片添加缓存策略
3. 📋 优化列表渲染：使用鸿蒙ListContainer替代传统ListView，实现视图复用，减少视图创建和销毁次数，提升列表滚动流畅度
4. 🎨 减少重绘重排：避免在onDraw/build方法中执行耗时操作，减少动态修改组件布局属性，使用Visibility替代if-else控制组件显示隐藏

6.2 三方库接入类问题（跨平台开发）🌐

版本不兼容适配方案 🛠️

跨平台三方库与鸿蒙SDK版本不兼容是常见问题，提供3种适配方案，按优先级从高到低：

1. 🚀 升级鸿蒙SDK：将鸿蒙SDK升级至最新稳定版（如API 11），匹配三方库的最低要求，这是最简洁、最推荐的方案
2. ✏️ 三方库源码修改：针对少量不兼容代码（如ViewPropTypes、API调用），直接修改三方库源码，替换为鸿蒙兼容的API/组件
3. 🧩 二次封装适配层：通过鸿蒙HarmonyAdapter层进行二次封装，将跨平台框架的不兼容API（如React Native的View、Flutter的Text）转换为鸿蒙原生Component，实现层间解耦，便于后续版本升级

切换失效排查步骤 🔍

跨平台应用选项卡切换失效，按以下五步排查法逐步验证，快速定位问题：

1. 🚪 检查路由注册：确认三方库的路由容器（如React Native的NavigationContainer、Flutter的PersistentTabView）是否为应用根组件，且唯一包裹所有页面
2. 🗺️ 检查路由映射：查看routeName/items配置，确认选项卡的标识与页面组件一一对应，无命名错误、重复或遗漏
3. 📝 查看错误日志：通过鸿蒙DevEco Studio查看调试日志，重点关注「Route not found」「Null Pointer」等错误，定位具体的错误页面/组件
4. 🧪 最小化示例测试：新建最小化测试工程，仅保留选项卡和空白页面，验证切换功能是否正常；若正常，逐步添加业务逻辑，定位导致切换失效的代码块
5. 📌 检查状态持久化配置：确认是否开启了三方库的状态持久化属性，且配置正确，无属性冲突

开发板渲染异常优化 💻

鸿蒙开发板硬件资源有限，易出现渲染样式异常、性能卡顿，针对性优化五要点：

1. 🎨 降低渲染复杂度：禁用阴影、渐变、圆角过度、动画效果等复杂样式，减少GPU渲染压力
2. 🖼️ 替换渲染组件：使用鸿蒙原生SurfaceView替代跨平台框架的原生View，提升渲染性能，避免画面卡顿/花屏
3. ⚙️ 调整GPU渲染模式：在鸿蒙工程config.json中设置"renderMode": "software"，使用软件渲染替代硬件渲染，适配低性能开发板
4. 📐 优化布局计算：减少动态布局计算，将固定布局提前渲染，避免运行时频繁计算屏幕尺寸/组件位置
5. 🧩 控制组件数量：开发板页面减少非核心组件的展示，简化布局，降低页面渲染的组件数量

七、工程代码提交要求 📦

7.1 统一仓库结构 📂

遵循开源鸿蒙工程标准目录结构，保证工程可读性和可维护性，所有代码按模块分类，资源与源码分离，目录结构如下：

├── entry/                  # 鸿蒙工程核心入口模块（必含）📱
│   ├── src/main/ets/       # 源码主目录
│   │   ├── pages/          # 所有选项卡页面（按模块分目录：home/ list/ mine/ message/）📄
│   │   ├── components/     # 公共组件（底部选项卡组件/轮播图/空状态等）🧩
│   │   ├── viewmodel/      # 页面ViewModel（按页面分文件，存储核心数据）📦
│   │   ├── utils/          # 工具类（网络请求/数据解析/适配工具等）🔧
│   │   └── App.ets         # 应用根组件
│   ├── resources/          # 资源文件（按类型分目录）📦
│   │   ├── base/           # 基础资源（字符串/颜色/尺寸）⚙️
│   │   ├── media/          # 媒体资源（图标/图片/插图）🖼️
│   │   └── layout/         # 布局资源 📐
│   └── config.json         # 鸿蒙工程核心配置（SDK版本/设备类型/渲染模式）⚙️
├── docs/                   # 开发文档（必含）📖
│   ├── dev_spec.md         # 开发规范文档（本文档）📜
│   └── verify_report.md    # 终端验证报告（按模板填写）✅
├── logs/                   # 调试日志（必含，按设备分目录）📝
│   ├── phone_log.txt       # 手机端测试日志 📱
│   ├── tablet_log.txt      # 平板端测试日志 🖥️
│   └── board_log.txt       # 开发板测试日志 💻
└── README.md               # 工程说明文档（必含，核心说明）📖

7.2 可复现性要求 🧪

保证其他开发人员能快速拉取代码、一键运行工程，无环境问题，核心三要求：

1. 📖 README.md 必须明确以下核心信息：
   • 环境要求：鸿蒙SDK版本（如API 10+）、DevEco Studio版本（如4.1+）、Node.js/Flutter版本（跨平台项目）
   • 依赖安装：详细的依赖安装命令（如npm install/flutter pub get）
   • 运行步骤：从代码拉取到部署到设备的完整步骤，含真机/模拟器/开发板的部署差异
   • 注意事项：工程运行的特殊配置、已知问题、解决方案
2. 🚀 提供一键运行脚本：根目录下提供run.sh（Linux/Mac）/run.bat（Windows）脚本，实现自动安装依赖→编译工程→部署到连接的鸿蒙设备，简化运行流程
3. ❌ 工程无本地配置：所有配置项（如接口地址、设备参数）放在配置文件中，不硬编码，避免本地配置导致的运行失败

7.3 验证报告模板（必随代码提交）✅

终端验证完成后，按以下模板填写验证报告，保存至docs/verify_report.md，随代码一起提交，报告需真实、完整，覆盖所有核心验证项：

验证项	测试设备	测试结果（通过/不通过）	备注（耗时/异常/优化点）
选项卡切换流畅度 ⚡	鸿蒙手机（Mate 60，API 10）📱	通过	切换时长≤200ms，无卡顿
页面状态保留 📌	鸿蒙平板（MatePad Pro，API 11）🖥️	通过	列表滚动位置/筛选条件恢复正常
多终端布局适配 📱🖥️💻	鸿蒙开发板（Hi3516DV300，API 9）💻	通过	选项卡无重叠/溢出，文字无截断
异常场景处理 ⚠️	鸿蒙模拟器（API 9，手机/平板）🧪	通过	空数据/加载失败/网络异常提示正常，操作可触发
页面功能完整性 📌	鸿蒙手机（P60，API 9）📱	通过	所有按钮可点击，数据可正常加载/提交
横竖屏切换适配 ↔️	鸿蒙手机（Mate 60，API 10）📱	通过	横竖屏切换布局自动调整，状态不丢失
跨平台切换有效性（跨平台项目）🌐	鸿蒙平板（API 11）🖥️	通过	React Native/Flutter选项卡切换无失效
开发板渲染性能（开发板项目）💻	鸿蒙开发板（Hi3861，API 9）💻	通过	无文字模糊/布局错乱，滚动流畅

7.4 提交地址要求 📍

1. 代码提交至AtomGit仓库，确保仓库为公开可访问状态
2. 仓库需包含完整的提交历史，按本文的提交规范提交，无大杂烩提交
3. 提交完成后，在仓库根目录的README.md中添加仓库访问链接，便于团队查看和拉取

八、总结 📝

本文制定的开源鸿蒙底部选项卡开发规范，全覆盖从设计到实现、从原生到跨平台、从开发到验证、从代码到提交的全流程 ✨，核心解决了鸿蒙多终端适配、页面状态保留、跨平台三方库兼容、开发板性能优化等关键问题，同时统一了工程结构、提交规范和验证标准。

遵循本规范开发，可有效提升鸿蒙应用底部选项卡的开发效率和产品质量，保证组件的交互一致性、多终端适配性、性能稳定性，同时大幅提升团队协作效率和工程可维护性。后续可根据具体业务需求，在本规范的基础上灵活扩展选项卡功能和样式，始终遵循鸿蒙官方交互规范和开发标准！

文末福利 🎁

关注作者，获取鸿蒙原生/跨平台开发系列规范，包含组件开发、性能优化、多终端适配等核心内容，持续更新中～

点赞👍 + 收藏⭐ + 关注👀，后续持续输出鸿蒙开发硬核干货！