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

最新推荐文章于 2025-05-07 18:25:26 发布

置顶 xiaoyan_2018

最新推荐文章于 2025-05-07 18:25:26 发布

阅读量878

点赞数 24

分类专栏： uniapp+deepseek-v3 DeepSeek-R1 Vue3+DeepSeek 文章标签： uni-deepseek uniapp+deepseek uniapp跨端ai uni-app+vue3流式 uniapp-vue3ai uniapp仿deepseek

本文链接：https://blog.csdn.net/yanxinyun1990/article/details/147744284

版权

DeepSeek-R1 同时被 3 个专栏收录

10 篇文章

订阅专栏

Vue3+DeepSeek

10 篇文章

订阅专栏

uniapp+deepseek-v3

2 篇文章

订阅专栏

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 = 替换为你的APIKey
VITE_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

在这里插入图片描述
特征

支持代码块横向滚动
支持显示代码行号(关闭提升性能)
支持代码复制功能(h5/app端)
支持图片渲染宽度100%
支持图片预览功能(h5/app端)
支持链接跳转功能(h5/app端)

在这里插入图片描述

uni-app+deepseek跨端流式输出

小程序和app运行环境特殊性，小程序端使用uni.request开启 enableChunked 实现流式，H5和App端采用 renderjs 方式fetch来实现流式功能。

h5+app端流式

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

小程序端流式

// #ifdef MP-WEIXIN
try {
    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