AI 原生架构:鸿蒙App的下一代形态

AI 原生架构:鸿蒙App的下一代形态
在这里插入图片描述

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

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

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

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

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

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

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

文章目录

引言

过去 20 年,移动应用的架构几乎一直是围绕 页面(Page) 设计的。

一个典型 App 的结构通常是:

首页 列表页 详情页 个人中心 

用户通过点击页面完成操作:

进入页面 → 点击按钮 → 请求数据 → 展示结果 

这种模式在传统互联网时代非常成功。

但随着 大模型与 AI Agent 的出现,应用的核心入口正在发生变化:

用户不再一定通过“页面”使用 App,而是通过“对话”和“任务”。

这意味着应用架构也在发生变化。未来很多应用,很可能不再是:

UI 驱动应用 

而是:

AI 驱动应用 

这就是所谓的 AI 原生架构(AI Native Architecture)

一、什么是 AI 原生应用

很多应用只是 接入 AI 功能

App + AI 

例如:

  • 在搜索里加入 AI
  • 在客服里加入 AI
  • 在聊天里加入 AI

这种模式本质还是传统架构。

真正的 AI 原生应用 是:

AI + App 

也就是说:

AI 成为应用的核心入口。

用户的操作可能只是:

一句话 

例如:

帮我订明天去上海的机票 

系统可能自动完成:

查询航班 筛选价格 填写信息 提交订单 

整个流程甚至不需要用户打开多个页面。

二、传统 App 架构的核心问题

传统应用架构通常是这样的:

UI Layer ↓ Service Layer ↓ Repository ↓ Network 

逻辑由 UI 触发:

点击按钮 → 调用接口 

问题在 AI 场景下会变得非常明显。

1 页面成为瓶颈

传统 App 的功能入口是:

页面 

例如:

订单页面 搜索页面 设置页面 

但 AI 应用的入口是:

用户意图 

例如:

“帮我查订单” 

系统直接调用:

OrderService 

不需要进入页面。

2 业务能力难复用

传统 App 的业务逻辑经常写在:

Page ViewModel 

例如:

asyncloadOrders(){const data =await api.get("/orders")this.orders = data }

AI 想复用这个能力时会发现: 代码依赖 UI,无法独立调用。

3 流程是固定的

传统应用:

A → B → C 

流程写死在代码里,但 AI 应用:

流程是动态的 

例如:

订机票 

AI 可能:

先查天气 再推荐航班 再推荐酒店 

流程在运行时决定。

三、AI 原生架构的核心思想

AI 原生应用的架构通常包含几个核心模块:

UI Layer Agent Layer Tool Layer Service Layer Data Layer 

整体结构:

用户输入 ↓ Agent ↓ Tool ↓ Service ↓ Data 

AI 成为系统的 调度中心

四、Agent 层:系统的大脑

Agent 负责:

理解用户意图 规划任务 调用工具 组合结果 

示例代码:

exportclassAgent{asyncrun(input:string){const intent =awaitthis.parseIntent(input)returnawaitthis.execute(intent)}}

Agent 的职责类似:

操作系统调度器 

五、Tool 层:AI 的能力接口

AI 不会直接调用 Service,而是通过 Tool。Tool 的作用:

把系统能力暴露给 AI 

例如:

搜索工具 天气工具 订单工具 

示例:

exportclassOrderTool{asyncexecute(userId:string){returnawait orderService.getOrders(userId)}}

AI 通过 Tool 调用系统能力。

六、Service 层:业务能力

Service 层负责:

业务逻辑 数据组合 

例如:

exportclassFlightService{asyncsearchFlights(city:string){returnawait api.get("/flights")}}

Service 不依赖 UI。

七、UI 层的角色变化

在 AI 原生应用中,UI 的角色会发生变化。传统 App:

UI = 功能入口 

AI 应用:

UI = 交互界面 

例如:

聊天界面 结果展示 任务确认 

示例:

@Entry@Component struct ChatPage {@State input:string=""@State reply:string="" agent: Agent =newAgent()asyncsend(){this.reply =awaitthis.agent.run(this.input)}}

UI 只负责交互。

八、AI 原生架构的优势

这种架构有几个明显优势。

1 能力复用更强

Service 不依赖 UI:

AI Web App 

都可以调用。

2 应用更灵活

流程不再固定:

AI 可以动态组合能力 

例如:

搜索 + 推荐 + 下单 

3 更适合复杂任务

AI 可以处理:

多步骤任务 复杂逻辑 跨模块能力 

传统 App 很难做到。

九、鸿蒙为什么适合 AI 原生应用

鸿蒙系统本身就强调:

分布式能力 跨设备协同 服务化架构 

这些特性与 AI 架构非常契合。

例如:

AI 可以调用:

手机服务 手表服务 平板服务 车机服务 

实现真正的:

跨设备任务执行 

