基于uni-app+vue3+deepseek+uv-ui仿DeepSeek流式AI聊天模板【H5+小程序+App端】_tnui-vue3-uniapp

Uniapp-DeepSeek：全新力作uni-app+vue3接入deepseek流式输出ai模板。

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

vue3-web-deepseek：基于Vite6+Deepseek+ArcoDesign+Markdown构建网页版AI模板
基于electron35+vue3.5+deepseek+arco实战桌面端AI流式聊天系统

技术栈

• 开发工具：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端

uniapp-deepseek支持亮色+暗黑两种主题模式，支持h5+小程序+app端。

项目结构框架

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

uniapp-deepseek跨端ai项目已经同步到我的原创作品集，有需要的可以去看看。
uniapp+deepseek+vue3跨端AI流式输出对话模板

支持在pc端以750px像素宽度展示页面布局。

uniapp+vue3环境变量.env

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

# 项目名称VITE_APPNAME = \'Uniapp-DeepSeek\'# 运行端口VITE_PORT = 5173# DeepSeek API配置VITE_DEEPSEEK_API_KEY = 替换为你的APIKeyVITE_DEEPSEEK_BASE_URL = https://api.deepseek.com

main.js配置

import App from \'./App\'import { createSSRApp } from \'vue\'// 引入pinia状态管理import pinia from \'@/pinia\'export function createApp() { const app = createSSRApp(App) app.use(pinia) return { app, pinia }}

项目结构布局

<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解析流式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端流式

// H5和APP端调用renderjs里的fetch// #ifdef APP-PLUS || H5this.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: \'deepseek-chat\', // deepseek-chat对话模型 deepseek-reasoner推理模型 stream: true, // 流式输出 max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096) temperature: 0.4, // 严谨采样 越低越严谨(默认1) }})// #endif

小程序端流式

// #ifdef MP-WEIXINtry { this.loading = true 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: \'deepseek-chat\', // deepseek-chat对话模型 deepseek-reasoner推理模型 stream: true, // 流式输出 max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096) temperature: 0.4, // 严谨采样 越低越严谨(默认1) }, enableChunked: true, //开启分块传输 transfer-encoding chunked success: (res) => { console.log(\'request success\', res) }, fail: (error) => { console.log(\'request fail\', error) // ... } }) requestTask.onChunkReceived((res) => { // console.log(\'Received chunk\', res) const uint8Array = new Uint8Array(res.data) let text = String.fromCharCode.apply(null, uint8Array) const buffer = decodeURIComponent(escape(text)) this.parseBuffer(buffer) })} catch (error) { this.loading = false this.chatState.updateSession(this.botKey, {loading: false}) throw new Error(`request error: ${error.message || \'请求异常\'}`)}// #endif

ok，以上就是uniapp接入deepseek-v3实战跨三端流式ai助手的一些知识分享。希望对大家有所帮助！

热文推荐

基于electron35+vue3.5+deepseek+arco实战桌面端AI流式聊天系统

基于Vite6+Deepseek+ArcoDesign+Markdown构建网页版AI流式

原创自研electron31+vite5+pinia2仿微信客户端Exe聊天实例

flutter3.27实战抖音app商城|flutter3.x+getX仿抖音直播+短视频+聊天

自研Flutter3.27+getx仿携程app酒店预订模板

Electron31-ViteAdmin桌面端后台|electron31+element-plus客户端后台

自研tauri2.0-vue3-os桌面端仿macos管理系统

uniapp-vue3-wechat：基于uniapp+vue3仿微信app聊天

原创uniapp+vue3+pinia2跨三端(H5+App+小程序)酒店预订模板