2026年uni-app手撸deepseek小程序+安卓+web端流式ai聊天对话

2026年跨多端ai实战 - 基于 uniapp+vue3+mp-html+markdown 调用 deepseek-v3.2 聊天对话模型。内置浅色+暗黑主题、新增深度思考链、katex数学公式、代码复制/高亮、链接/图片预览，支持运行到Web+小程序端+安卓端。

使用技术

• 开发工具：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
• 支持编译：h5+小程序+app端

三端支持性如下

1. 支持深度思考链（三端）✨
2. 支持LaTex数学公式（三端）✨
3. 支持Mermaid图表（H5）✨
4. 支持代码块滚动粘性、横向滚动、行号、复制代码（三端）✨
5. 支持表格、链接、图片预览（三端）✨

uniapp-deepseek三端ai模板已经同步到我的原创作品集。
uniapp+deepseek+vue3跨端AI流式输出对话模板

项目结构目录

基于uniapp+vue3搭建项目框架，接入最新deepseek api大模型。

项目通用布局

<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>

uniapp+mphtml解析流式markdown

由于rich-text组件对小程序有一些限制，改为使用mphtml和markdown-it组件解析标签结构。亲测完美支持在web端+小程序端+app端。

<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: () => []
    },
})

2026款Vite7+DeepSeek网页版Ai助手|vue3+arco网页web流式生成ai聊天问答系统
electron39-vue3ai电脑端AI模板|electron39+deepseek+vite7聊天ai应用
vite7+deepseek流式ai模板|vue3.5+deepseek3.2+markdown打字输出ai助手
electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理
最新版Flutter3.38+Dart3.10仿写抖音APP直播+短视频+聊天应用程序
Tauri2.9+Vue3桌面版OS系统|vite7+tauri2+arcoDesign电脑端os后台模板
Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统
Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
最新研发uniapp-vue3-os手机oa系统|uni-app+vue3跨三端os后台管理模板
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
Flutter3.32+Dart3.8跨平台仿微信app聊天界面|朋友圈
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)