最新款uni-app+vue3+mp-html快速对接deepseek-v4-pro跨三端ai智能助手
【摘要】 2026/5最新研发uniapp+vue3+mphtml+markdown-it集成deepseek-v4聊天对话模型。提供浅色+深色主题、新增深度思考链、katex数学公式、代码复制/高亮、链接/图片预览，支持运行到H5+小程序端+APP端。
爆肝一周迭代升级uniapp+vue3+markdown+mp-html深度对接deepseek-v4快速大模型，纯手搓打造web+小程序端+app端通用流式输出ai智能对话模板。
uniapp-vue3-ai项目支持暗黑+浅色主题、新增深度思考链、复制代码、katex数学公式、链接跳转、图片预览等功能。支持运行到H5+小程序+App端。
功能支持性
- 支持深度思考链【三端】✨
- 支持kaTex数学公式【三端】✨
- 支持mermaid图表【仅H5】✨
- 支持代码块滚动粘性、横向滚动、行号、复制代码【三端】✨
- 支持表格、链接、图片预览【三端】✨
项目结构目录
https://b23.tv/zH9uAx3
支持编译到web端，在pc页面以750px宽度布局，h5端支持mermaid图表渲染功能。
uni-app环境变量配置.env
# 项目名称 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支持三端渲染markdown组件
这次升级迭代，替换原先rich-text组件为mp-html来渲染markdown内容。支持小程序katex/代码复制/图片预览等功能。
修复微信小程序里一些常用标签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来实现流式功能。
小程序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}],
// 对话模型(快速模式deepseek-v4-flash 专家模式deepseek-v4-pro)
model: 'deepseek-v4-flash',
// 是否深度思考
thinking: {'type': this.chatState.thinkingEnabled ? 'enabled' : 'disabled'},
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
h5/app端sse
// 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}],
// 对话模型(快速模式deepseek-v4-flash 专家模式deepseek-v4-pro)
model: 'deepseek-v4-flash',
// 是否深度思考
thinking: {'type': this.chatState.thinkingEnabled ? 'enabled' : 'disabled'},
stream: true, // 流式输出
max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
temperature: 0.4, // 严谨采样 越低越严谨(默认1)
}
})
// #endif
获取更多实战项目案例。
Electron38.2实战客户端OS系统|vite7+vue3+electron仿mac/wins桌面
2025最新款Electron38+Vite7+Vue3+ElementPlus桌面客户端后台管理系统Exe
最新研发vite7.0+electron38客户端仿微信EXE聊天软件
原创uniapp+vite5+vue3+uv-ui跨三端短视频+直播+聊天app应用
uni-app+deepseek-v3跨三端ai流式输出对话模板
2025最新款Tauri2.9+Vite7+Vue3+ElementPlus电脑端后台管理系统Exe
最新版Vite7.1+Tauri2.8+Vue3电脑端仿QQ/微信聊天程序
Flutter3.32实战桌面端OS系统|flutter3仿macOS桌面
flutter3.27跨平台仿微信客户端聊天Exe程序|朋友圈|短视频
flutter3+deepseek手机端ai流式输出聊天模板
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）