登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3 ...

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

辈霖利 6 天前
原创AI实战uniapp+deepseek+vue3跨三端仿DeepSeek/豆包app流式ai对话助手。
uniapp-vue3-deepseek 实战2025对话ai大模型，基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天会话大模型，支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。
三端预览

编译到H5+小程序端+App端运行效果。
1.png

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

基于vue3.5+deepseek搭建网页版ai对话模板

vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
Electron35+Vite6+DeepSeek-V3跨平台桌面端AI流式输出模板

Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板
技术栈


  • 开发工具：Hbuilder X 4.57
  • 技术框架：Uniapp+Vue3+Pinia2+Vite5.x
  • 大模型框架：DeepSeek-V3
  • UI组件库：uni-ui+uv-ui
  • 高亮插件：highlight.js
  • markdown解析：ua-markdown
  • 本地缓存：pinia-plugin-unistorage
  • 支持编译：H5+小程序+APP端
2.png

3.gif

deepseek-uniapp使用最新跨端技术uniapp接入deepseek-v3对话模型，支持编译h5/小程序/app端。
4.gif

5.gif

项目特点


  • 基于Uniapp+Vue3构建，对接DeepSeek-V3实现流式输出效果
  • 支持编译到H5/小程序端/App端
  • 支持各种代码高亮、上下文多轮对话/本地会话存储
  • 支持代码块横向滚动、行号、代码复制功能(h5/app端)
  • 支持图片渲染宽度100%、图片预览功能(h5/app端)
  • 支持链接跳转功能(h5/app端)
  • 修复小程序端表格边框线及各类标签选择器样式失效
6.gif

项目框架结构

uni-deepseek使用 uniapp 搭建项目模板，采用 vue3 setup 语法开发。
7.png

uniapp-deepseek跨端ai助手已经同步到我的原创作品集，感谢支持与鼓励~

uniapp+deepseek+vue3跨端AI流式输出对话模板
8.gif

支持h5在pc端以750px宽度显示布局。
9.png

10.png

11.png

uniapp环境变量.env配置

12.png

在uniapp+vue3项目中，支持.env环境变量配置。
  1. # 项目名称
  2. VITE_APPNAME = 'Uniapp-DeepSeek'
  4. # 运行端口
  5. VITE_PORT = 5173
  7. # DeepSeek API配置
  8. VITE_DEEPSEEK_API_KEY = 替换为你的APIKey
  9. VITE_DEEPSEEK_BASE_URL = https://api.deepseek.com
复制代码
入口文件main.js
  1. import App from './App'
  2. import { createSSRApp } from 'vue'
  4. // 引入pinia状态管理
  5. import pinia from '@/pinia'
  7. export function createApp() {
  8.     const app = createSSRApp(App)
  9.     app.use(pinia)
  10.     return {
  11.         app,
  12.         pinia
  13.     }
  14. }
复制代码
13.png

14.png

项目布局结构

15.png

整个项目布局分为顶部自定义导航栏+会话内容区+底部编辑区三个大模块。
16.png
  1. <template>
  2.     <uv3-layout>
  3.         
  4.         <template #header>
  5.             <Toolbar :title="chatSession?.title" />
  6.         </template>
  7.         
  8.         <view v-if="chatSession && !isEmpty(chatSession.data)" class="vu__chatview flexbox flex-col">
  9.             <scroll-view :scroll-into-view="scrollIntoView" scroll-y="true" @scrolltolower="onScrollToLower" @scroll="onScroll" style="height: 100%;">
  10.                 <view class="vu__chatbot">
  11.                     ...
  12.                 </view>
  13.                 <view id="scrollbottom-placeholder" style="height: 1px;"></view>
  14.             </scroll-view>
  15.             
  16.             <view class="vu__scrollbottom" @click="scrollToBottom"><text class="iconfont ai-arrD fw-700"></text></view>
  17.         </view>
  18.         
  19.         <view v-else class="vu__welcomeinfo">
  20.             <view class="intro flex-c flex-col">
  21.                 <view class="logo flex-c" style="gap: 15px;">
  22.                     <view class="iconfont ai-deepseek" style="font-size: 40px;"></view>
  23.                     <text style="color: #999; font-size: 20px;">+</text>
  24.                     <image src="/static/uni.png" mode="widthFix" style="height: 30px; width: 30px;" />
  25.                 </view>
  26.                 <view class="name"><text class="txt text-gradient">嘿~ Uniapp-DeepSeek</text></view>
  27.                 <view class="desc">我可以帮你写代码、答疑解惑、写作各种创意内容，请把你的任务交给我吧~</view>
  28.             </view>
  29.             <view class="prompt">
  30.                 <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>
  31.                 <view v-for="(item,index) in promptList" :key="index">
  32.                     <view class="option" @click="changePrompt(item.prompt)">{{item.emoji}} {{item.prompt}} <text class="arrow iconfont ai-arrR c-999"></text></view>
  33.                 </view>
  34.             </view>
  35.         </view>
  36.         
  37.         <template #footer>
  38.             <view :style="{'padding-bottom': keyboardHeight + 'px'}">
  39.                 <ChatEditor ref="editorRef" v-model="promptValue" :scrollBottom="scrollToBottom" />
  40.             </view>
  41.         </template>
  42.     </uv3-layout>
  43. </template>
