微信小程序对接实战：快速开发集成通义千问1.5-1.8B模型的AI聊天应用

微信小程序对接实战快速开发集成通义千问1.5-1.8B模型的AI聊天应用你是不是也想过给自己的微信小程序加上一个智能聊天助手比如做一个能解答用户问题的客服机器人或者一个能陪你闲聊、帮你写文案的创意伙伴。听起来很酷但一想到要处理模型部署、API对接、还有小程序那些复杂的网络请求限制是不是就觉得头大别担心这篇文章就是来帮你解决这些问题的。我们不走弯路直接用一个最省事的方案后端模型部署我们用现成的星图GPU平台一键就能拉起一个带WebUI的通义千问服务自带API前端小程序我们用最熟悉的微信原生开发框架。我会手把手带你把这两个部分稳稳地连接起来做出一个界面好看、对话流畅的AI聊天小程序。整个过程我们会重点攻克几个小程序开发里常见的“拦路虎”怎么配置安全域名让小程序能访问我们的API、怎么实现那种一个字一个字蹦出来的流式对话效果、还有怎么在用户手机里妥善保存聊天记录。最后我会给你一套可以直接拿去用的前端组件代码让你能快速集成到自己的项目里。1. 项目整体思路与准备工作在开始写代码之前我们先花几分钟把整个项目的架子在脑子里搭起来。这样后面每一步做什么你都会很清楚。我们的目标是用户在小程序里输入问题小程序把问题发给后端的通义千问模型模型思考后生成回答再流式地传回小程序展示出来。为了实现这个目标我们需要拆解成三个部分后端服务AI大脑我们需要一个始终在运行的通义千问模型它能接收文本、理解并生成回复。自己从零训练或部署一个大模型成本太高所以我们选择用星图GPU平台。它上面有预置的“通义千问WebUI”镜像我们只需要点几下就能得到一个带可视化界面和标准API接口的服务。这一步我们主要关注如何获取这个服务的访问地址API URL。前端小程序交互界面这是用户直接看到和操作的部分。我们需要一个聊天界面包含消息列表、输入框和发送按钮。更重要的是小程序需要能向后端API发送请求并处理返回的数据。这里的关键是处理好网络通信。连接桥梁通信与存储这是本教程的核心。小程序不能随意访问任何网络地址必须将后端API的域名配置到小程序的“合法域名”列表中。同时为了获得更好的对话体验不用等全部生成完再显示我们需要实现“流式响应”。最后为了不让聊天记录每次打开都消失我们需要把对话历史保存在用户的手机本地。1.1 你需要准备什么在动手之前请确保你手头有这几样东西一个微信小程序账号去微信公众平台注册一个并创建一个小程序项目拿到你的AppID。这是后续配置服务器域名和真机调试必需的。一个星图GPU平台的账号访问其官网注册即可。我们将使用它来部署模型服务。基础的微信小程序开发知识了解WXML、WXSS、JavaScript和Page生命周期即可。如果你用过uni-app原理也相通。代码编辑器微信开发者工具是必须的另外可以用你顺手的编辑器如 VSCode 来写代码。好了思路理清了东西也备齐了接下来我们就从最核心的后端服务开始一步步把它搭建起来。2. 后端服务一键部署通义千问WebUI后端服务是整个应用的大脑幸运的是借助云平台这个过程变得异常简单。我们选择星图GPU平台主要是看中它的“预置镜像”功能省去了我们自己安装依赖、配置环境的繁琐步骤。2.1 在星图平台创建服务首先登录你的星图GPU平台控制台。找到镜像市场或应用中心在平台首页或侧边栏寻找“镜像市场”、“AI应用”或“快速创建”之类的入口。选择通义千问镜像在镜像列表里搜索“通义千问”或“Qwen”。你应该能找到类似“通义千问 WebUI”或“Qwen-Chat WebUI”的镜像。注意选择版本我们目标是对接1.5-1.8B这个参数量的模型确保镜像包含它。部署实例点击该镜像的“部署”或“创建实例”按钮。平台会引导你进行一些配置实例规格对于1.5-1.8B的模型选择配备GPU的规格如NVIDIA T4、V100等会获得极快的响应速度。如果仅用于测试CPU规格也可以运行但速度会慢很多。存储默认配置通常足够。网络与安全组确保开放服务的访问端口。这个WebUI镜像通常会在容器内部监听一个端口比如7860或8000。你需要在平台的安全组或容器网络设置中将这个端口对公网开放例如添加一条规则允许0.0.0.0/0访问7860端口。启动并获取访问地址完成配置后启动实例。等待几分钟实例状态变为“运行中”后平台会为你分配一个公网访问地址通常格式是http://你的实例IP:端口号。请记下这个完整的URL比如http://123.45.67.89:7860。这个地址就是我们后端的API基础地址。2.2 验证WebUI与获取API信息拿到地址后先别急着关掉页面。访问WebUI界面打开浏览器输入你刚才记下的地址如http://123.45.67.89:7860。如果一切正常你会看到一个聊天界面这就是通义千问的WebUI。你可以在这里直接输入文字和它对话确认模型服务运行正常。找到API端点大多数这类WebUI镜像基于Gradio或FastAPI等框架都会同时提供标准的API接口。常见的API端点路径可能是/api/chat或/api/v1/chat/completions模仿OpenAI格式。你需要查看该镜像的文档或通过开发者工具F12打开浏览器控制台查看网络请求来确认。一个简单的方法在WebUI界面发送一条消息同时在浏览器开发者工具的“Network”标签页观察看看向哪个URL发送了POST请求。那个URL就是聊天API的端点。假设我们通过观察发现请求发往http://123.45.67.89:7860/api/chat。那么我们的API URL就确定了。至此一个功能完整、自带API的后端AI服务就已经在云端运行起来了。接下来我们就要让小程序能够安全、稳定地访问它。3. 前端核心小程序与API的对接实战这是将想法变成现实的关键一步。小程序端主要负责三件事构建聊天界面、管理聊天数据、以及与后端API通信。我们逐一突破。3.1 配置小程序服务器域名微信小程序出于安全考虑要求网络请求的域名必须事先在管理后台配置否则无法在真机上发起请求。这是第一个必须完成的步骤。登录微信公众平台进入你的小程序管理后台。在左侧菜单找到“开发” - “开发管理” - “开发设置”。找到“服务器域名”板块。在“request合法域名”列表中添加你后端服务的域名。注意这里填的是域名不是完整的URL。例如你的API地址是http://123.45.67.89:7860/api/chat那么你需要添加的域名是http://123.45.67.89:7860。重要微信小程序要求后端服务必须支持HTTPS。如果你的服务是http开头在开发阶段可以在微信开发者工具中勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”以便调试。但上线前必须转换为HTTPS服务可以为你的服务器配置SSL证书或使用支持HTTPS的网关/反向代理。保存配置。注意域名配置后可能需要几分钟到几小时生效。3.2 实现流式对话SSE传统的API请求是“一问一答”小程序要等到模型完全生成所有文字后才收到并显示体验不连贯。流式响应Server-Sent Events, SSE允许服务器一边生成一边像流水一样把文字推送给小程序实现打字机效果。虽然微信小程序原生不支持EventSource标准的SSE客户端但我们可以用wx.request或wx.connectSocket(WebSocket) 来模拟。这里介绍一种使用wx.request处理流式响应的方法它兼容性更好。后端需要支持流式输出通常API会设置一个stream: true的参数。前端的关键在于监听wx.request返回的onChunkReceived事件微信基础库2.14.0及以上支持或使用SocketTask处理分块数据。下面是一个使用wx.request进行流式请求的示例组件方法// 在Page或Component的methods中 sendMessageStream(text) { const that this // 显示“正在输入”的加载状态 this.setData({ isGenerating: true }) // 将用户消息添加到列表 const userMsg { role: user, content: text } const newMessages [...this.data.messages, userMsg] this.setData({ messages: newMessages }) // 初始化AI的回复消息内容为空用于后续追加 const assistantMsg { role: assistant, content: } const messagesWithAssistant [...newMessages, assistantMsg] this.setData({ messages: messagesWithAssistant, // 记录当前正在接收的回复消息的索引 receivingIndex: messagesWithAssistant.length - 1 }) // 发起流式请求 wx.request({ url: https://你的域名/api/chat, // 替换为你的HTTPS API地址 method: POST, header: { Content-Type: application/json }, data: { messages: newMessages, // 发送历史对话 stream: true // 关键参数告诉后端开启流式输出 }, enableChunked: true, // 启用分块传输 success(res) { // 对于流式请求success回调可能不包含完整数据 console.log(请求连接成功) }, fail(err) { console.error(请求失败:, err) that.setData({ isGenerating: false, receivingIndex: -1 }) wx.showToast({ title: 网络请求失败, icon: none }) }, // 监听每个数据块 onChunkReceived(res) { // res.data 是ArrayBuffer需要解码 const chunkStr wx.arrayBufferToUtf8String(res.data) // 假设后端返回的是纯文本流或简单的JSON行格式 // 这里需要根据你后端API的实际流式格式进行解析 // 例如如果是简单的文本流 that.processStreamChunk(chunkStr) } }) }, // 处理接收到的数据块 processStreamChunk(chunkStr) { // 简单的文本追加逻辑根据你的API响应格式调整 // 例如直接追加到当前正在接收的消息内容中 const idx this.data.receivingIndex if (idx 0) { const key messages[${idx}].content // 使用微信小程序提供的差分更新提高性能 this.setData({ [key]: this.data.messages[idx].content chunkStr }) } },请注意onChunkReceived和enableChunked需要微信基础库版本支持。你需要在小程序管理后台或app.json中设置最低基础库版本。如果考虑更低版本兼容或者后端支持WebSocket也可以采用wx.connectSocket方案逻辑类似都是监听onMessage事件并拼接数据。3.3 管理本地对话历史我们不能每次都让用户从头开始聊天。利用小程序的本地存储能力我们可以轻松实现对话历史的保存与加载。// 保存当前对话记录到本地 saveChatHistory() { try { wx.setStorageSync(chatHistory, this.data.messages) console.log(对话历史已保存) } catch (e) { console.error(保存对话历史失败:, e) } }, // 从本地加载对话历史 loadChatHistory() { try { const history wx.getStorageSync(chatHistory) if (history) { this.setData({ messages: history }) console.log(对话历史已加载) } } catch (e) { console.error(加载对话历史失败:, e) } }, // 清空对话历史 clearChatHistory() { wx.showModal({ title: 提示, content: 确定要清空所有对话记录吗, success: (res) { if (res.confirm) { try { wx.removeStorageSync(chatHistory) this.setData({ messages: [] }) wx.showToast({ title: 已清空 }) } catch (e) { console.error(清空历史失败:, e) } } } }) }在Page的onLoad生命周期中调用loadChatHistory()在每次消息列表更新后如发送消息或收到回复后调用saveChatHistory()就可以实现对话的持久化了。4. 可复用组件代码与界面搭建理论讲完了我们来点实际的。下面提供一个精简但功能完整的聊天页面代码你可以直接复制到你的小程序项目中修改使用。4.1 WXML模板 (index.wxml)view classchat-container !-- 聊天消息区域 -- scroll-view classmessage-list scroll-y scroll-into-view{{scrollToId}} scroll-with-animation block wx:for{{messages}} wx:keyindex view idmsg{{index}} !-- 用户消息 -- view classmessage-row user wx:if{{item.role user}} view classavatar user-avatar你/view view classbubble user-bubble{{item.content}}/view /view !-- AI消息 -- view classmessage-row assistant wx:if{{item.role assistant}} view classavatar assistant-avatarAI/view view classbubble assistant-bubble text{{item.content}}/text !-- 流式响应时的光标动画 -- text classcursor wx:if{{isGenerating index messages.length - 1}}▌/text /view /view /view /block /scroll-view !-- 底部输入区域 -- view classinput-area input classinput-box value{{inputValue}} bindinputonInput placeholder输入你的问题... confirm-typesend bindconfirmonSend focus{{autoFocus}} / button classsend-btn bindtaponSend disabled{{isGenerating}} {{isGenerating ? 思考中... : 发送}} /button /view /view4.2 WXSS样式 (index.wxss).chat-container { height: 100vh; display: flex; flex-direction: column; background-color: #f5f5f5; } .message-list { flex: 1; padding: 20rpx; box-sizing: border-box; } .message-row { display: flex; margin-bottom: 30rpx; } .message-row.user { justify-content: flex-end; } .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: white; flex-shrink: 0; } .user-avatar { background-color: #07c160; margin-left: 20rpx; } .assistant-avatar { background-color: #576b95; margin-right: 20rpx; } .bubble { max-width: 70%; padding: 20rpx; border-radius: 12rpx; font-size: 32rpx; line-height: 1.5; word-wrap: break-word; } .user-bubble { background-color: #95ec69; color: #000; } .assistant-bubble { background-color: #fff; color: #333; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1); } .cursor { display: inline-block; font-weight: bold; animation: blink 1s step-end infinite; } keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .input-area { display: flex; padding: 20rpx; background-color: #fff; border-top: 1rpx solid #eee; align-items: center; } .input-box { flex: 1; height: 80rpx; padding: 0 20rpx; background-color: #f8f8f8; border-radius: 40rpx; font-size: 32rpx; margin-right: 20rpx; } .send-btn { width: 140rpx; height: 80rpx; line-height: 80rpx; border-radius: 40rpx; background-color: #07c160; color: white; font-size: 32rpx; padding: 0; } .send-btn[disabled] { background-color: #cccccc; }4.3 JavaScript逻辑 (index.js)Page({ data: { messages: [], // 对话消息列表 inputValue: , // 输入框内容 isGenerating: false, // 是否正在生成 receivingIndex: -1, // 当前正在接收流式消息的索引 scrollToId: , // 控制滚动到底部 autoFocus: false }, onLoad() { // 页面加载时从本地存储读取历史记录 this.loadChatHistory() this.setData({ autoFocus: true }) }, onInput(e) { this.setData({ inputValue: e.detail.value }) }, // 发送消息 onSend() { const text this.data.inputValue.trim() if (!text) { wx.showToast({ title: 请输入内容, icon: none }) return } if (this.data.isGenerating) { wx.showToast({ title: AI正在思考请稍候..., icon: none }) return } this.setData({ inputValue: }) this.sendMessageStream(text) }, // 流式发送消息核心方法需根据你的API调整 sendMessageStream(text) { const that this this.setData({ isGenerating: true }) const userMsg { role: user, content: text } const newMessages [...this.data.messages, userMsg] this.setData({ messages: newMessages }) this.scrollToBottom() const assistantMsg { role: assistant, content: } const messagesWithAssistant [...newMessages, assistantMsg] this.setData({ messages: messagesWithAssistant, receivingIndex: messagesWithAssistant.length - 1 }) // 注意此处URL和data格式需要根据你的后端API调整 wx.request({ url: https://你的域名/api/v1/chat/completions, // 替换为你的真实API地址 method: POST, header: { Content-Type: application/json }, data: { model: qwen1.5-1.8b, // 模型名称根据后端调整 messages: newMessages.map(msg ({ role: msg.role, content: msg.content })), stream: true }, enableChunked: true, success(res) { console.log(流式请求连接成功) // 请求结束后的处理 that.setData({ isGenerating: false, receivingIndex: -1 }) that.saveChatHistory() // 保存历史 }, fail(err) { console.error(请求失败:, err) that.setData({ isGenerating: false, receivingIndex: -1 }) wx.showToast({ title: 请求失败请重试, icon: none }) }, onChunkReceived(res) { // 处理流式数据块 // 假设API返回的是OpenAI兼容的SSE格式data: {...} const chunkStr wx.arrayBufferToUtf8String(res.data) const lines chunkStr.split(\n).filter(line line.trim() ! ) for (const line of lines) { if (line.startsWith(data: )) { const dataStr line.substring(6) // 去掉data: if (dataStr [DONE]) { return } try { const data JSON.parse(dataStr) const deltaContent data.choices[0]?.delta?.content || if (deltaContent) { that.processStreamChunk(deltaContent) that.scrollToBottom() } } catch (e) { console.error(解析流式数据失败:, e, 原始数据:, dataStr) } } } } }) }, processStreamChunk(chunk) { const idx this.data.receivingIndex if (idx 0) { const key messages[${idx}].content this.setData({ [key]: this.data.messages[idx].content chunk }) } }, scrollToBottom() { const lastIndex this.data.messages.length - 1 if (lastIndex 0) { this.setData({ scrollToId: msg${lastIndex} }) } }, // 本地存储方法同上文 saveChatHistory() { try { wx.setStorageSync(chatHistory, this.data.messages) } catch (e) { console.error(保存失败:, e) } }, loadChatHistory() { try { const history wx.getStorageSync(chatHistory) if (history Array.isArray(history)) { this.setData({ messages: history }) } } catch (e) { console.error(加载失败:, e) } }, onUnload() { // 页面卸载时保存一次 this.saveChatHistory() } })4.4 配置文件 (app.json)确保在app.json中正确配置页面并设置合适的基础库版本。{ pages: [ pages/index/index ], window: { backgroundTextStyle: light, navigationBarBackgroundColor: #07c160, navigationBarTitleText: 通义千问AI助手, navigationBarTextStyle: white }, style: v2, sitemapLocation: sitemap.json, requiredBackgroundModes: [audio], requiredPrivateInfos: [request, storage] }将以上四个文件分别放置在小程序项目的对应位置并将index.js中的API地址替换成你自己的一个基本的AI聊天小程序就搭建完成了。5. 总结与后续优化建议走完整个流程你会发现将大模型能力集成到微信小程序里核心难点不在于模型本身而在于“连接”和“体验”。我们通过星图平台解决了模型部署的复杂性又通过配置域名、实现流式响应和本地存储解决了小程序端的核心交互问题。现在你的小程序已经能跑起来了但如果你想让它更完善、更强大这里还有几个可以继续打磨的方向首先是稳定性。现在的代码是一个基础版本在实际使用中网络环境复杂多变你需要增加更完善的错误处理。比如请求超时了怎么办服务器返回了非预期格式的数据怎么办给用户一个友好的提示并且提供重试的按钮体验会好很多。其次是体验优化。流式输出我们已经做了还可以加上消息发送的动画、历史记录的搜索或分类管理比如按主题创建不同的聊天会话、甚至支持语音输入。界面上也可以根据你的品牌风格做更个性化的设计。最后是功能扩展。通义千问模型的能力不止于文本对话。如果后端服务支持你可以尝试集成图片理解、文件上传分析等功能。小程序端相应地增加图片选择、文件预览等组件就能打造一个多模态的AI助手。整个过程最花时间的可能是在调试API通信格式和流式数据解析上因为不同后端服务的实现可能有细微差别。多利用开发者工具的Network面板查看数据流耐心调试问题都能解决。希望这套代码和思路能帮你快速启动项目做出让人眼前一亮的小程序应用。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。