Qwen1.5-1.8B GPTQ与微信小程序开发结合打造智能聊天应用最近在捣鼓一些AI应用落地的小项目发现很多开发者对如何把大模型能力塞进微信小程序里特别感兴趣。想想也是小程序用起来方便用户粘性又高要是能结合上AI的智能对话能力能玩出不少花样。今天我就以Qwen1.5-1.8B这个轻量级模型的GPTQ量化版本为例跟大家聊聊怎么从零开始把一个部署好的模型服务跟微信小程序前端无缝对接起来最终做出一个能流畅聊天的智能应用。整个过程其实可以拆成两大块一块是后端你得有个稳定、高效的模型API服务另一块是前端也就是微信小程序它负责把用户的输入发出去再把模型“说”的话漂亮地展示回来。听起来好像挺复杂但跟着步骤一步步来你会发现每个环节都有成熟的方案和工具实现起来比想象中要顺畅。1. 项目整体思路与准备工作在动手写代码之前咱们先得把整个项目的蓝图在心里画清楚。这个智能聊天小程序的核心逻辑很简单用户在小程序里输入问题或对话小程序把这个文本通过网络请求发送给我们部署好的Qwen1.5模型服务模型处理完生成回复再把回复传回小程序最终显示给用户。为了实现这个目标我们需要准备两个核心部分后端服务这是大脑。你需要一个已经部署好的Qwen1.5-1.8B GPTQ模型并且它得提供标准的HTTP API接口。通常我们会用像FastAPI、Flask这样的Web框架来包装模型推理代码对外暴露一个/chat或/generate这样的端点。考虑到小程序对网络请求的安全要求我们还需要为这个API配置好鉴权比如API Key和基本的限流策略防止被滥用。前端小程序这是脸面。我们要在微信开发者工具里创建一个小程序项目它的页面需要包含一个聊天界面——大致就是上面是对话历史的气泡列表下面是一个输入框和发送按钮。小程序的JavaScript代码负责收集用户输入调用封装好的网络请求模块将数据发送到后端API并处理返回的结果特别是如果支持流式响应处理起来会更有趣最后更新界面。为了让后续的步骤更清晰假设你已经完成了以下几项准备工作模型服务已就绪Qwen1.5-1.8B GPTQ模型已经使用类似text-generation-inference或自定义的FastAPI服务部署在某台服务器上并且可以通过一个URL例如https://your-api-domain.com/v1/chat/completions访问到其聊天接口。小程序账号与工具你已经注册了微信小程序账号拿到了AppID并且在电脑上安装好了微信开发者工具。基础开发知识对微信小程序的基本框架WXML、WXSS、JS、JSON有一定的了解并且熟悉JavaScript的异步编程Promiseasync/await。2. 后端API服务的关键设计虽然模型部署的细节不是本文重点但为了让小程序能安全、高效地调用后端API的设计有几个要点需要特别关注。这些设计直接影响到前端开发的复杂度和最终用户体验。2.1 设计简洁的聊天接口你的模型服务应该提供一个对前端友好的HTTP接口。一个通用的设计是模仿OpenAI的ChatCompletions格式这样前端处理起来会很熟悉。# 这是一个基于FastAPI的后端接口示例核心部分 from fastapi import FastAPI, HTTPException, Depends from pydantic import BaseModel from typing import List, Optional app FastAPI(titleQwen1.5 Chat API) # 定义请求数据模型 class ChatMessage(BaseModel): role: str # user 或 assistant content: str class ChatRequest(BaseModel): messages: List[ChatMessage] max_tokens: Optional[int] 512 stream: Optional[bool] False # 是否启用流式输出 app.post(/v1/chat/completions) async def chat_completion(request: ChatRequest, api_key: str Depends(verify_api_key)): 处理聊天补全请求。 verify_api_key 是一个依赖项用于鉴权。 # 1. 将 messages 列表转换为模型所需的输入格式 formatted_input format_messages_for_qwen(request.messages) # 2. 调用加载好的Qwen1.5-1.8B GPTQ模型进行推理 # 这里假设有一个全局的 model 和 tokenizer 对象 if request.stream: # 流式生成逻辑返回一个EventSourceResponse def generate_stream(): for chunk in model.generate_stream(formatted_input, max_lengthrequest.max_tokens): # 将生成的token解码并按照特定格式如OpenAI流式格式yield出去 yield fdata: {chunk}\n\n return StreamingResponse(generate_stream(), media_typetext/event-stream) else: # 非流式生成逻辑 full_output model.generate(formatted_input, max_lengthrequest.max_tokens) response_content tokenizer.decode(full_output, skip_special_tokensTrue) # 3. 构造标准化的响应 return { id: chatcmpl- generate_unique_id(), object: chat.completion, created: int(time.time()), choices: [{ index: 0, message: { role: assistant, content: response_content }, finish_reason: length if len(full_output) request.max_tokens else stop }] }这个接口设计的好处是它既支持一次性返回完整回复也支持流式stream输出。流式输出能让用户看到模型一个字一个字“思考”和“回答”的过程体验上会流畅很多尤其对于生成长文本时。2.2 实现API鉴权与限流小程序端发出的请求必须经过授权我们不能让接口裸奔在公网上。最简单的鉴权方式是使用API Key。# 简单的API Key验证依赖项 from fastapi import Header, HTTPException API_KEYS {your-secret-api-key-for-miniprogram} # 在实际应用中应从安全配置中读取 async def verify_api_key(x_api_key: str Header(None, aliasX-API-Key)): if x_api_key not in API_KEYS: raise HTTPException(status_code403, detailInvalid API Key) return x_api_key在小程序端发起请求时就需要在请求头中带上这个X-API-Key。限流是为了保护你的模型服务不被某个用户或意外循环请求打垮。可以使用像slowapi这样的中间件。from slowapi import Limiter, _rate_limit_exceeded_handler from slowapi.util import get_remote_address from slowapi.errors import RateLimitExceeded limiter Limiter(key_funcget_remote_address) app.state.limiter limiter app.add_exception_handler(RateLimitExceeded, _rate_limit_exceeded_handler) app.post(/v1/chat/completions) limiter.limit(10/minute) # 限制每个IP每分钟10次请求 async def chat_completion(request: ChatRequest, api_key: str Depends(verify_api_key)): # ... 原有逻辑做好这些后端服务就具备了基本的安全性、可用性和标准化的交互方式前端调用起来会省心很多。3. 微信小程序前端开发实战前端的工作就是打造一个美观、交互流畅的聊天界面并实现与后端API的通信。我们从小程序的项目结构开始。3.1 搭建聊天界面首先我们设计一个简单的单页聊天应用。页面的WXML结构主要包括三个部分顶部的标题栏、中间的聊天记录滚动区域、底部的输入框和发送按钮。!-- pages/chat/chat.wxml -- view classcontainer !-- 标题 -- view classheaderQwen智能助手/view !-- 聊天记录区域 -- scroll-view classchat-list scroll-y scroll-with-animation scroll-top{{scrollTop}} enable-back-to-top block wx:for{{messages}} wx:keyindex view classmessage-row {{item.role}} view classavatar{{item.role user ? 我 : AI}}/view view classbubble{{item.content}}/view /view /block !-- 流式响应加载指示器 -- view wx:if{{isStreaming}} classmessage-row assistant view classavatarAI/view view classbubble streaming{{streamingText}}text classcursor▌/text/view /view /scroll-view !-- 输入区域 -- view classinput-area input classinput value{{inputValue}} bindinputonInput placeholder请输入您的问题... confirm-typesend bindconfirmsendMessage / button classsend-btn bindtapsendMessage disabled{{isLoading}}发送/button /view /view相应的WXSS样式文件需要定义这些组件的布局和外观比如气泡对话框、滚动区域、输入框的样式等这里就不展开全部代码了核心是让聊天记录清晰可读输入区域固定在下方便于操作。3.2 封装网络请求模块小程序与后端通信我们使用微信提供的wx.requestAPI。为了代码整洁和复用我们通常会把所有网络请求逻辑封装在一个独立的工具模块中。// utils/api.js const API_BASE_URL https://your-api-domain.com; // 你的后端服务地址 const API_KEY your-secret-api-key-for-miniprogram; // 从小程序云函数或安全存储获取注意前端存储的安全风险 /** * 发起聊天请求 * param {Array} messages - 消息历史数组格式如 [{role: user, content: 你好}] * param {boolean} stream - 是否使用流式响应 * returns {Promise} - 返回Promiseresolve为完整响应或一个可读流处理器 */ function chatCompletion(messages, stream false) { return new Promise((resolve, reject) { const requestTask wx.request({ url: ${API_BASE_URL}/v1/chat/completions, method: POST, header: { Content-Type: application/json, X-API-Key: API_KEY }, data: { messages: messages, max_tokens: 1024, stream: stream }, responseType: stream ? text : json, // 流式响应需要以文本形式接收 enableChunked: stream, // 启用分块传输模式 success(res) { if (!stream) { // 非流式响应直接解析JSON if (res.statusCode 200) { resolve(res.data); } else { reject(new Error(请求失败: ${res.statusCode})); } } else { // 对于流式响应success回调触发时表示连接已建立实际数据在onChunkReceived处理 // 这里我们返回一个控制器让页面逻辑可以处理数据流 resolve({ requestTask: requestTask, onChunkReceived: (callback) { // 这是一个简化处理实际需要解析SSE格式 (data: ...\n\n) let buffer ; requestTask.onChunkReceived((res) { buffer res.data; const lines buffer.split(\n\n); buffer lines.pop(); // 最后可能是不完整的行 for (const line of lines) { if (line.startsWith(data: )) { const dataStr line.slice(6); if (dataStr [DONE]) { callback(null, true); // 结束信号 } else { try { const chunk JSON.parse(dataStr); callback(chunk, false); } catch(e) { console.error(解析流数据失败:, e); } } } } }); } }); } }, fail(err) { reject(err); } }); }); } module.exports { chatCompletion };这个封装函数处理了两种模式。非流式模式直接返回完整的JSON响应。流式模式则复杂一些它利用了wx.request的enableChunked和onChunkReceived特性将接收到的数据块遵循Server-Sent Events格式实时解析并回调给页面逻辑。3.3 实现会话管理与流式显示现在我们把界面和网络层连接起来。页面的JavaScript逻辑需要管理对话历史、处理用户输入、调用API并更新UI。// pages/chat/chat.js const api require(../../utils/api.js); Page({ data: { messages: [], // 完整的对话历史 inputValue: , isLoading: false, isStreaming: false, streamingText: , // 当前流式响应的累积文本 scrollTop: 0 }, onInput(e) { this.setData({ inputValue: e.detail.value }); }, async sendMessage() { const userInput this.data.inputValue.trim(); if (!userInput || this.data.isLoading) return; // 1. 更新UI添加用户消息清空输入框显示加载状态 const userMsg { role: user, content: userInput }; const updatedMessages [...this.data.messages, userMsg]; this.setData({ messages: updatedMessages, inputValue: , isLoading: true, scrollTop: 99999 // 滚动到底部 }); try { // 2. 决定使用流式还是非流式这里以流式为例 const useStream true; if (useStream) { await this.handleStreamingResponse(updatedMessages); } else { await this.handleNormalResponse(updatedMessages); } } catch (error) { console.error(请求出错:, error); wx.showToast({ title: 请求失败请重试, icon: none }); // 可选在消息列表中显示错误信息 const errorMsg { role: assistant, content: 抱歉出错了: ${error.message} }; this.setData({ messages: [...this.data.messages, errorMsg], isLoading: false }); } finally { this.setData({ isLoading: false }); } }, async handleNormalResponse(messagesHistory) { const response await api.chatCompletion(messagesHistory, false); const assistantReply response.choices[0].message.content; const assistantMsg { role: assistant, content: assistantReply }; this.setData({ messages: [...this.data.messages, assistantMsg], scrollTop: 99999 }); }, async handleStreamingResponse(messagesHistory) { this.setData({ isStreaming: true, streamingText: }); const streamController await api.chatCompletion(messagesHistory, true); let fullText ; return new Promise((resolve, reject) { streamController.onChunkReceived((chunk, isDone) { if (isDone) { // 流式传输结束 const assistantMsg { role: assistant, content: fullText }; this.setData({ messages: [...this.data.messages, assistantMsg], isStreaming: false, streamingText: , scrollTop: 99999 }); resolve(); } else if (chunk.choices chunk.choices[0].delta.content) { // 接收到新的文本片段 const textDelta chunk.choices[0].delta.content; fullText textDelta; // 实时更新UI中的临时流式显示区域 this.setData({ streamingText: fullText, scrollTop: 99999 }); } }); // 如果需要可以保存requestTask以便在页面卸载时中断请求 // this.streamRequestTask streamController.requestTask; }); } });这段代码是前端逻辑的核心。handleStreamingResponse函数展示了如何处理流式响应它逐步累积接收到的文本片段并实时更新页面上的一个临时显示区域streamingText直到接收到结束信号[DONE]再将完整的回复存入正式的聊天历史。这种“打字机”效果能极大提升用户体验。4. 项目优化与部署建议一个基本可用的聊天应用已经完成了。但要让它更健壮、更可用还有一些优化点值得考虑。会话管理目前的对话历史只存在于小程序本次生命周期中关闭页面就没了。你可以利用小程序的本地存储wx.setStorageSync来保存重要的对话记录或者在后端为用户建立简单的会话ID实现多轮对话的持久化。错误处理与用户体验网络请求可能失败模型响应可能超时。除了基本的try-catch可以增加重试机制、超时提示、以及更友好的加载动画比如一个跳动的“AI正在思考...”的指示器。性能优化如果对话历史很长每次都将全部历史发送给后端会增加延迟和负担。可以考虑只发送最近N轮对话或者让后端自己管理上下文。对于流式响应确保及时清理事件监听器防止内存泄漏。安全加固将API Key硬编码在前端代码中是极不安全的容易被提取。更安全的做法是使用小程序云函数作为中继。前端调用云函数云函数内保存API Key并向后端服务发起请求这样密钥就不会暴露给客户端。部署上线后端服务部署到云服务器后记得配置好HTTPS小程序要求网络请求必须是HTTPS并设置好域名。在小程序管理后台将你的后端服务域名添加到request合法域名列表中。前端的小程序代码则通过微信开发者工具上传、提交审核、发布即可。整个流程走下来你会发现将Qwen1.5这样的轻量模型与微信小程序结合技术路径是清晰的。关键在于前后端接口的规范设计、以及前端对流式响应等特性的良好支持。这个案例提供了一个完整的骨架你可以在此基础上添加更多功能比如语音输入、多模态理解如果模型支持、对话风格选择等打造出更具个性化和实用价值的智能小程序。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Qwen1.5-1.8B GPTQ与微信小程序开发结合：打造智能聊天应用
发布时间：2026/6/11 14:41:18
Qwen1.5-1.8B GPTQ与微信小程序开发结合打造智能聊天应用最近在捣鼓一些AI应用落地的小项目发现很多开发者对如何把大模型能力塞进微信小程序里特别感兴趣。想想也是小程序用起来方便用户粘性又高要是能结合上AI的智能对话能力能玩出不少花样。今天我就以Qwen1.5-1.8B这个轻量级模型的GPTQ量化版本为例跟大家聊聊怎么从零开始把一个部署好的模型服务跟微信小程序前端无缝对接起来最终做出一个能流畅聊天的智能应用。整个过程其实可以拆成两大块一块是后端你得有个稳定、高效的模型API服务另一块是前端也就是微信小程序它负责把用户的输入发出去再把模型“说”的话漂亮地展示回来。听起来好像挺复杂但跟着步骤一步步来你会发现每个环节都有成熟的方案和工具实现起来比想象中要顺畅。1. 项目整体思路与准备工作在动手写代码之前咱们先得把整个项目的蓝图在心里画清楚。这个智能聊天小程序的核心逻辑很简单用户在小程序里输入问题或对话小程序把这个文本通过网络请求发送给我们部署好的Qwen1.5模型服务模型处理完生成回复再把回复传回小程序最终显示给用户。为了实现这个目标我们需要准备两个核心部分后端服务这是大脑。你需要一个已经部署好的Qwen1.5-1.8B GPTQ模型并且它得提供标准的HTTP API接口。通常我们会用像FastAPI、Flask这样的Web框架来包装模型推理代码对外暴露一个/chat或/generate这样的端点。考虑到小程序对网络请求的安全要求我们还需要为这个API配置好鉴权比如API Key和基本的限流策略防止被滥用。前端小程序这是脸面。我们要在微信开发者工具里创建一个小程序项目它的页面需要包含一个聊天界面——大致就是上面是对话历史的气泡列表下面是一个输入框和发送按钮。小程序的JavaScript代码负责收集用户输入调用封装好的网络请求模块将数据发送到后端API并处理返回的结果特别是如果支持流式响应处理起来会更有趣最后更新界面。为了让后续的步骤更清晰假设你已经完成了以下几项准备工作模型服务已就绪Qwen1.5-1.8B GPTQ模型已经使用类似text-generation-inference或自定义的FastAPI服务部署在某台服务器上并且可以通过一个URL例如https://your-api-domain.com/v1/chat/completions访问到其聊天接口。小程序账号与工具你已经注册了微信小程序账号拿到了AppID并且在电脑上安装好了微信开发者工具。基础开发知识对微信小程序的基本框架WXML、WXSS、JS、JSON有一定的了解并且熟悉JavaScript的异步编程Promiseasync/await。2. 后端API服务的关键设计虽然模型部署的细节不是本文重点但为了让小程序能安全、高效地调用后端API的设计有几个要点需要特别关注。这些设计直接影响到前端开发的复杂度和最终用户体验。2.1 设计简洁的聊天接口你的模型服务应该提供一个对前端友好的HTTP接口。一个通用的设计是模仿OpenAI的ChatCompletions格式这样前端处理起来会很熟悉。# 这是一个基于FastAPI的后端接口示例核心部分 from fastapi import FastAPI, HTTPException, Depends from pydantic import BaseModel from typing import List, Optional app FastAPI(titleQwen1.5 Chat API) # 定义请求数据模型 class ChatMessage(BaseModel): role: str # user 或 assistant content: str class ChatRequest(BaseModel): messages: List[ChatMessage] max_tokens: Optional[int] 512 stream: Optional[bool] False # 是否启用流式输出 app.post(/v1/chat/completions) async def chat_completion(request: ChatRequest, api_key: str Depends(verify_api_key)): 处理聊天补全请求。 verify_api_key 是一个依赖项用于鉴权。 # 1. 将 messages 列表转换为模型所需的输入格式 formatted_input format_messages_for_qwen(request.messages) # 2. 调用加载好的Qwen1.5-1.8B GPTQ模型进行推理 # 这里假设有一个全局的 model 和 tokenizer 对象 if request.stream: # 流式生成逻辑返回一个EventSourceResponse def generate_stream(): for chunk in model.generate_stream(formatted_input, max_lengthrequest.max_tokens): # 将生成的token解码并按照特定格式如OpenAI流式格式yield出去 yield fdata: {chunk}\n\n return StreamingResponse(generate_stream(), media_typetext/event-stream) else: # 非流式生成逻辑 full_output model.generate(formatted_input, max_lengthrequest.max_tokens) response_content tokenizer.decode(full_output, skip_special_tokensTrue) # 3. 构造标准化的响应 return { id: chatcmpl- generate_unique_id(), object: chat.completion, created: int(time.time()), choices: [{ index: 0, message: { role: assistant, content: response_content }, finish_reason: length if len(full_output) request.max_tokens else stop }] }这个接口设计的好处是它既支持一次性返回完整回复也支持流式stream输出。流式输出能让用户看到模型一个字一个字“思考”和“回答”的过程体验上会流畅很多尤其对于生成长文本时。2.2 实现API鉴权与限流小程序端发出的请求必须经过授权我们不能让接口裸奔在公网上。最简单的鉴权方式是使用API Key。# 简单的API Key验证依赖项 from fastapi import Header, HTTPException API_KEYS {your-secret-api-key-for-miniprogram} # 在实际应用中应从安全配置中读取 async def verify_api_key(x_api_key: str Header(None, aliasX-API-Key)): if x_api_key not in API_KEYS: raise HTTPException(status_code403, detailInvalid API Key) return x_api_key在小程序端发起请求时就需要在请求头中带上这个X-API-Key。限流是为了保护你的模型服务不被某个用户或意外循环请求打垮。可以使用像slowapi这样的中间件。from slowapi import Limiter, _rate_limit_exceeded_handler from slowapi.util import get_remote_address from slowapi.errors import RateLimitExceeded limiter Limiter(key_funcget_remote_address) app.state.limiter limiter app.add_exception_handler(RateLimitExceeded, _rate_limit_exceeded_handler) app.post(/v1/chat/completions) limiter.limit(10/minute) # 限制每个IP每分钟10次请求 async def chat_completion(request: ChatRequest, api_key: str Depends(verify_api_key)): # ... 原有逻辑做好这些后端服务就具备了基本的安全性、可用性和标准化的交互方式前端调用起来会省心很多。3. 微信小程序前端开发实战前端的工作就是打造一个美观、交互流畅的聊天界面并实现与后端API的通信。我们从小程序的项目结构开始。3.1 搭建聊天界面首先我们设计一个简单的单页聊天应用。页面的WXML结构主要包括三个部分顶部的标题栏、中间的聊天记录滚动区域、底部的输入框和发送按钮。!-- pages/chat/chat.wxml -- view classcontainer !-- 标题 -- view classheaderQwen智能助手/view !-- 聊天记录区域 -- scroll-view classchat-list scroll-y scroll-with-animation scroll-top{{scrollTop}} enable-back-to-top block wx:for{{messages}} wx:keyindex view classmessage-row {{item.role}} view classavatar{{item.role user ? 我 : AI}}/view view classbubble{{item.content}}/view /view /block !-- 流式响应加载指示器 -- view wx:if{{isStreaming}} classmessage-row assistant view classavatarAI/view view classbubble streaming{{streamingText}}text classcursor▌/text/view /view /scroll-view !-- 输入区域 -- view classinput-area input classinput value{{inputValue}} bindinputonInput placeholder请输入您的问题... confirm-typesend bindconfirmsendMessage / button classsend-btn bindtapsendMessage disabled{{isLoading}}发送/button /view /view相应的WXSS样式文件需要定义这些组件的布局和外观比如气泡对话框、滚动区域、输入框的样式等这里就不展开全部代码了核心是让聊天记录清晰可读输入区域固定在下方便于操作。3.2 封装网络请求模块小程序与后端通信我们使用微信提供的wx.requestAPI。为了代码整洁和复用我们通常会把所有网络请求逻辑封装在一个独立的工具模块中。// utils/api.js const API_BASE_URL https://your-api-domain.com; // 你的后端服务地址 const API_KEY your-secret-api-key-for-miniprogram; // 从小程序云函数或安全存储获取注意前端存储的安全风险 /** * 发起聊天请求 * param {Array} messages - 消息历史数组格式如 [{role: user, content: 你好}] * param {boolean} stream - 是否使用流式响应 * returns {Promise} - 返回Promiseresolve为完整响应或一个可读流处理器 */ function chatCompletion(messages, stream false) { return new Promise((resolve, reject) { const requestTask wx.request({ url: ${API_BASE_URL}/v1/chat/completions, method: POST, header: { Content-Type: application/json, X-API-Key: API_KEY }, data: { messages: messages, max_tokens: 1024, stream: stream }, responseType: stream ? text : json, // 流式响应需要以文本形式接收 enableChunked: stream, // 启用分块传输模式 success(res) { if (!stream) { // 非流式响应直接解析JSON if (res.statusCode 200) { resolve(res.data); } else { reject(new Error(请求失败: ${res.statusCode})); } } else { // 对于流式响应success回调触发时表示连接已建立实际数据在onChunkReceived处理 // 这里我们返回一个控制器让页面逻辑可以处理数据流 resolve({ requestTask: requestTask, onChunkReceived: (callback) { // 这是一个简化处理实际需要解析SSE格式 (data: ...\n\n) let buffer ; requestTask.onChunkReceived((res) { buffer res.data; const lines buffer.split(\n\n); buffer lines.pop(); // 最后可能是不完整的行 for (const line of lines) { if (line.startsWith(data: )) { const dataStr line.slice(6); if (dataStr [DONE]) { callback(null, true); // 结束信号 } else { try { const chunk JSON.parse(dataStr); callback(chunk, false); } catch(e) { console.error(解析流数据失败:, e); } } } } }); } }); } }, fail(err) { reject(err); } }); }); } module.exports { chatCompletion };这个封装函数处理了两种模式。非流式模式直接返回完整的JSON响应。流式模式则复杂一些它利用了wx.request的enableChunked和onChunkReceived特性将接收到的数据块遵循Server-Sent Events格式实时解析并回调给页面逻辑。3.3 实现会话管理与流式显示现在我们把界面和网络层连接起来。页面的JavaScript逻辑需要管理对话历史、处理用户输入、调用API并更新UI。// pages/chat/chat.js const api require(../../utils/api.js); Page({ data: { messages: [], // 完整的对话历史 inputValue: , isLoading: false, isStreaming: false, streamingText: , // 当前流式响应的累积文本 scrollTop: 0 }, onInput(e) { this.setData({ inputValue: e.detail.value }); }, async sendMessage() { const userInput this.data.inputValue.trim(); if (!userInput || this.data.isLoading) return; // 1. 更新UI添加用户消息清空输入框显示加载状态 const userMsg { role: user, content: userInput }; const updatedMessages [...this.data.messages, userMsg]; this.setData({ messages: updatedMessages, inputValue: , isLoading: true, scrollTop: 99999 // 滚动到底部 }); try { // 2. 决定使用流式还是非流式这里以流式为例 const useStream true; if (useStream) { await this.handleStreamingResponse(updatedMessages); } else { await this.handleNormalResponse(updatedMessages); } } catch (error) { console.error(请求出错:, error); wx.showToast({ title: 请求失败请重试, icon: none }); // 可选在消息列表中显示错误信息 const errorMsg { role: assistant, content: 抱歉出错了: ${error.message} }; this.setData({ messages: [...this.data.messages, errorMsg], isLoading: false }); } finally { this.setData({ isLoading: false }); } }, async handleNormalResponse(messagesHistory) { const response await api.chatCompletion(messagesHistory, false); const assistantReply response.choices[0].message.content; const assistantMsg { role: assistant, content: assistantReply }; this.setData({ messages: [...this.data.messages, assistantMsg], scrollTop: 99999 }); }, async handleStreamingResponse(messagesHistory) { this.setData({ isStreaming: true, streamingText: }); const streamController await api.chatCompletion(messagesHistory, true); let fullText ; return new Promise((resolve, reject) { streamController.onChunkReceived((chunk, isDone) { if (isDone) { // 流式传输结束 const assistantMsg { role: assistant, content: fullText }; this.setData({ messages: [...this.data.messages, assistantMsg], isStreaming: false, streamingText: , scrollTop: 99999 }); resolve(); } else if (chunk.choices chunk.choices[0].delta.content) { // 接收到新的文本片段 const textDelta chunk.choices[0].delta.content; fullText textDelta; // 实时更新UI中的临时流式显示区域 this.setData({ streamingText: fullText, scrollTop: 99999 }); } }); // 如果需要可以保存requestTask以便在页面卸载时中断请求 // this.streamRequestTask streamController.requestTask; }); } });这段代码是前端逻辑的核心。handleStreamingResponse函数展示了如何处理流式响应它逐步累积接收到的文本片段并实时更新页面上的一个临时显示区域streamingText直到接收到结束信号[DONE]再将完整的回复存入正式的聊天历史。这种“打字机”效果能极大提升用户体验。4. 项目优化与部署建议一个基本可用的聊天应用已经完成了。但要让它更健壮、更可用还有一些优化点值得考虑。会话管理目前的对话历史只存在于小程序本次生命周期中关闭页面就没了。你可以利用小程序的本地存储wx.setStorageSync来保存重要的对话记录或者在后端为用户建立简单的会话ID实现多轮对话的持久化。错误处理与用户体验网络请求可能失败模型响应可能超时。除了基本的try-catch可以增加重试机制、超时提示、以及更友好的加载动画比如一个跳动的“AI正在思考...”的指示器。性能优化如果对话历史很长每次都将全部历史发送给后端会增加延迟和负担。可以考虑只发送最近N轮对话或者让后端自己管理上下文。对于流式响应确保及时清理事件监听器防止内存泄漏。安全加固将API Key硬编码在前端代码中是极不安全的容易被提取。更安全的做法是使用小程序云函数作为中继。前端调用云函数云函数内保存API Key并向后端服务发起请求这样密钥就不会暴露给客户端。部署上线后端服务部署到云服务器后记得配置好HTTPS小程序要求网络请求必须是HTTPS并设置好域名。在小程序管理后台将你的后端服务域名添加到request合法域名列表中。前端的小程序代码则通过微信开发者工具上传、提交审核、发布即可。整个流程走下来你会发现将Qwen1.5这样的轻量模型与微信小程序结合技术路径是清晰的。关键在于前后端接口的规范设计、以及前端对流式响应等特性的良好支持。这个案例提供了一个完整的骨架你可以在此基础上添加更多功能比如语音输入、多模态理解如果模型支持、对话风格选择等打造出更具个性化和实用价值的智能小程序。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
