从零搭建AI应用前端：微信小程序调用Qwen1.5-1.8B GPTQ模型API

从零搭建AI应用前端微信小程序调用Qwen1.5-1.8B GPTQ模型API最近在折腾一个挺有意思的项目想给朋友做个能聊天的AI小程序。后端我选了个轻量但能力不错的模型——Qwen1.5-1.8B GPTQ部署在星图GPU平台上API接口已经调通了。接下来就是怎么让微信小程序这个前端“活”起来能跟后端的“大脑”顺畅对话。这篇文章我就想跟你聊聊这个完整的过程。咱们不聊复杂的模型部署那部分星图平台已经帮我们搞定了。我们聚焦在前端怎么从零开始设计一个小程序的聊天界面怎么让它安全、稳定地调用后端的AI接口以及怎么处理那些让用户体验变差的“小毛病”比如等待时的加载动画、网络错误的友好提示。如果你也想把手里的AI模型能力包装成一个触手可及的小程序应用那接下来的内容应该能给你一些直接的参考。1. 项目全景与核心思路在开始写代码之前我们得先搞清楚整个应用是怎么跑起来的。这有点像搭积木得知道每块积木该放哪儿。简单来说我们的应用分为清晰的两层后端AI大脑Qwen1.5-1.8B GPTQ模型已经通过星图平台的镜像部署好了它提供了一个标准的HTTP API接口。我们向这个接口发送一段文本用户的问题它就会返回模型生成的回答。前端交互界面就是我们的微信小程序。它负责展示一个漂亮的聊天界面收集用户的输入然后把问题打包发送给后端的API拿到回答后再展示给用户。整个流程的核心就是小程序里的wx.request这个API。它是小程序与网络世界沟通的桥梁。我们的主要工作就是学会如何正确地使用它并围绕它构建一个健壮、好用的前端应用。为了让你有个直观印象我画了一个简单的流程图展示了从用户输入到看到回答的完整过程sequenceDiagram participant User as 用户 participant MiniApp as 微信小程序 participant API as 后端AI API participant UI as 小程序界面 User-MiniApp: 输入问题并发送 MiniApp-UI: 显示“正在思考”加载状态 MiniApp-API: 发送POST请求(携带问题文本) API--MiniApp: 返回AI生成的回答 MiniApp-UI: 隐藏加载状态渲染AI回答 UI-User: 展示对话结果接下来我们就按照这个思路一步步把积木搭起来。2. 搭建微信小程序基础框架首先我们需要一个微信小程序的项目外壳。如果你已经熟悉这部分可以快速浏览如果是新手跟着做一遍也很简单。2.1 创建小程序项目打开微信开发者工具。点击“新建项目”选择小程序。填入你的项目名称比如AI-Chatbot。选择一个本地的目录作为项目路径。AppID如果你有就填写如果没有点击下拉框选择“测试号”这足够我们进行开发测试。点击“新建”一个基础的小程序项目就创建好了。开发者工具会为我们生成一个最基础的目录结构包含app.js、app.json、app.wxss以及pages/index等文件。我们的大部分工作将在pages目录下的页面中完成。2.2 初始化页面结构与样式我们计划做一个简单的单页聊天应用。所以先来修改pages/index目录下的文件。首先规划一下页面结构 (index.wxml)。一个典型的聊天界面需要一个展示聊天记录的滚动区域。一个底部固定的输入框和发送按钮。我们来写一个最基础的版本!-- pages/index/index.wxml -- view classcontainer !-- 聊天消息列表区域 -- scroll-view classmessage-list scroll-y scroll-into-view{{scrollToView}} scroll-with-animation block wx:for{{messages}} wx:keyid view classmessage-item {{item.role}} view classavatar{{item.role user ? 我 : AI}}/view view classbubble{{item.content}}/view /view /block !-- 加载动画当AI正在思考时显示 -- view classthinking wx:if{{isThinking}} textAI正在思考.../text /view /scroll-view !-- 底部输入区域 -- view classinput-area input classinput-box placeholder请输入您的问题... bindinputonInput value{{inputValue}} bindconfirmsendMessage confirm-typesend / button classsend-btn bindtapsendMessage disabled{{!inputValue.trim() || isThinking}}发送/button /view /view接着给这个结构加上一些样式 (index.wxss)让它看起来像个样子/* pages/index/index.wxss */ .container { height: 100vh; display: flex; flex-direction: column; background-color: #f5f5f5; } .message-list { flex: 1; padding: 20rpx; box-sizing: border-box; overflow-y: auto; } .message-item { display: flex; margin-bottom: 30rpx; } .message-item.user { flex-direction: row-reverse; } .message-item .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; background-color: #07c160; color: white; display: flex; align-items: center; justify-content: center; font-size: 28rpx; flex-shrink: 0; } .message-item.ai .avatar { background-color: #007aff; } .message-item .bubble { max-width: 65%; padding: 20rpx; border-radius: 12rpx; margin: 0 20rpx; line-height: 1.5; word-break: break-word; } .message-item.user .bubble { background-color: #95ec69; margin-left: 0; } .message-item.ai .bubble { background-color: white; margin-right: 0; box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1); } .thinking { text-align: center; padding: 20rpx; color: #999; font-size: 28rpx; } .input-area { display: flex; padding: 20rpx; background-color: white; border-top: 1rpx solid #eee; align-items: center; } .input-box { flex: 1; border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; margin-right: 20rpx; font-size: 32rpx; } .send-btn { background-color: #07c160; color: white; border-radius: 10rpx; padding: 0 40rpx; height: 80rpx; line-height: 80rpx; font-size: 32rpx; } .send-btn[disabled] { background-color: #cccccc; }现在界面框架有了但它还不会动。我们需要数据和控制逻辑。3. 实现小程序核心逻辑逻辑部分写在index.js里。我们需要管理聊天数据、处理用户输入以及最重要的——调用API。3.1 初始化页面数据与事件在index.js的data中定义页面需要的数据// pages/index/index.js Page({ data: { messages: [], // 存储所有聊天消息格式如 {id: 1, role: user/assistant, content: ...} inputValue: , // 输入框的内容 isThinking: false, // 是否正在等待AI回复 scrollToView: , // 用于控制滚动到底部的视图ID }, // 监听输入框内容变化 onInput(e) { this.setData({ inputValue: e.detail.value }); }, // 发送消息 sendMessage() { const text this.data.inputValue.trim(); if (!text || this.data.isThinking) return; // 1. 将用户消息添加到列表 const userMsg { id: Date.now(), role: user, content: text }; this.setData({ messages: [...this.data.messages, userMsg], inputValue: , // 清空输入框 isThinking: true, // 开始加载 }); // 2. 滚动到底部看到新消息 this.scrollToBottom(); // 3. 调用AI接口 this.callAIChatAPI(text); }, // 一个辅助函数让聊天列表滚动到最新消息 scrollToBottom() { // 简单实现设置一个短暂的延时后将scrollToView指向最后一个消息的id // 更优做法是使用scroll-view的scroll-into-view属性这里用延时确保视图更新 setTimeout(() { if (this.data.messages.length 0) { const lastMsgId msg-${this.data.messages[this.data.messages.length - 1].id}; this.setData({ scrollToView: lastMsgId }); } }, 100); }, // 调用AI聊天API - 这是核心函数 async callAIChatAPI(userInput) { // 这里先留空下一节我们详细实现 console.log(准备调用API用户输入, userInput); }, })同时需要更新一下WXML给每条消息加上一个id用于滚动定位!-- 修改message-item这一行 -- view idmsg-{{item.id}} classmessage-item {{item.role}}好了现在界面已经能响应用户输入并把消息显示出来了。接下来就是最关键的环节让小程序和后台的AI模型说上话。4. 对接后端AI模型API假设你的Qwen1.5-1.8B GPTQ模型已经在星图平台上部署完毕并获得了类似https://your-model-service.example.com/v1/chat/completions这样的API地址。这个接口很可能遵循OpenAI的ChatCompletions格式。4.1 使用wx.request调用API我们来完善callAIChatAPI函数。这里有几个关键点需要注意请求方法通常是POST。请求头需要设置Content-Type: application/json。如果API有鉴权比如API Key也需要在Header中携带。请求数据根据后端API的要求构造。对于兼容OpenAI格式的接口数据格式大致如下。安全域名微信小程序要求网络请求的域名必须在小程序管理后台的“开发设置”-“服务器域名”中配置。开发阶段可以在微信开发者工具中勾选“不校验合法域名”进行调试但上线前必须配置。让我们看看具体的代码实现// 在 pages/index/index.js 的 Page 对象内完善 callAIChatAPI 函数 async callAIChatAPI(userInput) { // 你的后端API地址请替换成实际地址 const apiUrl https://your-model-service.example.com/v1/chat/completions; // 如果有API Key请在此处填写注意前端存储密钥有泄露风险生产环境应考虑更安全的方式如使用云函数中转 const apiKey YOUR_API_KEY_HERE; // 构造请求数据格式参考OpenAI ChatCompletion const requestData { model: qwen1.5-1.8b-gptq, // 模型名称根据后端实际配置调整 messages: [ // 可以选择是否发送历史对话上下文。这里为了简单只发送当前问题。 // 如果需要上下文可以将 this.data.messages 中最后几条记录格式化后放入此数组 { role: user, content: userInput } ], stream: false, // 我们先用非流式响应处理起来简单 max_tokens: 512, // 控制回复的最大长度 temperature: 0.7, // 控制回复的随机性 }; // 设置请求头 const header { Content-Type: application/json, }; if (apiKey) { header[Authorization] Bearer ${apiKey}; } // 显示加载状态 this.setData({ isThinking: true }); // 发起网络请求 try { const res await new Promise((resolve, reject) { wx.request({ url: apiUrl, method: POST, header: header, data: requestData, success: resolve, fail: reject }); }); console.log(API响应:, res); if (res.statusCode 200) { // 成功响应解析AI回复 // 注意不同API返回结构可能略有不同请根据实际情况调整 const aiReply res.data.choices[0]?.message?.content || AI没有返回有效内容; // 将AI回复添加到消息列表 const aiMsg { id: Date.now() 1, role: assistant, content: aiReply }; this.setData({ messages: [...this.data.messages, aiMsg], isThinking: false, }); // 滚动到底部 this.scrollToBottom(); } else { // 处理HTTP错误如4xx, 5xx console.error(API请求失败状态码:, res.statusCode, 响应:, res.data); this.handleError(请求失败 (${res.statusCode})${res.data.error?.message || 未知错误}); } } catch (error) { // 处理网络错误或其他异常 console.error(网络请求异常:, error); this.handleError(网络连接失败请检查网络或服务状态); } }, // 错误处理函数 handleError(errorMsg) { wx.showToast({ title: errorMsg, icon: none, duration: 3000 }); // 仍然添加一条AI的错误提示消息到对话中保持对话连贯性 const errorAiMsg { id: Date.now() 1, role: assistant, content: 抱歉我暂时无法回答。(${errorMsg}) }; this.setData({ messages: [...this.data.messages, errorAiMsg], isThinking: false, }); this.scrollToBottom(); },4.2 处理流式响应进阶如果你的后端API支持流式响应stream: true并且你想实现像ChatGPT那样一个字一个字打出来的效果处理会复杂一些。你需要使用wx.request的enableChunked配置并监听onChunkReceived事件来逐步接收和处理数据。这里提供一个简化的思路// 流式响应处理的简化示例 callAIChatAPIStream(userInput) { // ... 构造请求数据设置 stream: true ... wx.request({ url: apiUrl, method: POST, header: header, data: requestData, enableChunked: true, // 启用分块传输 success: (res) { /* 处理最终状态 */ }, fail: this.handleError, // 监听数据块到达 onChunkReceived: (res) { // res.data 是 ArrayBuffer需要解码 const chunkStr String.fromCharCode.apply(null, new Uint8Array(res.data)); // 流式数据通常是多个data: {...}\n\n格式的块 const lines chunkStr.split(\n); lines.forEach(line { if (line.startsWith(data: ) !line.includes([DONE])) { try { const data JSON.parse(line.substring(6)); const delta data.choices[0]?.delta?.content; if (delta) { // 逐步更新最后一条AI消息的内容 this.updateStreamingMessage(delta); } } catch(e) { /* 忽略解析错误 */ } } }); } }); },流式处理能极大提升用户体验但实现和调试会更复杂。对于初版应用非流式响应已经足够。5. 优化用户体验与处理边界情况基础功能跑通后我们还需要打磨细节让应用更友好、更健壮。5.1 改善交互反馈加载状态我们已经有了isThinking变量来控制加载提示。可以设计一个更美观的加载动画。输入框防抖频繁发送请求不好可以在发送按钮点击或输入框确认事件上做简单的防抖处理虽然我们这里通过按钮的disabled状态和isThinking已经做了限制。清空对话增加一个清空聊天记录的功能按钮。在WXML底部输入区域上方添加一个清空按钮!-- 在.input-area上方添加 -- view classaction-bar button classclear-btn bindtapclearMessages sizemini清空对话/button /view在JS中添加对应函数// 清空对话 clearMessages() { wx.showModal({ title: 提示, content: 确定要清空所有对话吗, success: (res) { if (res.confirm) { this.setData({ messages: [], scrollToView: }); wx.showToast({ title: 已清空, icon: success }); } } }); },5.2 处理常见异常我们已经在上面的callAIChatAPI中通过try...catch和状态码判断做了基础错误处理。还可以考虑网络超时wx.request可以设置timeout选项。内容安全对于AI生成的内容如果后端没有过滤前端可以做一些简单的关键词过滤或敏感信息提示根据实际需求。数据持久化使用小程序的本地存储wx.setStorageSync将聊天记录保存下来下次打开还能看到。// 在Page的onLoad中加载历史记录 onLoad() { const history wx.getStorageSync(ai_chat_history); if (history) { this.setData({ messages: history }); } }, // 在每次messages变化后保存可以使用防抖优化 // 这里简单地在sendMessage和clearMessages成功后调用 saveHistory() { wx.setStorageSync(ai_chat_history, this.data.messages); }, // 在sendMessage成功添加AI消息后以及clearMessages确认清空后调用 this.saveHistory();5.3 性能与体验提示长列表渲染如果聊天记录非常多wx:for渲染可能会有压力。可以考虑使用小程序的recycle-view组件或进行分页加载。图片与富文本如果AI回复中包含Markdown或可能返回图片链接需要更复杂的渲染组件来解析和展示。初期可以先用text组件展示纯文本。键盘遮挡在真机上输入框聚焦时键盘弹起可能会遮挡部分内容。可以通过调整scroll-view的滚动位置或使用page的onKeyboardHeightChange事件来动态调整布局。6. 总结走完这一趟一个能够调用后端Qwen大模型API的微信小程序聊天前端就基本搭建起来了。我们从最基础的页面布局开始一步步实现了数据绑定、用户交互、网络请求以及错误处理和简单的体验优化。整个过程的核心其实就是理解并用好wx.request这个桥梁它连接了我们精心设计的界面和背后强大的AI模型。你会发现一旦这个通道打通前端能做的事情就很多了可以设计更复杂的对话场景比如带历史上下文的连续对话可以增加语音输入、图片上传等多模态交互也可以根据AI返回的结构化数据渲染出更丰富的UI组件。当然实际开发中还会遇到更多细节问题比如API格式的细微差异、网络环境的复杂多变、小程序审核规范等。但最重要的第一步——让想法在手机端跑起来——你已经完成了。希望这个具体的例子能为你将AI能力融入移动端应用提供一个扎实的起点。不妨就从这个简单的聊天机器人开始尝试加入你自己的创意和功能看看能做出什么有趣的东西来。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。