鸿蒙 AI App 的技术架构解析

鸿蒙 AI App 的技术架构解析
在这里插入图片描述

子玥酱(掘金 / 知乎 / ZEEKLOG / 简书 同名)

大家好,我是子玥酱,一名长期深耕在一线的前端程序媛 👩‍💻。曾就职于多家知名互联网大厂,目前在某国企负责前端软件研发相关工作,主要聚焦于业务型系统的工程化建设与长期维护。

我持续输出和沉淀前端领域的实战经验,日常关注并分享的技术方向包括前端工程化、小程序、React / RN、Flutter、跨端方案,
在复杂业务落地、组件抽象、性能优化以及多端协作方面积累了大量真实项目经验。

技术方向:前端 / 跨端 / 小程序 / 移动端工程化
内容平台:掘金、知乎、ZEEKLOG、简书
创作特点:实战导向、源码拆解、少空谈多落地
文章状态:长期稳定更新,大量原创输出

我的内容主要围绕 前端技术实战、真实业务踩坑总结、框架与方案选型思考、行业趋势解读 展开。文章不会停留在“API 怎么用”,而是更关注为什么这么设计、在什么场景下容易踩坑、真实项目中如何取舍,希望能帮你在实际工作中少走弯路。

子玥酱 · 前端成长记录官 ✨
👋 如果你正在做前端,或准备长期走前端这条路
📚 关注我,第一时间获取前端行业趋势与实践总结
🎁 可领取 11 类前端进阶学习资源(工程化 / 框架 / 跨端 / 面试 / 架构)
💡 一起把技术学“明白”,也用“到位”

持续写作,持续进阶。
愿我们都能在代码和生活里,走得更稳一点 🌱

文章目录

引言

随着大模型能力逐渐普及,越来越多应用开始接入 AI 功能。
但很多开发者在真正做 AI 应用时,很快会遇到一个问题:

传统 App 架构,并不适合 AI 应用。

过去我们设计 App,通常围绕 页面 + 业务逻辑展开。但 AI 应用的核心不再只是页面,而是:

AI 能力 任务理解 服务调用 

这意味着应用架构需要发生变化。

一、传统 App 架构是什么样

大多数鸿蒙应用的架构类似这样:

Page ↓ Service ↓ Repository ↓ Network 

职责很清晰:

Page UI 展示 Service 业务逻辑 Repository 数据管理 Network 网络请求 

例如:

用户点击按钮 ↓ 页面调用 Service ↓ Service 调用 API ↓ 返回数据展示 

这种架构适合 功能型应用,但 AI 应用的逻辑完全不同。

二、AI App 的核心流程

AI 应用通常是这样工作的:

用户输入 ↓ AI 理解意图 ↓ 任务规划 ↓ 调用服务 ↓ 返回结果 

例如,用户输入:

帮我推荐附近好吃的餐厅 

系统流程可能是:

AI → 意图识别 AI → 解析位置 AI → 调用餐厅服务 AI → 返回推荐 

这里 AI 其实成为 系统核心入口

三、AI App 的核心模块

一个完整的 AI 应用通常包含几个核心模块:

AI Layer Service Layer Data Layer UI Layer 

结构示意:

用户输入 ↓ AI Layer ↓ Service Layer ↓ Data Layer ↓ UI 展示 

AI 层变成整个系统的 控制中心

四、AI Layer(AI 层)

AI 层负责:

意图识别 任务规划 工具调用 

典型模块包括:

Intent Parser Task Planner Tool Manager Prompt Manager 

结构示例:

ai ├─ ai_service ├─ intent_parser ├─ task_planner └─ prompt_manager 

示例代码:

exportclassAIService{asyncchat(message:string){const intent =awaitthis.parseIntent(message)returnawaitthis.executeTask(intent)}}

AI 层会决定 调用哪个服务

五、Service Layer(服务层)

Service 层负责具体业务能力,例如:

用户服务 订单服务 搜索服务 推荐服务 

结构:

services ├─ UserService ├─ SearchService └─ OrderService 

示例:

exportclassSearchService{asyncsearchRestaurant(keyword:string){returnawait ApiClient.get("/restaurant/search")}}

AI 通过 Service 调用业务能力。

六、Tool Layer(工具层)

在 AI 应用中,经常会设计 Tool(工具)系统,Tool 的作用是:

把应用能力暴露给 AI 

例如:

搜索餐厅 查询天气 预订酒店 

结构:

tools ├─ SearchRestaurantTool ├─ WeatherTool └─ BookingTool 

示例:

exportclassWeatherTool{asyncexecute(city:string){returnawait WeatherService.getWeather(city)}}

AI 可以通过工具调用服务。

七、数据层

数据层负责:

网络请求 缓存 数据库 

结构:

repository ├─ UserRepository └─ ContentRepository 

示例:

exportclassUserRepository{asyncfetchUserInfo(){returnawait HttpClient.get("/user")}}

八、UI 层

AI 应用的 UI 通常更简单,UI 主要负责:

输入 展示结果 确认操作 

例如:

