夜雨聆风
2026款Uniapp+DeepSeek三端流式AI解决方案,完结版!
已关注
关注
重播 分享 赞
https://b23.tv/T5uAsfm-
开发工具：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端
-
支持编译到H5+小程序端+安卓App
-
新增深度思考链
-
新增支持katex数学公式
-
支持Mermaid图表渲染(仅H5端)
-
支持代码块顶部sticky粘性、横向滚动、行号、代码复制功能
-
支持各种代码高亮/复制代码、上下文多轮对话/本地会话存储
-
支持链接跳转、图片预览功能
-
修复小程序端表格边框线及各类标签选择器样式失效
# 项目名称VITE_APPNAME = 'Uniapp-DeepSeek'# 运行端口VITE_PORT = 5173# DeepSeek API配置VITE_DEEPSEEK_API_KEY = 替换为你的KeyVITE_DEEPSEEK_BASE_URL = https://api.deepseek.com
<template><uv3-layout><!-- 导航栏 --><template #header><Toolbar:title="chatSession?.title" /></template><viewv-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%;"><viewclass="vu__chatbot">...</view><viewid="scrollbottom-placeholder"style="height: 1px;"></view></scroll-view><!-- 滚动到底部 --><viewclass="vu__scrollbottom" @click="scrollToBottom"><textclass="iconfont ai-arrD fw-700"></text></view></view><!-- 欢迎信息 --><viewv-elseclass="vu__welcomeinfo"><viewclass="intro flex-c flex-col"><viewclass="logo flex-c"style="gap: 15px;"><viewclass="iconfont ai-deepseek"style="font-size: 40px;"></view><textstyle="color: #999; font-size: 20px;">+</text><imagesrc="/static/uni.png"mode="widthFix"style="height: 30px; width: 30px;" /></view><viewclass="name"><textclass="txt text-gradient">嘿~ Uniapp-DeepSeek</text></view><viewclass="desc">我可以帮你写代码、答疑解惑、写作各种创意内容，请把你的任务交给我吧~</view></view><viewclass="prompt"><viewclass="tip flex-c"><textclass="flex1">试试这样问</text><viewclass="flex-c" @click="refreshPrompt">换一换<uni-iconstype="refreshempty"color="#999"size="14" /></view></view><viewv-for="(item,index) in promptList":key="index"><viewclass="option" @click="changePrompt(item.prompt)">{{item.emoji}} {{item.prompt}} <textclass="arrow iconfont ai-arrR c-999"></text></view></view></view></view><template #footer><view:style="{'padding-bottom': keyboardHeight + 'px'}"><ChatEditorref="editorRef"v-model="promptValue":scrollBottom="scrollToBottom" /></view></template></uv3-layout></template>
<template><viewclass="ua__markdown"><mp-html:content="parseNodes" @linktap="handleLinkTap" /></view></template>
const props = defineProps({// 解析内容source: String,// 是否显示代码块行号(关闭后性能更优)showLine: { type: [Boolean, String], default: true },// 开启katexkatex: { type: Boolean, default: true },// markdown-it插件配置plugins: {type: Array,default: () => []},})
// 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: this.chatState.thinkingEnabled ? 'deepseek-reasoner' : 'deepseek-chat', // deepseek-chat对话模型 deepseek-reasoner推理模型stream: true, // 流式输出max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)temperature: 0.4, // 严谨采样 越低越严谨(默认1)}})// #endif
// #ifdef MP-WEIXINtry {this.loading = truethis.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 chunkedsuccess: (res) => {const { statusCode } = resif (statusCode !== 200) {// 手动处理错误码console.error('请求失败，状态码:', statusCode)this.loading = falsethis.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 = falsethis.answerText = ''this.reasoningText = ''uni.showToast({title: error.errMsg,icon: 'none'})}})requestTask.onChunkReceived((res) => {// console.log('Received chunk', res)// ...})} catch (error) {this.loading = falsethis.chatState.updateSession(this.botKey, {loading: false})throw new Error(`request error: ${error.message || '请求异常'}`)}// #endif
https://b23.tv/T5uAsfm
