基于 uni-app + Vue3 接入 DeepSeek 的智能对话应用
项目概述
🚀 基于 uni-app + Vue3 构建的跨端 AI 对话应用，接入 DeepSeek v4.1 大模型，支持 H5 / 小程序 / Android APP 多端编译
- 技术栈：基于 Uniapp + Vue3，接入 DeepSeek-V3 大模型，支持编译到 H5、小程序和 App 端。
- 核心功能：实现了流式输出（打字机效果）、代码高亮、多轮对话、会话本地存储、亮色/暗黑主题等。
- 实现要点：小程序端通过
uni.request开启enableChunked实现流式，H5 和 App 端用renderjs的fetch实现。
平台兼容性
项目结构目录
uniapp-deepseek跨三端ai对话应用已经同步到我的原创作品集。
uniapp+deepseek+vue3跨端AI流式输出对话模板
快速开始
环境要求
- Node.js >= 18
- HBuilderX >= 5.24
- DeepSeek API Key
核心特性
🔄 流式对话引擎
|
能力
|
说明
|
|---|---|
|
SSE 流式输出
|
基于
uni.request 的 enableChunked 模式，逐字渲染打字效果，延迟 < 100ms |
|
打字机动画
|
类似deepseek打字输出效果
|
|
多轮上下文
|
维护
messages 数组，自动携带历史对话，支持上下文窗口管理（token 裁剪） |
|
本地会话存储
|
基于
uni.setStorageSync 持久化会话列表，支持会话重命名、删除、导出 |
🧠 深度思考链（Reasoning Chain）
|
能力
|
说明
|
|---|---|
|
思维链展示
|
解析 DeepSeek v4.1 的
reasoning_content 字段，以可折叠面板展示推理过程 |
|
渐进式渲染
|
思考链与正文同步流式输出，思考中显示脉冲动画
|
|
状态标识
|
区分「思考中 / 已思考 」状态，UI 差异化呈现
|
📐 数学公式渲染（KaTeX）
|
能力
|
说明
|
|---|---|
|
行内/块级公式
|
支持
$...$ 行内公式与 $$...$$ 块级公式 |
📊 Mermaid 图表渲染（H5 端）
|
能力
|
说明
|
|---|---|
|
实时渲染
|
识别
```mermaid 代码块，调用 Mermaid.js 渲染为 SVG |
|
交互支持
|
支持缩放、平移，点击节点可触发回调
|
|
降级策略
|
非 H5 端自动降级为代码块展示
|
💻 代码块增强
|
能力
|
说明
|
|---|---|
|
Sticky 顶部栏
|
代码块语言标识 + 复制按钮固定吸顶，滚动不消失
|
|
横向滚动
|
长代码行横向滚动，不破坏布局
|
|
行号显示
|
左侧行号列
|
|
语法高亮
|
基于
highlight.js 按需加载语言包，支持 50+ 语言 |
|
一键复制
|
点击复制按钮，写入系统剪贴板，带成功反馈
|
🔗 链接与图片
|
能力
|
说明
|
|---|---|
|
链接跳转
|
自动识别 URL，H5 端
_blank 新窗口打开，APP 端调用 plus.runtime.openURL，小程序端 navigateTo 内部页 |
|
图片预览
|
识别 Markdown 图片，点击调用
uni.previewImage 全屏预览，支持缩放、保存 |
🎨 样式修复（小程序端）
|
问题
|
修复方案
|
|---|---|
|
表格边框线丢失
|
使用
table + border-collapse + 内联 border 属性兜底 |
|
标签选择器失效
|
将
rich-text 组件替换为自定义 mp-html 组件，通过 tag-style 属性注入样式 |
|
深度选择器
|
使用
:deep() 穿透组件样式隔离 |
|
rpx 兼容性
|
统一使用
rpx 单位，避免 px 在小程序端缩放异常 |
支持运行到web端以750px排版居中布局。
项目布局模板
...
+
嘿~ Uniapp-DeepSeek 我可以帮你写代码、答疑解惑、写作各种创意内容，请把你的任务交给我吧~
试试这样问 换一换
{{item.emoji}} {{item.prompt}}
至此，完成了从零搭建 Uniapp + Vue3 集成 DeepSeek-Flash 的实战项目。这套方案通过流式响应实现了丝滑的对话交互。希望这篇实战笔记能为你的 AI 应用开发提供新的思路，让我们一起在 跨端 AI 的浪潮中持续探索。
原文地址: https://www.cveoy.top/t/topic/qHHV 著作权归作者所有。请勿转载和采集!