uni-app+vue3集成最新deepseek-flash跨三端ai应用

原创

xiaoyan2018

发布于 2026-10-12 11:21:52

220

文章被收录于专栏：前端进阶实战前端进阶实战

项目概述

🚀 基于 uni-app + Vue3 实战构建的跨多端 AI 流式对话应用，接入 DeepSeek v4.1 大模型，支持 H5 / 小程序 / Android APP 多端编译。

‌技术栈‌：基于 ‌Uniapp + Vue3‌，接入 ‌DeepSeek-V3‌ 大模型，支持编译到 ‌H5、小程序和 App 端‌。
‌核心功能‌：实现了流式输出（打字机效果）、代码高亮、多轮对话、会话本地存储、亮色/暗黑主题等。
‌实现要点‌：小程序端通过 uni.request 开启 enableChunked 实现流式，H5 和 App 端用 renderjs 的 fetch 实现。

平台兼容性

项目结构目录

快速开始

环境要求

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排版居中布局。

项目布局模板

<template>
    <uv3-layout>
        <!-- 导航栏 -->
        <template #header>
            <Toolbar :title="chatSession?.title" />
        </template>
        
        <view v-if="chatSession && !isEmpty(chatSession.data)" class="vu__chatview flexbox flex-col">
            <scroll-view :scroll-into-view="scrollIntoView" scroll-y="true" @scrolltolower="onScrollToLower" @scroll="onScroll" style="height: 100%;">
                <view class="vu__chatbot">
                    ...
                </view>
                <view id="scrollbottom-placeholder" style="height: 1px;"></view>
            </scroll-view>
            <!-- 滚动到底部 -->
            <view class="vu__scrollbottom" @click="scrollToBottom"><text class="iconfont ai-arrD fw-700"></text></view>
        </view>
        <!-- 欢迎信息 -->
        <view v-else class="vu__welcomeinfo">
            <view class="intro flex-c flex-col">
                <view class="logo flex-c" style="gap: 15px;">
                    <view class="iconfont ai-deepseek" style="font-size: 40px;"></view>
                    <text style="color: #999; font-size: 20px;">+</text>
                    <image src="/static/uni.png" mode="widthFix" style="height: 30px; width: 30px;" />
                </view>
                <view class="name"><text class="txt text-gradient">嘿~ Uniapp-DeepSeek</text></view>
                <view class="desc">我可以帮你写代码、答疑解惑、写作各种创意内容，请把你的任务交给我吧~</view>
            </view>
            <view class="prompt">
                <view class="tip flex-c"><text class="flex1">试试这样问</text><view class="flex-c" @click="refreshPrompt">换一换<uni-icons type="refreshempty" color="#999" size="14" /></view></view>
                <view v-for="(item,index) in promptList" :key="index">
                    <view class="option" @click="changePrompt(item.prompt)">{{item.emoji}} {{item.prompt}} <text class="arrow iconfont ai-arrR c-999"></text></view>
                </view>
            </view>
        </view>
        
        <template #footer>
            <view :style="{'padding-bottom': keyboardHeight + 'px'}">
                <ChatEditor ref="editorRef" v-model="promptValue" :scrollBottom="scrollToBottom" />
            </view>
        </template>
    </uv3-layout>
</template>