墨语灵犀微信小程序开发实战集成AI对话功能想给你的微信小程序加个“智能大脑”让它能和用户聊天、回答问题吗今天我们就来手把手教你如何把墨语灵犀的AI对话能力无缝集成到你的小程序里。整个过程不复杂不需要你懂复杂的后端部署只需要在前端调用API就行。跟着这篇教程走一个下午就能让你的小程序“开口说话”。1. 准备工作理清思路与获取钥匙在动手写代码之前我们得先想清楚要做什么以及准备好必要的工具。这就像盖房子前先画好图纸、备好材料一样。1.1 我们要实现什么简单来说我们要在小程序里做一个类似聊天机器人的界面。用户输入文字小程序把文字发送给墨语灵犀的服务器拿到AI生成的回复后再展示给用户。核心流程就是用户输入 - 小程序发送 - AI处理 - 小程序接收并展示。为了实现这个流程我们需要一个能输入文字和发送消息的界面。一个能显示对话历史包括用户说的话和AI的回复的区域。一个负责与墨语灵犀服务器“通话”的网络请求模块。一些提升体验的小细节比如发送时的加载动画、网络错误的提示等。1.2 获取API访问凭证要调用墨语灵犀的API你需要一个“通行证”通常是一个API Key。这个Key是你身份的标识服务器靠它来确认是谁在调用服务并进行计费。如何获取你需要前往墨语灵犀的官方网站或开发者平台注册账号并创建应用通常就能在控制台找到你的API Key。请妥善保管它不要直接硬编码在前端代码里后面我们会讲更安全的方法。了解接口同时你还需要知道API的调用地址Endpoint和请求格式。墨语灵犀的文档会详细说明比如请求的URL、需要传递哪些参数如消息内容、模型选择等、以及返回的数据结构。提前看一眼文档心里有底。1.3 小程序开发环境确保你已经安装了微信开发者工具并且有一个已经注册好的小程序AppID。如果还没有去微信公众平台注册一个小程序账号就能获得。2. 搭建聊天界面从零画UI好的交互从清晰的界面开始。我们先来搭建一个简洁的聊天界面。2.1 设计页面结构我们在小程序的页面文件如pages/chat/chat.wxml中构建两个主要部分聊天消息列表区和底部输入发送区。!-- pages/chat/chat.wxml -- view classchat-container !-- 聊天消息区域 -- scroll-view classmessage-list scroll-y scroll-into-view{{scrollToView}} scroll-with-animation block wx:for{{messageList}} wx:keyindex !-- 用户消息 -- view wx:if{{item.role user}} classmessage-item user-message view classavatar user-avatar我/view view classbubble{{item.content}}/view /view !-- AI回复消息 -- view wx:if{{item.role assistant}} classmessage-item assistant-message view classavatar assistant-avatarAI/view view classbubble text{{item.content}}/text !-- 加载动画仅在AI思考时显示 -- view wx:if{{item.isThinking}} classthinking text classdot./texttext classdot./texttext classdot./text /view /view /view /block /scroll-view !-- 底部输入和发送区域 -- view classinput-area input classinput-box value{{inputValue}} bindinputonInput placeholder请输入您的问题... confirm-typesend bindconfirmsendMessage focus{{autoFocus}} / button classsend-btn bindtapsendMessage disabled{{isSending}} {{isSending ? 发送中 : 发送}} /button /view /view2.2 美化界面样式光有结构还不够我们需要用WXSS小程序的样式表让它看起来像个聊天窗口。/* pages/chat/chat.wxss */ .chat-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; align-items: flex-start; } .user-message { justify-content: flex-end; } .assistant-message { justify-content: flex-start; } .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: white; flex-shrink: 0; margin: 0 20rpx; } .user-avatar { background-color: #07c160; /* 微信绿 */ } .assistant-avatar { background-color: #576b95; /* 深蓝灰 */ } .bubble { max-width: 70%; padding: 20rpx 30rpx; border-radius: 12rpx; font-size: 32rpx; line-height: 1.5; word-break: break-word; } .user-message .bubble { background-color: #95ec69; color: #000; } .assistant-message .bubble { background-color: #fff; color: #333; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1); } .thinking { display: inline-block; margin-left: 10rpx; } .dot { animation: blink 1.4s infinite both; } .dot:nth-child(2) { animation-delay: 0.2s; } .dot:nth-child(3) { animation-delay: 0.4s; } keyframes blink { 0%, 20% { opacity: 0.1; } 50% { opacity: 1; } } .input-area { display: flex; padding: 20rpx; background-color: #fff; border-top: 1rpx solid #e5e5e5; 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; }3. 实现核心逻辑让聊天动起来界面画好了现在我们来注入灵魂——JavaScript逻辑。3.1 初始化数据与事件处理在页面的JS文件pages/chat/chat.js中我们先定义好需要的数据和最基本的事件函数。// pages/chat/chat.js Page({ data: { inputValue: , // 输入框内容 messageList: [], // 所有消息的数组 isSending: false, // 是否正在发送请求 scrollToView: , // 用于控制滚动到底部的视图ID autoFocus: true // 自动聚焦输入框 }, // 监听输入框内容变化 onInput(e) { this.setData({ inputValue: e.detail.value }); }, // 发送消息点击发送按钮或键盘回车触发 sendMessage() { const content this.data.inputValue.trim(); if (!content || this.data.isSending) { return; // 空内容或正在发送时不处理 } // 1. 将用户消息添加到列表 const userMessage { role: user, content: content }; const newMessageList [...this.data.messageList, userMessage]; // 2. 添加一个“AI正在思考”的占位消息 const thinkingMessage { role: assistant, content: , isThinking: true }; newMessageList.push(thinkingMessage); this.setData({ messageList: newMessageList, inputValue: , // 清空输入框 isSending: true }, () { // 数据更新后滚动到底部 this.scrollToBottom(); // 3. 调用API获取AI回复 this.getAIResponse(newMessageList); }); }, // 滚动到消息列表底部 scrollToBottom() { // 简单的延时确保视图更新 setTimeout(() { const lastIndex this.data.messageList.length - 1; this.setData({ scrollToView: msg${lastIndex} }); }, 100); }, })3.2 调用AI API并处理响应这是最核心的一步。我们使用小程序的wx.request来调用墨语灵犀的接口。请注意将API Key直接放在前端代码中有泄露风险。在生产环境中强烈建议通过你自己的后端服务器进行中转由后端来保管和调用API Key。这里为了教程演示我们先展示前端直连的方式。// pages/chat/chat.js (续) Page({ // ... 之前的 data 和 sendMessage 函数 // 调用墨语灵犀API async getAIResponse(messageList) { // !!! 安全警告此处仅为演示API Key应通过后端中转避免暴露在前端 !!! const API_KEY 你的_墨语灵犀_API_Key; // 请替换为你的Key const API_URL https://api.moyulingxi.com/v1/chat/completions; // 示例URL请以官方文档为准 // 构建请求数据。通常需要将整个对话历史或最近几条发送给AI以保持上下文。 const requestData { model: moonshot-v1-8k, // 指定模型根据实际情况修改 messages: messageList.slice(0, -1).map(msg ({ // 排除最后一条“思考中”的消息 role: msg.role, content: msg.content })), stream: false // 非流式响应一次性返回完整内容 }; try { const res await new Promise((resolve, reject) { wx.request({ url: API_URL, method: POST, header: { Content-Type: application/json, Authorization: Bearer ${API_KEY} // 通常的认证方式 }, data: requestData, success: resolve, fail: reject }); }); if (res.statusCode 200) { // 请求成功提取AI回复内容 const aiReply res.data.choices[0]?.message?.content || 抱歉我暂时无法回答这个问题。; this.updateAIMessage(aiReply); } else { // 处理API返回的错误 console.error(API错误:, res); this.updateAIMessage(请求出错 (${res.statusCode}): ${res.data?.error?.message || 未知错误}); } } catch (error) { // 处理网络错误等异常 console.error(网络请求失败:, error); this.updateAIMessage(网络连接失败请检查网络后重试。); } }, // 更新AI的“思考中”消息为实际回复 updateAIMessage(content) { let newMessageList this.data.messageList; // 找到最后一条“思考中”的消息更新其内容并移除加载状态 const lastIndex newMessageList.length - 1; if (lastIndex 0 newMessageList[lastIndex].isThinking) { newMessageList[lastIndex] { role: assistant, content: content, isThinking: false }; this.setData({ messageList: newMessageList, isSending: false }, () { this.scrollToBottom(); }); } }, })4. 优化体验让对话更流畅基础功能已经实现了但一个好的聊天体验还需要一些细节打磨。4.1 管理对话历史与上下文上面的代码每次都将所有历史消息发送给AI这能保证AI记得之前的对话。但随着聊天变长这会增加请求的数据量和API调用的token消耗可能产生更多费用。一个常见的优化是只发送最近N条消息或者当累计token数超过一定阈值时丢弃最早的一些消息。你可以在getAIResponse函数中构建requestData.messages时进行截断// 示例只保留最近10轮对话20条消息 const maxHistoryLength 20; // 10轮 * 2用户AI let historyToSend messageList.slice(0, -1); // 排除最后的“思考中”消息 if (historyToSend.length maxHistoryLength) { historyToSend historyToSend.slice(-maxHistoryLength); // 截取最后N条 } const requestData { model: moonshot-v1-8k, messages: historyToSend.map(msg ({ role: msg.role, content: msg.content })), stream: false };4.2 处理网络延迟与用户反馈网络请求总有快有慢。除了我们已经实现的“思考中”动画和发送按钮的禁用状态还可以考虑超时处理给wx.request设置一个timeout如果超过时间没响应就取消请求并提示用户。重试机制对于偶发的网络错误可以自动重试一次。本地缓存将重要的对话历史缓存在小程序本地wx.setStorage即使用户关闭小程序再打开也能看到之前的记录。4.3 安全与性能考量API Key安全再次强调不要将敏感信息如API Key硬编码在小程序前端。正确的做法是开发一个简单的后端服务可以用任何你熟悉的语言和框架如Node.js、Python Flask等小程序只调用你这个后端接口由后端服务去携带API Key调用墨语灵犀的API。这样Key就安全了。域名配置小程序要求所有网络请求的域名都必须在小程序管理后台的“开发设置”-“服务器域名”中配置。你需要将墨语灵犀的API域名或你自己的后端服务域名添加进去否则请求会失败。图片与富文本如果AI的回复中可能包含Markdown或图片链接你需要使用相应的小程序组件如rich-text来渲染并注意处理图片域名白名单。5. 总结与下一步跟着上面的步骤走一遍一个具备基础AI对话功能的小程序就搭建起来了。整个过程其实并不神秘核心就是界面渲染、事件处理和网络请求这三板斧。用下来感觉墨语灵犀的API响应速度和质量都挺不错的集成起来也比较顺畅。当然这只是一个起点。如果你想做得更完善还有很多可以探索的方向。比如可以加入语音输入和语音合成让对话不仅能看还能听可以实现多轮对话的上下文精准管理让AI更像一个真正的聊天伙伴或者针对你的小程序主题定制一些专门的提示词Prompt让AI的回答更贴合你的业务场景。最关键的安全问题——API Key的管理务必记得要通过自己的后端服务来中转这是上线前必须做的一步。希望这篇教程能帮你打开思路快去动手试试让你的小程序变得更智能吧。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。