一、接口设计

        在正式对接前，需要与后端同学协商好接口格式。我与后端同学讨论后，确定了以下接口规范：

        检测接口用于音视频和文本的内容检测。音频和视频采用 `multipart/form-data` 格式上传，文件大小分别限制在 10MB 和 50MB。文本检测直接发送 JSON 请求体，包含待检测文本内容。

        模拟对话接口采用对话式的接口设计。开始对话接口返回开场白和快捷回复选项，继续对话接口接收用户输入和对话历史，返回 AI 回复和新的快捷选项，结束对话接口返回本次模拟的总结分析和防骗建议。

        统一响应格式为 `{ code, message, data }`，其中 code 为 200 表示成功，500 表示服务器错误，400 表示参数错误，便于前端统一处理各种响应状态。

二、请求封装

        为了避免在每个页面重复编写请求逻辑，我封装了一个 `request.js` 工具模块。该模块对外暴露 `request` 方法和按功能划分的 API 模块。

        `request` 方法基于 Promise 封装，内部自动处理 loading 显示和错误提示。调用时只需传入 url、method、data 等参数，方法会自动添加 loading 遮罩层，请求完成后隐藏。对于文件上传场景，我单独封装了 `uploadFile` 方法，支持上传进度回调，能实时显示上传百分比。

        在业务层面，API 按功能模块划分。`detectionAPI` 封装了四种检测。分别是：接口音频检测、视频检测、文本检测、综合检测，分别对应：detectAudio、detectVideo、detectText、detectMulti 四个接口。`simulateAPI` 封装了模拟对话相关接口，获取剧本、开始对话、继续对话、结束对话，对应的接口分别是：getScripts、startSimulation、continueConversation、endSimulation 四个接口。页面代码调用时只需引入对应模块，传入必要参数即可，无需关心底层 HTTP 请求细节。

// 调用示例

const result = await detectionAPI.detectText(text);

const response = await simulateAPI.continueConversation(scriptId, userInput, history);

 三、检测页面对接

        检测页面的核心是根据用户选择的检测类型调用相应的接口。页面使用 TDesign 的 `t-tabs` 组件实现四种检测模式的切换，用户可以在音频、视频、文本、综合四种模式间切换。

        以音频检测为例，用户点击选择按钮后，通过小程序的 `wx.chooseMessageFile` API 选择聊天记录中的音频文件。文件选择后会显示文件信息，包括文件名、大小和时长。用户确认无误后点击检测按钮，调用 `detectionAPI.detectAudio(filePath)` 上传文件并获取检测结果。

        文本检测的处理稍有不同，由于不需要上传文件，可以直接发送文本内容。用户在文本框输入内容后，点击检测按钮将文本发送给后端分析。文本框支持输入预设的诈骗话术示例，方便用户快速体验检测功能。

        考虑到网络请求可能失败，我在每个接口调用处都添加了 `try/catch` 错误处理。当请求失败时，页面会显示错误提示，同时使用预设的 Mock 数据作为兜底，确保用户始终能看到检测结果界面，不会因为网络问题导致页面卡死。这种设计也使得前端开发可以在后端接口还未完成时正常进行。

 四、模拟诈骗对话对接

        模拟诈骗页面的对接涉及多个环节，每个环节都有对应的接口调用。

        首先是开始模拟，用户选择剧本后点击开始，调用 `simulateAPI.startSimulation(scriptId)`。接口返回 AI 生成的开场白和预设的快捷回复选项，页面展示对话界面。对话采用类聊天软件的设计，AI 消息显示在左侧，用户消息显示在右侧。

        然后是消息交互，这是最核心的对接环节。用户发送消息或点击快捷回复时，调用 `continueConversation` 接口。需要注意的是，对话历史需要完整传递给后端，以便大模型理解上下文。大模型会根据对话历史生成符合当前场景的回复。接口返回 AI 回复后，页面追加到消息列表，并更新新的快捷回复选项。

// 发送消息并获取回复

const response = await simulateAPI.continueConversation(

  currentScript.id,

  inputText,

  JSON.stringify(messages)

);

        最后是结束模拟，对话达到一定轮次后调用 `endSimulation` 接口，获取最终的总结分析、警觉指数评估和防骗建议。

        对话过程中的警觉指数由后端大模型根据对话内容计算，前端只负责累加更新显示。警觉指数以进度条形式实时展示在页面顶部，让用户直观地看到自己的警觉水平。

 五、流式输出体验优化

        大模型生成回复需要一定时间，如果等待较长时间才显示完整结果，会非常影响用户体验，为了提升用户体验，我实现了打字机效果的流式输出，类比各种LLM大模型的对话方式一样。

        具体实现方式是：页面先显示加载状态（显示"..."或加载动画），后端推送 token 时逐步追加显示内容，让用户感知 AI 正在"思考"和"输入"。这种方式不仅减少用户等待的焦虑感，也使得对话节奏更加自然。

        同时，我实现了快捷回复功能。后端在回复时会附带几个推荐回复选项，用户可以直接点击发送，无需手动输入。快捷回复既减少了用户的输入成本，也引导用户按照剧本设计的方式推进对话，提高模拟体验的完整性。

六、总结

        本文完成了诈骗克星小程序与大模型服务的接口对接。前端封装了统一的请求模块，按功能划分为检测 API 和对话 API 两个模块。检测接口支持音频、视频、文本三种检测模式，对话接口实现了完整的模拟诈骗流程。

        两个核心功能模块都已支持真实接口调用，同时保留了 Mock 数据作为开发和测试环境的降级方案。这种设计确保了开发流程不依赖后端进度，前端可以在后端接口未就绪时使用本地模拟数据进行开发和测试。后续与大模型联调时，只需切换到真实接口即可。

        最后也同样需要将代码上传到Git上方便团队队员查看，以及版本控制。具体操作同之前，在VSCode左侧活动栏点击源代码管理图标，选择“+”号提交到暂存的文件，然后上方会显示消息，填写“前端接口完成情况——对应第三篇技术博客”即可（相当于备注的意思），然后选择上方的” ✓“进行提交，这个时候就已经提交至本地仓库。接下来在终端执行命令

git push origin master

进行推送至Gitee，等待大约2s，终端显示“master -> master”即代表成功。