2026重磅独创uni-appmphtml接入deepseek api跨三端流式打字ai聊天对话系统。uni-deepseek-ai最新款2026跨端ai应用uniappvue3mp-htmlmarkdown集成deepseek-v3.2聊天对话模型。提供浅色深色主题、新增深度思考链、katex数学公式、代码复制/高亮、链接/图片预览支持运行到H5小程序端APP端。三端效果运行到web小程序端安卓端效果。使用技术编辑器HbuilderX 4.87技术框架uni-appvue3pinia2vite5大模型框架DeepSeek-V3.2组件库uni-uiuv-ui高亮插件highlight.jsmarkdown解析ua-markdownmp-html本地缓存pinia-plugin-unistorage支持编译Web小程序APP端uniapp-vue3-deepseek新增深度思考链、latex数学公式、代码复制图片预览、支持h5小程序app端。功能特性基于uni-appvue3接入deepseek api实现流式打字效果支持编译到H5小程序端安卓APP新增深度思考链新增支持katex数学公式支持Mermaid图表渲染(仅H5端)支持代码块顶部sticky粘性、横向滚动、行号、代码复制功能支持各种代码高亮/复制代码、上下文多轮对话/本地会话存储支持链接跳转、图片预览功能修复小程序端表格边框线及各类标签选择器样式失效项目结构目录基于uni-appvue3搭建项目模板接入最新版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项目布局模板templateuv3-layout!--导航栏--template#headerToolbar:titlechatSession?.title//templateviewv-ifchatSession !isEmpty(chatSession.data)classvu__chatview flexbox flex-colscroll-view:scroll-into-viewscrollIntoViewscroll-ytruescrolltoloweronScrollToLowerscrollonScrollstyleheight: 100%;viewclassvu__chatbot.../viewviewidscrollbottom-placeholderstyleheight: 1px;/view/scroll-view!--滚动到底部--viewclassvu__scrollbottomclickscrollToBottomtextclassiconfont ai-arrD fw-700/text/view/view!--欢迎信息--viewv-else classvu__welcomeinfoviewclassintro flex-c flex-colviewclasslogo flex-cstylegap: 15px;viewclassiconfont ai-deepseekstylefont-size: 40px;/viewtextstylecolor: #999; font-size: 20px;/textimagesrc/static/uni.pngmodewidthFixstyleheight: 30px; width: 30px;//viewviewclassnametextclasstxt text-gradient嘿~ Uniapp-DeepSeek/text/viewviewclassdesc我可以帮你写代码、答疑解惑、写作各种创意内容请把你的任务交给我吧~/view/viewviewclasspromptviewclasstip flex-ctextclassflex1试试这样问/textviewclassflex-cclickrefreshPrompt换一换uni-iconstyperefreshemptycolor#999size14//view/viewviewv-for(item,index) in promptList:keyindexviewclassoptionclickchangePrompt(item.prompt){{item.emoji}} {{item.prompt}}textclassarrow iconfont ai-arrR c-999/text/view/view/view/viewtemplate#footerview:style{padding-bottom: keyboardHeight px}ChatEditorrefeditorRefv-modelpromptValue:scrollBottomscrollToBottom//view/template/uv3-layout/templateuni-appvue3渲染markdown由于rich-text组件对小程序有一些限制改为使用mphtml和markdown-it组件解析标签结构。亲测完美支持在H5端小程序端App端流式。修复微信小程序里一些常用标签table、h1-h6 hr...导致样式会失效问题。templateviewclassua__markdownmp-html:contentparseNodeslinktaphandleLinkTap//view/templateconst props defineProps({//解析内容source: String,//是否显示代码块行号(关闭后性能更优)showLine: { type: [Boolean, String],default:true},//开启katexkatex: { type: Boolean,default:true},//markdown-it插件配置plugins: { type: Array,default: () [] }, })uni-appdeepseek流式sse打字效果小程序端使用uni.request开启enableChunked实现流式H5和App端采用renderjs方式fetch来实现流式功能。//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小程序端sse//#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})thrownewError(request error: ${error.message || 请求异常}) }//#endif综上就是UniappVue3对接DeepSeek Api搭建跨三端流式ai的一些项目分享感谢阅读与支持附上几个最新实战项目Vite7DeepSeek网页版Ai助手|vue3arco网页web流式生成ai聊天问答系统electron39-vue3ai电脑端AI模板|electron39deepseekvite7聊天ai应用vite7deepseek流式ai模板|vue3.5deepseek3.2markdown打字输出ai助手Electron38-Vue3OS客户端OS系统|vite7electron38arco桌面os后台管理electron38-admin桌面端后台|Electron38Vue3ElementPlus管理系统Electron38-Wechat电脑端聊天|vite7electron38仿微信桌面端聊天系统最新版Flutter3.38Dart3.10仿写抖音APP直播短视频聊天应用程序flutter3-deepseek流式AI模板|Flutter3.27DioDeepSeeek聊天ai助手最新版uniappvue3uv-ui跨三端短视频直播聊天【H5小程序App端】最新版uni-appvue3uv-ui跨三端仿微信app聊天应用【h5小程序app端】Flutter3-MacOS桌面OS系统|flutter3.32window_manager客户端OS模板Tauri2-Vite7Admin客户端管理后台|tauri2.9vue3element-plus后台系统Tauri2.9Vue3桌面版OS系统|vite7tauri2arcoDesign电脑端os后台模板本文为博主原创文章未经博主允许不得转载欢迎大家一起交流 QQ282310962 wxxy190310