复制代码
17.gif

uniapp+vue3解析markdown结构

uniapp+deepseek流式输出数据，通过之前封装的markdown-it组件解析标签结构。亲测完美支持在H5端+小程序端+App端流式Markdown解析。
18.png

修复微信小程序里rich-text组件不支持标签选择器，导致样式会失效问题。
特性

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

20.png

21.png

22.png

23.png

24.png

25.png

26.png

27.png

28.png

29.png

30.png

uniapp+deepseek实现流式SSE输出

原本打算使用OpenAI来实现流式输出，但在小程序和App不支持该功能。
由于小程序和app运行环境特殊性，最终选择在小程序端使用uni.request开启 enableChunked 实现流式，H5和App端采用 renderjs 方式fetch来实现流式功能。
  1. // H5和APP端调用renderjs里的fetch
  2. // #ifdef APP-PLUS || H5
  3. this.fetchAppH5({
  4.     url: baseURL+'/v1/chat/completions',
  5.     method: 'POST',
  6.     headers: {
  7.         "Content-Type": "application/json",
  8.         "Authorization": `Bearer ${apiKEY}`,
  9.     },
  10.     body: {
  11.         // 多轮会话
  12.         messages: this.multiConversation ? this.historySession : [{role: 'user', content: editorValue}],
  13.         model: 'deepseek-chat', // deepseek-chat对话模型 deepseek-reasoner推理模型
  14.         stream: true, // 流式输出
  15.         max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
  16.         temperature: 0.4, // 严谨采样 越低越严谨(默认1)
  17.     }
  18. })
  19. // #endif
复制代码
  1. // #ifdef MP-WEIXIN
  2. try {
  3.     this.loading = true
  4.    
  5.     const requestTask = await uni.request({
  6.         url: baseURL+'/v1/chat/completions',
  7.         method: 'POST',
  8.         header: {
  9.             "Content-Type": "application/json",
  10.             "Authorization": `Bearer ${apiKEY}`,
  11.         },
  12.         data: {
  13.             // 多轮会话
  14.             messages: this.multiConversation ? this.historySession : [{role: 'user', content: editorValue}],
  15.             model: 'deepseek-chat', // deepseek-chat对话模型 deepseek-reasoner推理模型
  16.             stream: true, // 流式输出
  17.             max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
  18.             temperature: 0.4, // 严谨采样 越低越严谨(默认1)
  19.         },
  20.         enableChunked: true, //开启分块传输 transfer-encoding chunked
  21.         success: (res) => {
  22.             console.log('request success', res)
  23.         },
  24.         fail: (error) => {
  25.             console.log('request fail', error)
  26.             // ...
  27.         }
  28.     })
  29.     requestTask.onChunkReceived((res) => {
  30.         // console.log('Received chunk', res)
  31.         
  32.         const uint8Array = new Uint8Array(res.data)
  33.         let text = String.fromCharCode.apply(null, uint8Array)
  34.         const buffer = decodeURIComponent(escape(text))
  35.         
  36.         this.parseBuffer(buffer)
  37.     })
  38. } catch (error) {
  39.     this.loading = false
  40.     this.chatState.updateSession(this.botKey, {loading: false})
  41.     throw new Error(`request error: ${error.message || '请求异常'}`)
  42. }
  43. // #endif
复制代码

32.png

33.png

以上就是uniapp+vue3对接deepseek实现流式ai对话的一些知识分享，希望对大家有些帮助哈！
flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手

附上几个最新实战项目实例
Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
Vue3-DeepSeek-Chat流式AI对话|vite6+vant4+deepseek智能ai聊天助手
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例
Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统
Vite5+Electron聊天室|electron31跨平台仿微信EXE客户端|vue3聊天程序
34.gif

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
辈霖利
6 天前

0

粉丝关注

6

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