uniapp+deepseek流式ai助理|uniapp+vue3对接deepseek三端Ai问答模板

xiaoyan20172026-02-10 12:39

2026重磅独创uni-app+mphtml接入deepseek api跨三端流式打字ai聊天对话系统。

uni-deepseek-ai 最新款2026跨端ai应用uniapp+vue3+mp-html+markdown集成deepseek-v3.2聊天对话模型。提供浅色+深色 主题、新增深度思考链、katex数学公式、代码复制/高亮、链接/图片预览，支持运行到H5+小程序端+APP端。

三端效果

运行到web+小程序端+安卓端效果。

使用技术

  • 编辑器：HbuilderX 4.87
  • 技术框架：uni-app+vue3+pinia2+vite5
  • 大模型框架：DeepSeek-V3.2
  • 组件库：uni-ui+uv-ui
  • 高亮插件：highlight.js
  • markdown解析：ua-markdown+mp-html
  • 本地缓存：pinia-plugin-unistorage
  • 支持编译：Web+小程序+APP端

uniapp-vue3-deepseek新增深度思考链 、latex数学公式 、代码复制 ，图片预览 、支持h5+小程序+app端。

功能特性

  1. 基于uni-app+vue3接入deepseek api实现流式打字效果
  2. 支持编译到H5+小程序端+安卓APP
  3. 新增深度思考链
  4. 新增支持katex数学公式
  5. 支持Mermaid图表渲染(仅H5端)
  6. 支持代码块顶部sticky粘性、横向滚动、行号、代码复制功能
  7. 支持各种代码高亮/复制代码、上下文多轮对话/本地会话存储
  8. 支持链接跳转、图片预览功能
  9. 修复小程序端表格边框线及各类标签选择器样式失效

项目结构目录

基于 uni-app+vue3 搭建项目模板，接入最新版 deepseek-v3.2 大模型。

另外支持运行到web端以750px排版居中布局。

uni-app环境配置.env

替换项目根目录下.env文件里的key，即可体验跨端ai流式对话。

复制代码 
# 项目名称
VITE_APPNAME = 'Uniapp-DeepSeek'

# 运行端口
VITE_PORT = 5173

# DeepSeek API配置
VITE_DEEPSEEK_API_KEY = 替换为你的APIKey
VITE_DEEPSEEK_BASE_URL = https://api.deepseek.com

项目布局模板

复制代码 
<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>

uni-app+vue3渲染markdown

由于rich-text组件对小程序有一些限制，改为使用mphtml和markdown-it组件解析标签结构。亲测完美支持在H5端+小程序端+App端流式。

修复微信小程序里一些常用标签table、h1-h6 hr...，导致样式会失效问题。

复制代码 
<template>
    <view class="ua__markdown">
        <mp-html :content="parseNodes" @linktap="handleLinkTap" />
    </view>
</template>
复制代码 
const props = defineProps({
    // 解析内容
    source: String,
    // 是否显示代码块行号(关闭后性能更优)
    showLine: { type: [Boolean, String], default: true },
    // 开启katex
    katex: { type: Boolean, default: true },
    // markdown-it插件配置
    plugins: {
        type: Array,
        default: () => []
    },
})

uni-app+deepseek流式sse打字效果

小程序端使用uni.request开启 enableChunked 实现流式，H5和App端采用renderjs方式fetch来实现流式功能。

复制代码 
// H5和APP端调用renderjs里的fetch
// #ifdef APP-PLUS || H5
this.fetchAppH5({
    url: baseURL+'/v1/chat/completions',
    method: 'POST',
    headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${apiKEY}`,
    },
    body: {
        // 多轮会话
        messages: this.multiConversation ? this.historySession : [{role: 'user', content: editorValue}],
        model: this.chatState.thinkingEnabled ? 'deepseek-reasoner' : 'deepseek-chat', // deepseek-chat对话模型 deepseek-reasoner推理模型
        stream: true, // 流式输出
        max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
        temperature: 0.4, // 严谨采样 越低越严谨(默认1)
    }
})
// #endif

小程序端sse

复制代码 
// #ifdef MP-WEIXIN
try {
    this.loading = true
    this.answerText = ''
    this.reasoningText = ''
    this.lastUpdate = 0
    
    // 发起新请求前终止旧请求
    const requestTask = await uni.request({
        url: baseURL+'/v1/chat/completions',
        method: 'POST',
        header: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${apiKEY}`,
        },
        data: {
            // 多轮会话
            messages: this.multiConversation ? this.historySession : [{role: 'user', content: editorValue}],
            model: this.chatState.thinkingEnabled ? 'deepseek-reasoner' : 'deepseek-chat',
            stream: true, // 流式输出
            max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
            temperature: 0.4, // 严谨采样 越低越严谨(默认1)
        },
        enableChunked: true, //开启分块传输 transfer-encoding chunked
        success: (res) => {
            const { statusCode } =  res
            if (statusCode !== 200) {
                // 手动处理错误码
                console.error('请求失败，状态码:', statusCode)
                this.loading = false
                this.answerText = ''
                this.reasoningText = ''
                uni.showToast({
                    title: errorMsgCode[statusCode],
                    icon: 'none'
                })
                return
            }
            console.log('request success', res)
        },
        fail: (error) => {
            console.log('request fail', error)
            this.loading = false
            this.answerText = ''
            this.reasoningText = ''
            uni.showToast({
                title: error.errMsg,
                icon: 'none'
            })
        }
    })
    requestTask.onChunkReceived((res) => {
        // console.log('Received chunk', res)
        
        // ...
    })
} catch (error) {
    this.loading = false
    this.chatState.updateSession(this.botKey, {loading: false})
    throw new Error(`request error: ${error.message || '请求异常'}`)
}
// #endif

综上就是Uniapp+Vue3对接DeepSeek Api搭建跨三端流式ai的一些项目分享，感谢阅读与支持！

附上几个最新实战项目

Vite7+DeepSeek网页版Ai助手|vue3+arco网页web流式生成ai聊天问答系统

electron39-vue3ai电脑端AI模板|electron39+deepseek+vite7聊天ai应用

vite7+deepseek流式ai模板|vue3.5+deepseek3.2+markdown打字输出ai助手

Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理

electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统

Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统

最新版Flutter3.38+Dart3.10仿写抖音APP直播+短视频+聊天应用程序

flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手

最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】

最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】

Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板

Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统

Tauri2.9+Vue3桌面版OS系统|vite7+tauri2+arcoDesign电脑端os后台模板

相关推荐
xiaoyan20179 个月前
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
uniapp+deepseek·uniapp+vue3仿deepseek·uni-vue3-deepseek·deepseek-uniapp-ai·uniapp+vue3跨端ai
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05Linux下V2Ray安装配置指南06openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决07AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南08【Linux操作系统12】Git版本控制与GDB调试：从入门到实践09Vue-skills的中文文档10OpenClaw Chrome扩展使用教程 - 浏览器中继控制