基于 uni-app 与 DeepSeek 的跨端 AI 流式对话系统实战

核心功能亮点

1. 流式打字效果：基于 uni-app+vue3 接入 deepseek api，实现类似原生聊天的打字机体验。
2. 全平台覆盖：一次开发，编译至 H5、小程序端及安卓 APP。
3. 深度思考链：支持展示模型的推理过程，提升回答透明度。
4. 数学公式支持：新增 katex 渲染，完美显示复杂公式。
5. 图表渲染：支持 Mermaid 图表（仅 H5 端），便于数据可视化。
6. 代码块优化：顶部 sticky 粘性定位、横向滚动、行号显示及一键复制。
7. 交互增强：支持代码高亮、上下文多轮对话、本地会话存储。
8. 多媒体处理：支持链接跳转、图片在线预览。

Web 端采用 750px 排版居中布局，适配不同屏幕尺寸。

环境配置

获取 deepseek apikey 后，替换项目根目录下 .env 文件中的 key 即可启动。

# 项目名称
VITE_APPNAME='Uniapp-DeepSeek'
# 运行端口
VITE_PORT=5173
# DeepSeek API 配置
VITE_DEEPSEEK_API_KEY= 替换为你的 APIKey
VITE_DEEPSEEK_BASE_URL= https://api.deepseek.com 

页面布局实现

使用 uv3-layout 构建基础框架，包含导航栏、聊天视图区域及底部输入框。

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

Markdown 渲染方案

在小程序中，rich-text 组件对部分标签支持有限。这里改用 mphtml 配合 markdown-it 解析器，能更稳定地处理 HTML 标签结构。经测试，该方案在 H5、小程序及 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: () => []
  }
})

(此处省略部分渲染效果截图)

小程序流式 SSE 处理

小程序端无法直接使用标准 Fetch 或 WebSocket 进行 SSE 流式传输，需利用 uni.request 开启 enableChunked 特性来实现分块接收。

// #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 }],
      model: this.chatState.thinkingEnabled ? 'deepseek-reasoner' : 'deepseek-chat',
      stream: true, // 流式输出
      max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数
      temperature: 0.4 // 严谨采样，越低越严谨
    },
    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) => {
    // 处理接收到的数据块
    // ... 解析逻辑
  })
} catch (error) {
  this.loading = false
  this.chatState.updateSession(this.botKey, { loading: false })
  throw new Error(`request error: ${error.message || '请求异常'}`)
}
// #endif