@Entry@Component struct ChatPage {@State message:string=""@State reply:string="" aiService: AIService =newAIService()asyncsend(){this.reply =awaitthis.aiService.chat(this.message)}}

UI 只是一个 交互入口

九、完整架构示意

一个比较完整的鸿蒙 AI App 架构可能是:

entry ├─ pages │ ├─ components │ ├─ ai │ ├─ ai_service │ ├─ intent_parser │ ├─ task_planner │ └─ prompt_manager │ ├─ tools │ ├─ services │ ├─ repository │ ├─ models │ └─ utils 

数据流:

用户输入 ↓ AI Service ↓ Intent Parser ↓ Task Planner ↓ Tool / Service ↓ 返回结果 

十、AI 应用架构的关键设计原则

设计 AI 应用架构时,有几个关键原则。

1、AI 作为入口

传统应用:

UI → Service 

AI 应用:

AI → Service 

2、服务能力模块化

每个能力都应该是一个 独立 Service,例如:

SearchService PaymentService WeatherService 

3、工具化能力

AI 通过 Tool 调用系统能力

Tool → Service 

总结

随着 AI 技术的发展,应用架构正在发生变化,传统 App:

UI → Service → Network 

AI App:

User Input ↓ AI Layer ↓ Tool / Service ↓ Data Layer 

也就是说:

AI 不再只是功能,而是应用架构的核心。

对于鸿蒙应用来说,未来 AI 很可能成为:

系统能力 应用入口 任务执行者 

这意味着:鸿蒙 AI App 的架构,正在从 页面驱动逐渐转向 智能驱动

Read more

轻松实现Office在线编辑:基于Collabora的Web集成指南

引言 在Web项目中嵌入Office文档编辑功能可以显著提升用户体验。Collabora Online基于LibreOffice核心,提供开源解决方案,支持主流格式(DOCX/XLSX/PPTX等)的实时协作编辑。以下指南详细介绍了如何部署和集成Collabora,实现媲美Office 365的网页端编辑体验。 核心组件与原理 Collabora Online Development Edition (CODE) 服务端提供文档渲染与协作引擎(通过Docker部署),前端通过<iframe>嵌入编辑窗口。 WOPI协议 定义Web应用与Office服务间的通信标准,关键操作包括文件加载、保存回调和权限控制。 部署Collabora服务端 环境要求 Linux服务器(Ubuntu/CentOS)、Docker。 步骤 拉取Collabora镜像: docker pull collabora/code 启动容器: docker run -t -d -p 9980:9980

【前端|2 ES6 + 核心语法全解析】

ES6 + 核心语法全解析(极简可运行代码 + 避坑 + 快速回顾) 前言 学 ES6 语法时总记混let/const作用域、箭头函数this指向、解构赋值传参规则,还踩过 “const 定义对象改属性报错”“模板字符串换行空格” 的坑,整理了 10 个高频核心语法的「问题 + 思路 + 极简例子」,每个例子都能直接复制运行,方便自己后续快速唤醒记忆,也能让新手看懂核心用法。 一、核心思路 / 概念 ES6(ECMAScript 2015)及后续版本是 JavaScript 的重大升级,核心是解决旧语法痛点 + 简化代码:比如用let/const解决var的全局 / 函数作用域混乱问题,用箭头函数简化回调写法并固定this指向,用解构 / 扩展运算符快速操作数组 / 对象,用Promise/Async-Await解决回调地狱。所有语法都围绕 “写更少的代码,做更多的事”,且完全兼容日常开发(

前端网页开发学习(HTML+CSS+JS)有这一篇就够

前端网页开发学习(HTML + CSS + JS)——真的有这一篇就够了 这是一篇极简但完整的实战向学习路径,目标是: 让你在1–3个月内(每天2–4小时)从零到能独立完成中高级响应式网页、常见交互效果和动态页面。 一、先明确目标与学习顺序(非常重要) 最有效的顺序(不要打乱): 1. HTML 基础 + 语义化(1周) 2. CSS 基础 → 布局 → 现代写法(2–4周) 3. CSS 进阶 + 响应式 + 常见特效(2–3周) 4. JavaScript 基础 + DOM 操作(3–4周) 5. JavaScript 进阶 + 事件 + 异步(3–

IIS 部署 .NET 6 WebApi 实战指南(附优缺点分析)

IIS 部署 .NET 6 WebApi 实战指南(附优缺点分析)

在 .NET 开发体系里,IIS 一直是部署 WebApi 的主力工具。 很多人接口写得很熟练,但真正涉及部署时,却容易卡在环境、权限、证书这些细节上。 今天我们从 0 到 1,把 .NET 6 WebApi 部署到 IIS 上跑起来,同时聊聊它适合做什么、不适合做什么。 一、环境准备 部署前,先确认三件事: 1️⃣ 已安装 IIS 控制面板 → 启用或关闭 Windows 功能 → 勾选: * Internet Information Services * Web 管理工具 * 万维网服务 * 应用程序开发功能 安装完成后访问: http://localhost 能看到默认页面说明成功。 2️⃣ 安装