微信小程序连接大模型：百川2-13B赋能智能客服小程序开发

微信小程序连接大模型百川2-13B赋能智能客服小程序开发最近在做一个宠物用品商城的小程序老板提了个需求想给用户加个24小时在线的智能客服能回答一些关于宠物喂养、商品咨询的常见问题。一开始想用传统的规则问答但发现用户的问题千奇百怪规则根本写不完。后来看到百川2-13B这类大模型在对话上的能力就琢磨着能不能把它接进小程序里。试了一下效果还真不错。用户问“三个月的小猫吃什么猫粮好”它能结合商品库给出建议问“狗狗为什么老是挠耳朵”它也能给出一些可能的健康提醒。整个过程下来感觉把大模型的能力塞进小程序并没有想象中那么复杂关键是把几个环节打通就行。今天我就把这个从零搭建的过程分享出来如果你也在做小程序想给它加个“智能大脑”特别是类似客服、问答、内容生成这类场景这篇内容应该能给你一个清晰的路线图。1. 整体思路为什么选择“小程序云函数大模型”的方案直接让微信小程序去调用部署在星图GPU平台上的百川2-13B模型服务是行不通的。主要卡在两个地方域名问题小程序要求所有网络请求的域名都必须事先在后台配置。星图平台提供的服务地址通常不在小程序的合法域名列表中。密钥安全调用大模型API需要一个密钥API Key。把这个密钥写在小程序的前端代码里无异于把家门钥匙挂在门上非常不安全很容易被别人抓包获取并盗用。所以我们需要一个“中间人”——一个受我们控制的服务器来负责安全的转发请求。对于微信小程序生态来说最方便、成本最低的“中间人”就是微信云开发的云函数。整个流程可以这么理解用户在小程序里输入问题。小程序前端将问题发送给我们自己编写的云函数。云函数这个“中间人”拿着安全的API Key去请求星图GPU平台上的百川2-13B服务。百川模型生成回答后先返回给云函数再由云函数整理好格式返回给小程序前端。小程序把回答展示给用户。这样做既解决了域名配置问题又保证了API Key不会暴露在前端一举两得。当然如果你已经有自己的后端服务器用Node.js、Python如FastAPI、Flask来充当这个“中间人”也是完全一样的道理。2. 前期准备模型服务、小程序与云开发环境在动手写代码之前我们需要把三方面的资源准备好。2.1 获取大模型API服务首先你需要一个已经部署好的百川2-13B模型服务并拿到它的调用地址和密钥。这里假设你已经在星图GPU平台上完成了模型的部署并获得了类似下面的信息API接口地址https://your-baichuan-service.com/v1/chat/completionsAPI Keysk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx请务必将这个API Key保存好它将是云函数访问模型的凭证。为了模拟真实调用我们可以先用一个简单的Python脚本测试一下服务是否通畅。# test_api.py - 用于测试模型服务是否正常 import requests import json # 替换为你的实际信息 API_URL https://your-baichuan-service.com/v1/chat/completions API_KEY sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx headers { Authorization: fBearer {API_KEY}, Content-Type: application/json } # 构造一个简单的对话请求 data { model: baichuan2-13b-chat, # 根据实际模型名称调整 messages: [ {role: user, content: 你好请介绍一下你自己。} ], stream: False, # 先测试非流式响应 max_tokens: 500 } try: response requests.post(API_URL, headersheaders, jsondata, timeout30) response.raise_for_status() # 检查HTTP错误 result response.json() print(测试成功模型回复) print(result[choices][0][message][content]) except requests.exceptions.RequestException as e: print(f请求失败: {e}) except KeyError as e: print(f解析响应失败原始返回: {result})运行这个脚本如果能看到模型返回的自我介绍说明API服务是正常的可以进行下一步。2.2 创建微信小程序项目并开通云开发注册小程序前往微信公众平台注册一个小程序账号拿到AppID。安装开发者工具下载并安装微信开发者工具。新建项目打开开发者工具选择“小程序项目”填入你的AppID项目名称自定例如Smart-Customer-Service并勾选“不使用云服务”因为我们要手动开通和配置。开通云开发在开发者工具顶部菜单栏找到“云开发”按钮并点击。根据提示开通云开发环境你会得到一个环境ID如env-xxxxxx。这个ID后面在配置云函数时会用到。2.3 初始化云函数目录在小程序项目中我们需要一个专门的目录来存放云函数代码。在项目根目录下新建一个文件夹命名为cloudfunctions。在cloudfunctions文件夹上右键选择“新建Node.js云函数”。输入云函数名称例如chatWithAI。开发者工具会自动生成一个包含index.js,package.json等文件的云函数模板。至此我们的“战场”就准备好了一端是能说会道的百川模型另一端是等待被赋予智能的小程序框架中间则是即将被我们编写的、负责牵线搭桥的云函数。3. 核心实现编写云函数中转服务云函数是我们架构的核心它负责安全的转发请求。我们将在上一步创建的chatWithAI云函数中进行编码。3.1 安装依赖包首先我们需要安装用于发送HTTP请求的axios库。在cloudfunctions/chatWithAI目录下右键选择“在终端中打开”然后运行npm install axios3.2 编写云函数主逻辑打开cloudfunctions/chatWithAI/index.js文件将其内容替换为以下代码// cloudfunctions/chatWithAI/index.js const cloud require(wx-server-sdk); const axios require(axios); // 引入axios cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV // 使用当前云环境 }); // 星图平台百川模型的API配置 const AI_API_URL https://your-baichuan-service.com/v1/chat/completions; // 替换为你的真实URL const AI_API_KEY sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx; // 替换为你的真实API Key exports.main async (event, context) { const { userMessage, conversationHistory [] } event; // 1. 参数基础校验 if (!userMessage || typeof userMessage ! string) { return { code: 400, message: 请求参数错误userMessage不能为空且必须为字符串。 }; } // 2. 构建符合百川API格式的消息历史 // 通常格式为[{role: user, content: ...}, {role: assistant, content: ...}, ...] let messages []; // 如果有历史对话先加入注意控制长度避免token超限 if (Array.isArray(conversationHistory) conversationHistory.length 0) { // 这里可以加入逻辑来截断或总结过长的历史此处简单拼接最近的几条 const recentHistory conversationHistory.slice(-6); // 例如只保留最近3轮对话6条消息 messages messages.concat(recentHistory); } // 加入当前用户的新消息 messages.push({ role: user, content: userMessage }); // 3. 准备请求大模型的数据 const requestData { model: baichuan2-13b-chat, // 模型名称根据实际情况调整 messages: messages, stream: false, // 非流式响应先实现基础功能 max_tokens: 1024, // 控制回复最大长度 temperature: 0.7, // 控制回复随机性0.0~1.0值越高越有创意 }; // 4. 设置请求头 const headers { Authorization: Bearer ${AI_API_KEY}, Content-Type: application/json }; try { // 5. 发送请求到百川模型API const response await axios.post(AI_API_URL, requestData, { headers: headers, timeout: 30000 // 设置30秒超时 }); const aiResponse response.data; // 6. 从响应中提取模型回复内容 if (aiResponse.choices aiResponse.choices.length 0) { const replyContent aiResponse.choices[0].message.content; return { code: 200, data: { reply: replyContent, // 可以返回完整的消息历史供前端维护会话 updatedHistory: [...messages, { role: assistant, content: replyContent }] }, message: success }; } else { throw new Error(模型返回格式异常); } } catch (error) { console.error(云函数调用AI模型失败:, error); // 根据错误类型返回更友好的提示 let errorMsg 智能客服暂时开小差了请稍后再试。; if (error.response) { // 请求已发出服务器返回状态码非2xx errorMsg 服务繁忙${error.response.status}请稍候重试。; console.error(API响应错误:, error.response.data); } else if (error.request) { // 请求已发出但未收到响应 errorMsg 网络连接不稳定请检查网络后重试。; } return { code: 500, message: errorMsg }; } };代码关键点说明安全存储API Key直接写在云函数代码中由于云函数运行在云端服务器端所以是安全的。错误处理对网络请求超时、API返回错误等进行了捕获并返回用户能理解的友好提示而不是一堆技术术语。会话历史云函数接收conversationHistory参数将其与当前问题一起发送给模型使模型能理解对话上下文实现多轮对话。参数控制max_tokens和temperature是两个重要的参数分别控制回复长度和创造性你可以根据客服场景的需要进行调整例如客服回答应更稳定可将temperature调低至0.3。3.3 上传并部署云函数代码写好后在chatWithAI云函数目录上右键选择“上传并部署云端安装依赖”。等待部署成功后你的云函数就准备好了。4. 小程序前端构建聊天界面与调用逻辑现在我们来打造小程序的用户界面并让它能够调用我们刚刚写好的云函数。4.1 设计简易聊天界面我们修改小程序的首页pages/index/index.wxml和index.wxss。index.wxml- 页面结构!-- pages/index/index.wxml -- view classcontainer !-- 标题栏 -- view classheader text classtitle智能宠物客服/text text classsubtitle24小时在线解答/text /view !-- 聊天消息区域 -- scroll-view classmessage-list scroll-y scroll-with-animation scroll-into-view{{scrollToViewId}} view wx:for{{messages}} wx:keyindex idmsg-{{index}} !-- 用户消息 -- view wx:if{{item.role user}} classmessage-item user-message view classavatar user-avatar我/view view classbubble user-bubble{{item.content}}/view /view !-- AI客服消息 -- view wx:elif{{item.role assistant}} classmessage-item ai-message view classavatar ai-avatarAI/view view classbubble ai-bubble{{item.content}}/view /view /view !-- 加载指示器 -- view wx:if{{isLoading}} classmessage-item ai-message view classavatar ai-avatarAI/view view classbubble ai-bubble typing-indicator text正在思考/text text classdot./text text classdot./text text classdot./text /view /view /scroll-view !-- 输入区域 -- view classinput-area input classinput-box value{{inputValue}} bindinputonInput placeholder请输入关于宠物或商品的问题... confirm-typesend bindconfirmsendMessage focus{{autoFocus}} / button classsend-btn bindtapsendMessage disabled{{isLoading || !inputValue.trim()}} 发送 /button /view /viewindex.wxss- 页面样式/* pages/index/index.wxss */ .container { height: 100vh; display: flex; flex-direction: column; background-color: #f5f5f5; } .header { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; padding: 20rpx 30rpx; text-align: center; } .title { font-size: 38rpx; font-weight: bold; display: block; } .subtitle { font-size: 24rpx; opacity: 0.9; display: block; margin-top: 10rpx; } .message-list { flex: 1; padding: 30rpx; box-sizing: border-box; overflow: hidden; } .message-item { display: flex; margin-bottom: 40rpx; } .message-item.user-message { justify-content: flex-end; } .message-item.ai-message { justify-content: flex-start; } .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: bold; flex-shrink: 0; } .user-avatar { background-color: #2575fc; color: white; margin-left: 20rpx; } .ai-avatar { background-color: #ff6b6b; color: white; margin-right: 20rpx; } .bubble { max-width: 500rpx; padding: 25rpx; border-radius: 20rpx; font-size: 32rpx; line-height: 1.5; word-break: break-word; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08); } .user-bubble { background-color: #2575fc; color: white; border-bottom-right-radius: 4rpx; } .ai-bubble { background-color: white; color: #333; border-bottom-left-radius: 4rpx; } .typing-indicator { color: #999; font-style: italic; } .dot { animation: blink 1.4s infinite; animation-fill-mode: both; } .dot:nth-child(2) { animation-delay: 0.2s; } .dot:nth-child(3) { animation-delay: 0.4s; } keyframes blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .input-area { display: flex; align-items: center; padding: 20rpx 30rpx; background-color: white; border-top: 1rpx solid #eee; } .input-box { flex: 1; background-color: #f8f9fa; border-radius: 50rpx; padding: 20rpx 30rpx; font-size: 32rpx; margin-right: 20rpx; } .send-btn { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; border-radius: 50rpx; font-size: 32rpx; padding: 0 40rpx; height: 80rpx; line-height: 80rpx; } .send-btn[disabled] { opacity: 0.5; }4.2 实现聊天逻辑与云函数调用最后我们编写页面的交互逻辑index.js。// pages/index/index.js Page({ data: { messages: [], // 存储所有消息 {role: user|assistant, content: ...} inputValue: , // 输入框内容 isLoading: false, // 是否正在加载AI回复 scrollToViewId: , // 用于滚动到底部的视图ID autoFocus: true // 自动聚焦输入框 }, onLoad() { // 可以尝试从本地缓存加载历史对话 const history wx.getStorageSync(chatHistory); if (history Array.isArray(history)) { this.setData({ messages: history }); this.scrollToBottom(); } }, // 输入框内容变化 onInput(e) { this.setData({ inputValue: e.detail.value }); }, // 发送消息 async sendMessage() { const userInput this.data.inputValue.trim(); if (!userInput || this.data.isLoading) return; // 1. 清空输入框添加用户消息到界面 this.setData({ inputValue: , messages: [...this.data.messages, { role: user, content: userInput }], isLoading: true }); this.scrollToBottom(); // 2. 准备调用云函数 try { // 从当前消息列表中提取历史对话格式化为API需要的格式 const conversationHistory this.data.messages.map(msg ({ role: msg.role, content: msg.content })); // 3. 调用云函数 const res await wx.cloud.callFunction({ name: chatWithAI, // 你的云函数名称 data: { userMessage: userInput, conversationHistory: conversationHistory }, config: { env: 你的云环境ID // 替换为你的云开发环境ID } }); const result res.result; // 4. 处理云函数返回结果 if (result.code 200) { // 成功添加AI回复到消息列表 const newMessages [ ...this.data.messages, { role: assistant, content: result.data.reply } ]; this.setData({ messages: newMessages, isLoading: false }); // 保存到本地缓存 wx.setStorageSync(chatHistory, newMessages); } else { // 云函数逻辑错误 throw new Error(result.message || 服务处理失败); } } catch (err) { // 5. 处理错误显示错误信息 console.error(调用失败:, err); const errorMsg 抱歉出错了${err.message || 网络或服务异常}; const newMessages [ ...this.data.messages, { role: assistant, content: errorMsg } ]; this.setData({ messages: newMessages, isLoading: false }); wx.setStorageSync(chatHistory, newMessages); } finally { // 无论成功失败滚动到底部 this.scrollToBottom(); } }, // 滚动到最新消息 scrollToBottom() { const lastIndex this.data.messages.length; this.setData({ scrollToViewId: msg-${lastIndex - 1} }); } });前端逻辑关键点消息管理使用messages数组维护完整的对话历史并同步到本地缓存 (wx.setStorageSync)实现页面刷新后对话不丢失。状态反馈通过isLoading控制按钮禁用状态和显示“正在思考”的动画提示提升用户体验。错误处理对云函数调用失败、网络异常等情况进行了前端捕获并给用户友好的提示。自动滚动利用scroll-into-view实现发送/接收消息后聊天区域自动滚动到底部。5. 进阶优化实现流式响应与体验提升上面的代码实现了基础功能但AI生成文字需要时间让用户盯着一个空白的加载动画等好几秒体验并不好。流式响应Streaming可以让回复像打字一样一个字一个字地出现体验会流畅很多。5.1 改造云函数支持流式响应这需要模型API本身支持流式输出百川API的stream: true参数并且云函数和小程序前端都需要进行较大改造以处理数据流。由于涉及更复杂的SSE或WebSocket技术这里给出一个简化的模拟流式思路适用于不支持真流式的API或作为折中方案云函数调用API时仍使用stream: false但在获取到完整回复后将长文本按句子或词组拆分成数组。云函数返回不一次性返回全部内容而是通过循环可以结合云函数HTTP触发器或WebSocket分批返回拆分后的文本片段。小程序前端监听这些分批返回的数据并逐段拼接显示。注意微信小程序云函数对长连接和流式传输的支持有限真正的生产环境流式方案更推荐使用你自己的后端服务器配合WebSocket来实现云函数仅作为请求中转。这将涉及更复杂的架构超出了本篇基础教程的范围但它是提升体验的重要方向。5.2 其他实用优化点即使不实现真流式也有很多可以立刻做的优化对话长度管理在云函数中检查conversationHistory的总长度或估算token数如果过长可以丢弃最早的几轮对话或者调用模型的“总结”功能将长历史压缩成一条摘要信息再继续对话以防止超出模型上下文限制。前端防抖与加载态对发送按钮做防抖处理防止用户快速点击发送多条。优化“正在思考”的动画使其更生动。消息持久化目前用的是本地缓存对于重要对话可以考虑将消息上传到云数据库进行永久存储。客服角色设定在云函数调用API的messages参数最前面加入一个system角色的消息来设定AI的行为。例如const systemPrompt 你是一个专业的宠物用品商城客服态度热情、耐心。请基于商城的商品信息如猫粮、狗粮、玩具、保健品等和常见的宠物养护知识来回答用户问题。如果遇到无法确认的问题请引导用户联系人工客服。; messages.unshift({ role: system, content: systemPrompt });这能极大地提升回复的针对性和专业性。6. 总结走完这一趟你会发现把一个像百川2-13B这样的大模型接入微信小程序核心就是解决“安全调用”和“数据转发”的问题。云函数在这里扮演了一个非常称职的“中间人”它让小程序前端无需关心复杂的API密钥和网络策略只需要像调用普通服务一样和它对话就行。实际开发中我建议先从非流式的版本开始把对话的基本链路跑通确保稳定性。然后根据你的实际业务需求逐步加入角色设定、历史管理、错误重试等逻辑。如果对用户体验要求极高再考虑研究WebSocket来实现真正的流式响应。这个项目里用到的技术栈——小程序前端、云函数、HTTP API调用——都是非常通用的你完全可以举一反三把其他AI服务比如图像识别、语音合成也用类似的架构接进来让你的小程序变得更智能。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。