重磅跨端AI心血之作，基于uniapp+vue3集成deepseek-v3聊天大模型实战跨三端ai问答小助手。支持编译到H5+小程序+App端。实现流式打字输出效果、支持亮色/暗黑主题、各种代码高亮、会话本地存储等功能。

技术栈

• 开发工具：hbuilderx 4.57
• 技术框架：uni-app+vue3+pinia2+vite5.x
• 大模型框架：deepseek-v3-0324
• UI组件库：uni-ui+uv-ui
• 高亮插件：highlight.js
• markdown解析：ua-markdown
• 本地缓存：pinia-plugin-unistorage
• 支持编译：H5+小程序+APP端

项目结构框架

使用跨平台框架uni-app+vue3搭建项目模板，集成deepseek-v3聊天模型，实现stream流式输出效果，全部采用vue3 setup语法编码。

uniapp+vue3环境变量.env

uni-app+vue3项目支持配置.env环境变量文件。
去deepseek官网申请一个key，替换掉.env文件里的Key，即可畅快体验deepseek流式对话。

main.js配置

项目结构布局

uni-app解析流式markdown

特征

1. 支持代码块横向滚动
2. 支持显示代码行号(关闭提升性能)
3. 支持代码复制功能(h5/app端)
4. 支持图片渲染宽度100%
5. 支持图片预览功能(h5/app端)
6. 支持链接跳转功能(h5/app端)

uni-app+deepseek跨端流式输出

小程序和app运行环境特殊性，小程序端使用uni.request开启 enableChunked 实现流式，H5和App端采用 renderjs 方式fetch来实现流式功能。

h5+app端流式

小程序端流式

关键代码解析

1. 流式数据处理

• 使用 fetch + ReadableStream 处理分块数据

• 通过 TextDecoder 解析二进制流

• 实时拼接内容并更新响应式数据

2. 性能优化技巧

3. 跨平台适配方案

注意事项

1. 安全规范

   • API Key 应存储在后端，前端示例仅用于演示

   • 生产环境建议通过自有服务器转发请求

2. 流式控制

   • 添加中止控制器防止重复请求

3. 体验优化

   • 添加加载状态指示

   • 实现消息滚动到底部

   • 支持 Markdown 格式渲染

项目扩展建议

1. 集成本地缓存历史记录

2. 添加多模型切换功能

3. 实现文件上传解析能力

4. 开发语音输入支持

 写在最后：更多AI学习资料请添加学习助手领取资料礼包

视频学习资料：

从0开始开发超级AI智能体，干掉所有重复工作

• 基于字节的coze平台从0到1搭建我们自己的智能体
• 从coze到超级创业个体：2025是AI Agent大爆炸的元年！
• 搭建智能体的七大步骤：需求梳理、软件选型、提示工程、数据库、构建 UI 界面、测试评估、部署
• 你的智能体如何并行调用多个通用AI大模型？
• 实战案例：AI Agent提取小红书文案以及图像进行OCR文字识别并同步写入飞书多维表格
• 实战案例：AI Agent提取抖音爆款短视频链接中的文案，基于大模型和提示词完成符合小红书风格和作者特点的文案仿写

DeepSeek AI Agent +自动化助力企业实现 AI 改造实战

• DeepSeek 大模型的本地部署与客户端chatbox本地知识库
• 程序员的跨时代产品，AI 代码编辑器cursor深入浅出与项目构建
• 软件机器人工具影刀RPA工业化地基本使用
• 影刀RPA WEB自动化采集Boss直聘岗位信息并存储
• 影刀AI Power与DeepSeek 工作流构建影刀AI Agent
• AI HR实战：结合影刀RPA+DeepSeek AI智能体，实现智能自动招聘机器人

大模型技术+ 数字人+混剪造就副业王炸组合

• 数字人的概念与价值
• 当前数字人的时代背景
• 数字人的市场需求
• 数字人与自媒体的关系和发展路径
• 商业化数字人的变现之路
• 基于coze搭建数字人超级智能体
• 大模型技术+数字人+混剪=最强副业方向
• AI大模型与数字人造就3分钟获客300条精准线索
• AI副业接单渠道与流量变现
• 程序员开发的AI数字人实战