总结

过去的应用架构是:

页面驱动 

未来的应用架构可能是:

AI 驱动 

对比一下:

维度传统 AppAI 原生 App
入口页面意图
流程固定动态
调度UIAgent
能力页面功能Service 能力

换句话说:

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

对于鸿蒙来说,未来应用形态很可能是:

Agent + Service + UI 

而不是传统的:

Page + API 

这就是 AI 原生架构

Read more

新手福音:用快马平台生成windows18-hd19风格页面学前端

作为一名刚接触前端开发的新手,最近我在学习如何实现windows18-hd19风格的页面设计。这种高清界面风格特别适合用来练习现代CSS技巧,特别是毛玻璃效果、动画过渡和交互细节的处理。下面我就分享一下通过InsCode(快马)平台快速实现这个登录页面的过程。 1. 整体布局设计思路 首先需要明确页面的基本结构。windows18-hd19风格的特点是简洁现代,所以采用全屏渐变背景,中间放置一个居中的登录框。登录框使用毛玻璃效果让背景适当模糊,同时添加细微的发光边框提升质感。 2. 背景与毛玻璃效果实现 背景使用CSS的线性渐变实现,从深蓝色过渡到紫色。登录框的毛玻璃效果通过backdrop-filter属性实现,这个属性可以让我们对元素背后的内容应用模糊等滤镜效果。为了兼容性,还需要添加-webkit前缀。 3. 输入框交互细节 输入框获得焦点时的动画效果通过CSS的transition实现。当用户点击输入框时,边框颜色会平滑过渡到高亮状态,同时添加轻微的放大效果提升视觉反馈。这些细节虽然小,但对用户体验很重要。 4. 按钮交互设计 提交按钮的悬停和点击效果分别使用:hov

HTML————更实用于后端宝宝们学习的前端

HTML————更实用于后端宝宝们学习的前端

博主主攻后端,但是毕竟要做网站,我们来学习一点前端的知识,一共有三节,学完就能做一点小小的页面啦; 1.1 HTML基础 什么是HTML呢,他是超文本标记语言,还记得HTTP是啥不,HTTP是超文本传输协议,别忘了哈,超文本就是字面意思,它的能力完全超过了文本,图片,链接,音频都可以放上去,标记语言,就是由标签构成的语言; HTML的所有代码基本都是标签 <h1>我是一级标题</h1> 这个括号<h1> 就是标签,我们学习HTML大部分就是要学习这些标签,注意我们一般用两个标签来表示开始和结束,结束的标签要加上/,开始和结束标签之间就是标签内容,开始标签中可能会带有属性,比如 <h1>我是一级标题</h1> 这就是相当于给h1标签设置了一个唯一标识符, 下面来看看HTML个基本结构,  第一行不用管,第二行HTML是整个html文件的跟标签,

H.265 (HEVC) 网页播放:WebAssembly + FFmpeg 实现浏览器端的硬解/软解兼容方案

H.265 (HEVC) 网页播放:WebAssembly + FFmpeg 实现浏览器端的硬解/软解兼容方案

标签: #WebAssembly #FFmpeg #H.265 #WebCodecs #音视频开发 #前端性能 📉 前言:浏览器对 H.265 的“爱恨情仇” 为什么 <video src="video.h265.mp4"> 在 Chrome 里放不出来? 因为 H.265 的专利池太深了。只有 Safari (即使是 iOS) 和 Edge (需硬件支持) 原生支持较好。 我们的目标是构建一套混合解码方案: 1. 优先硬解 (WebCodecs):如果浏览器支持硬件加速(如 Chrome 94+ 的 WebCodecs),直接调用

使用Open WebUI下载的模型文件(Model)默认存放在哪里?

使用Open WebUI下载的模型文件(Model)默认存放在哪里?

🏡作者主页:点击!  🤖Ollama部署LLM专栏:点击! ⏰️创作时间:2025年2月21日21点21分 🀄️文章质量:95分 文章目录 使用CMD安装存放位置 默认存放路径 Open WebUI下载存放位置 默认存放路径 扩展知识 关于 Ollama 核心价值 服务 关于Open WebUI 核心特点 主要功能 使用场景 Open WebUI下载存放位置 在使用Ollama平台进行深度学习和机器学习模型训练时,了解模型文件的存储位置至关重要。这不仅有助于有效地管理和部署模型,还能确保在需要时能够快速访问和更新这些模型文件。本文将详细探讨Ollama下载的模型文件存放在哪里,并提供相关的操作指南和最佳实践 最后感谢大家 希望这篇文章能帮助你! 使用CMD安装存放位置 以下做测试 我们采用哦llama38B模型来测试 输入命令等待安装即可 默认存放路径 C:\Users\Smqnz\.ollama\models\manifests\registry.ollama.ai 不要直接复制粘贴 我的用户名和你的不一样