前言

1. 近年来，人工智能技术的迅速发展，令人惊叹。从图像识别到语音识别，再到自然语言处理等多个领域，人工智能技术的应用范围越来越广泛。

2. 从开发角度讲，常用的idea插件都有支持AI接入，如GitHub Copilot Chat，codeium，豆包，千问等等，对开发者的开发速度有极大的提升。再有如Cursor，Trae等根据设计图或需求文档直接生成完整项目的工具，这些工具对开发人员的冲击是前所未有的。

3. 各种智能问答app也让人眼花缭乱，各种网站也都纷纷引入AI模块，与时俱进~

准备

1. 申请各家模型的API密钥关联相关模型，这里我用的是白山云，性价比相对较高
2. 新建个uniapp项目或者在原有项目中进行集成

开发-uniapp接入

1. 页面布局，这块可自行设计开发

2. AI模型接入

   /**
   * AI回复
   * @param {string} userMessageContent - 用户输入的消息内容
   * @param {number} originalUserMessageId - 用户原始消息的id
   * @returns {Promise}
   */
   let requestTask: any = null;
   const simulateAISend = async (
    userMessageContent: string,
    originalUserMessageId: number
   ): Promise => {
    aiTyping.value = true; // 显示 AI 正在输入提示
    let fullText: any = ""; // 存储完整响应
    let buffer: any = ""; // 缓冲分块数据
    messageIdCounter.value = originalUserMessageId + 1;
    requestTask = uni.request({
      url: AI_API_URL,
      method: "POST",
      header: {
        Authorization: AI_TOKEN,
        "Content-Type": "application/json",
      },
      timeout: 80000, // 设置超时时间为80秒
      data: {
        model: selectedModel.value,
        messages: [{ role: "user", content: userMessageContent }],
        stream: true, // 启用流式传输
      },
      responseType: "text", // 必须设为 text，否则无法接收流式数据
      enableChunked: true, // 启用分块接收（关键配置！）
      // 数据接收回调
      success: (res) => {
        // 找到对应的用户消息并更新状态为 'success'
        const userMsg: any = messages.value.find(
          (msg: any) => msg.id === originalUserMessageId && msg.sender === "user"
        );
        if (userMsg) {
          userMsg.status = "success";
        }
        if (res.statusCode === 200) {
          console.log("流式传输完成");
        } else {
          console.error("API 错误:", res.statusCode);
        }
        scrollToBottom(); // 滚动到新消息
      },
      fail: (error) => {
        aiTyping.value = false;
        console.error("AI Reply Error:", error);
        // 如果发生错误，更新用户消息状态为 'error'
        const userMsg: any = messages.value.find(
          (msg) => msg.id === originalUserMessageId && msg.sender === "user"
        );
        if (userMsg) {
          userMsg.status = "error";
        }
        // 也可以添加一条 AI 错误提示消息
        messages.value.push({
          id: messageIdCounter.value,
          sender: "assistant",
          content: "抱歉，AI服务暂时不可用，请稍后再试。",
        });
      },
      complete: () => {
        aiTyping.value = false;
        requestTask = null;
      },
    });
    // 分块数据接收（核心逻辑）
    requestTask?.onChunkReceived((chunk: any) => {
      // 微信小程序返回的 chunk 是 ArrayBuffer，需转字符串
      const chunkStr = arrayBufferToString(chunk.data);
      buffer += chunkStr;
   
      // 按行解析（API 通常返回 "data: {...}\n\n" 格式）
      const lines = buffer.split("\n");
      buffer = lines.pop(); // 剩余部分暂存
      lines.forEach((line: any) => {
        if (line.trim() === "") return;
        if (line.startsWith("data: ")) {
          const dataStr = line.replace("data: ", "").trim();
          if (dataStr === "[DONE]") return;
          try {
            const data = JSON.parse(dataStr);
            const content = data.choices[0]?.delta?.content || "";
            fullText += content;
   
            // 实时更新UI（逐字显示）
            const obj = {
              id: messageIdCounter.value,
              sender: "assistant",
              content: `【${
                models.value.find((m: any) => m.value === selectedModel.value)
                  .text
              }】：${fullText}`,
            };
            const findIndex = messages.value.findIndex(
              (item: any) => item.id === messageIdCounter.value
            );
            if (findIndex !== -1) {
              messages.value.splice(findIndex, 1, obj);
            } else {
              messages.value.push(obj);
            }
          } catch (e) {
            console.error("JSON 解析失败:", e);
          }
        }
      });
      scrollToBottom(); // 滚动到新消息
    });
   };

3. 体验地址：微信扫码->工具->AI聊天