Alibaba DASD-4B Thinking 对话工具结合微信小程序开发打造个人智能聊天机器人最近有不少朋友在问自己部署了一个不错的对话模型怎么才能随时随地用起来总不能一直开着电脑浏览器吧。正好微信小程序是个绝佳的载体它轻便、无需安装、触手可及。今天我就来分享一下如何将部署在星图GPU平台上的Alibaba DASD-4B Thinking对话工具与微信小程序前端“手拉手”打造一个完全属于你个人的智能聊天机器人。整个过程其实并不复杂核心就是让小程序去调用我们部署好的模型API。我会从最基础的小程序项目搭建开始一步步带你完成界面设计、网络请求、数据处理和本地存储最终实现一个功能完整、体验流畅的对话应用。无论你是前端新手还是有一定经验的开发者跟着走一遍都能收获一个可以实际运行和展示的作品。1. 项目准备与环境搭建在开始敲代码之前我们需要把前后端的“地基”打好。后端就是我们已经在星图GPU平台上部署好的Alibaba DASD-4B Thinking服务前端则是全新的微信小程序项目。1.1 确认后端API服务首先确保你的Alibaba DASD-4B Thinking模型已经在星图GPU平台上成功部署并运行。部署过程这里不赘述假设你已经获得了一个可以访问的API端点Endpoint比如https://your-mirror-endpoint/v1/chat/completions。你需要测试一下这个接口是否工作正常。通常这类对话模型的API调用方式与OpenAI的Chat Completions接口类似。你可以使用curl命令或者Postman等工具进行测试。一个最简单的请求体可能长这样{ model: DASD-4B-Thinking, messages: [ {role: user, content: 你好请介绍一下你自己。} ], stream: false }如果返回了包含模型回复的JSON数据比如{choices:[{message:{content:你好我是DASD-4B-Thinking...}}]}那就说明后端服务一切就绪。请记下你的API地址和所需的任何认证信息如API Key我们稍后会用到。1.2 创建微信小程序项目打开微信开发者工具点击“新建项目”。项目名称可以起一个你喜欢的名字比如“我的AI助手”。目录选择一个本地文件夹存放项目代码。AppID如果你有可以填写如果没有使用测试号也可以进行开发和预览部分高级功能受限。后端服务选择“不使用云服务”。模板选择“JavaScript-基础模板”即可。点击创建后开发者工具会自动生成一个包含基础结构的小程序项目。项目的主要目录结构如下my-ai-assistant/ ├── pages/ │ ├── index/ // 首页我们将主要在这里开发 │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ └── logs/ // 日志页暂时用不到 ├── utils/ // 工具类文件夹 ├── app.js // 小程序逻辑 ├── app.json // 小程序全局配置 ├── app.wxss // 小程序全局样式 └── project.config.json // 项目配置文件我们的开发工作将主要集中在pages/index这个目录下。2. 设计聊天界面与布局一个好的聊天界面应该清晰、易用。我们主要需要两个区域显示对话历史的区域以及底部的输入发送区域。2.1 构建页面结构 (index.wxml)打开pages/index/index.wxml文件我们将用一些基础的视图组件来搭建界面。!-- pages/index/index.wxml -- view classcontainer !-- 标题栏 -- view classheader text classtitle我的AI助手 (DASD-4B)/text /view !-- 对话消息列表区域 -- scroll-view classmessage-list scroll-y scroll-into-view{{toView}} scroll-with-animation block wx:for{{messageList}} wx:keyid !-- 用户消息靠右显示 -- view wx:if{{item.role user}} classmessage-row user-row view classmessage-bubble user-bubble text{{item.content}}/text /view image classavatar src/images/user-avatar.png/image /view !-- AI消息靠左显示 -- view wx:elif{{item.role assistant}} classmessage-row assistant-row image classavatar src/images/ai-avatar.png/image view classmessage-bubble assistant-bubble text{{item.content}}/text view wx:if{{item.isLoading}} classloading-dots text./texttext./texttext./text /view /view /view /block /scroll-view !-- 底部输入与发送区域 -- view classinput-area input classinput-box placeholder请输入你想聊的内容... bindinputonInput value{{inputValue}} bindconfirmsendMessage focus{{autoFocus}} / button classsend-btn bindtapsendMessage disabled{{isSending}} {{isSending ? 思考中... : 发送}} /button /view /view这段代码创建了一个带标题的聊天窗口。scroll-view用于展示可滚动的对话历史根据消息角色user或assistant决定左右布局。输入框和发送按钮固定在底部。我们还为AI回复预留了一个加载中的状态loading-dots。2.2 美化界面样式 (index.wxss)接下来在pages/index/index.wxss中为这些元素添加样式让界面看起来更舒服。/* pages/index/index.wxss */ .container { height: 100vh; display: flex; flex-direction: column; background-color: #f5f5f5; } .header { padding: 30rpx 0; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; text-align: center; box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1); } .title { font-size: 36rpx; font-weight: bold; } .message-list { flex: 1; padding: 20rpx; box-sizing: border-box; overflow: hidden; /* 重要确保滚动生效 */ } .message-row { display: flex; align-items: flex-start; margin-bottom: 30rpx; } .user-row { justify-content: flex-end; } .assistant-row { justify-content: flex-start; } .avatar { width: 80rpx; height: 80rpx; border-radius: 50%; flex-shrink: 0; } .user-row .avatar { order: 2; margin-left: 20rpx; } .assistant-row .avatar { order: 1; margin-right: 20rpx; } .message-bubble { max-width: 70%; padding: 20rpx 30rpx; border-radius: 20rpx; line-height: 1.5; word-wrap: break-word; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08); } .user-bubble { background-color: #0084ff; color: white; border-bottom-right-radius: 4rpx; } .assistant-bubble { background-color: white; color: #333; border-bottom-left-radius: 4rpx; } .loading-dots text { animation: blink 1.4s infinite both; font-size: 40rpx; line-height: 0; } .loading-dots text:nth-child(2) { animation-delay: 0.2s; } .loading-dots text:nth-child(3) { animation-delay: 0.4s; } keyframes blink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } } .input-area { display: flex; padding: 20rpx; background-color: white; border-top: 1rpx solid #eee; align-items: center; } .input-box { flex: 1; background-color: #f9f9f9; border-radius: 40rpx; padding: 20rpx 30rpx; margin-right: 20rpx; font-size: 28rpx; } .send-btn { background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; border-radius: 40rpx; padding: 0 40rpx; height: 80rpx; line-height: 80rpx; font-size: 28rpx; } .send-btn[disabled] { opacity: 0.6; }现在界面已经有了基本的雏形消息气泡、头像、输入框和按钮都具备了清晰的视觉区分。3. 实现核心逻辑与数据交互界面是骨架逻辑才是灵魂。接下来我们在pages/index/index.js中实现数据的绑定、用户交互以及最重要的——与后端AI模型的通信。3.1 初始化页面数据与事件首先在页面的data中定义需要绑定的变量并在onLoad生命周期中尝试读取本地存储的对话历史。// pages/index/index.js Page({ data: { messageList: [], // 对话消息列表 inputValue: , // 输入框内容 isSending: false, // 是否正在发送请求 toView: , // 用于滚动到底部的视图ID autoFocus: false, // 控制输入框自动聚焦 apiUrl: https://YOUR_MIRROR_ENDPOINT/v1/chat/completions, // 替换为你的API地址 apiKey: YOUR_API_KEY_HERE, // 如果需要替换为你的API Key }, onLoad: function() { // 尝试从本地缓存加载历史对话 this.loadHistory(); }, // 从本地缓存加载历史记录 loadHistory: function() { const history wx.getStorageSync(ai_chat_history); if (history Array.isArray(history)) { this.setData({ messageList: history }); // 加载后滚动到底部 this.scrollToBottom(); } }, // 保存对话历史到本地缓存 saveHistory: function() { wx.setStorageSync(ai_chat_history, this.data.messageList); }, // 监听输入框内容变化 onInput: function(e) { this.setData({ inputValue: e.detail.value }); }, })3.2 实现发送消息与调用AI接口这是最核心的部分。当用户点击发送或按回车时我们需要将用户消息加入列表然后调用后端API获取AI回复。// 继续在 pages/index/index.js 中添加方法 // 发送消息 sendMessage: function() { const that this; const userInput this.data.inputValue.trim(); if (!userInput || this.data.isSending) return; // 空消息或正在发送时忽略 // 1. 清空输入框并添加用户消息到列表 this.setData({ inputValue: , autoFocus: true // 发送后重新聚焦输入框 }); const userMessage { id: Date.now(), role: user, content: userInput }; const newList [...this.data.messageList, userMessage]; this.setData({ messageList: newList }); // 2. 添加一个临时的、加载中的AI消息占位符 const tempAIMessageId temp_ Date.now(); const listWithTempAI [...newList, { id: tempAIMessageId, role: assistant, content: , isLoading: true }]; this.setData({ messageList: listWithTempAI, isSending: true }); this.scrollToBottom(); // 3. 准备请求数据构建符合后端API格式的消息历史 // 通常只需要发送最近的若干条消息作为上下文避免token超限 const messagesForAPI this.buildMessageContext(newList); // 4. 发起网络请求 wx.request({ url: this.data.apiUrl, method: POST, header: { Content-Type: application/json, Authorization: Bearer ${this.data.apiKey} // 如果API需要认证 }, data: { model: DASD-4B-Thinking, // 模型名称根据后端实际名称调整 messages: messagesForAPI, stream: false, // 我们先用非流式简单些 max_tokens: 500 // 限制回复长度 }, success(res) { console.log(API调用成功:, res); if (res.statusCode 200 res.data.choices res.data.choices[0]) { const aiContent res.data.choices[0].message.content; // 成功获取回复更新临时AI消息为真实回复 that.updateTempAIMessage(tempAIMessageId, aiContent); } else { // 处理API返回的错误 that.showError(AI似乎开小差了: (res.data.error?.message || 未知错误)); that.removeTempAIMessage(tempAIMessageId); } }, fail(err) { console.error(API调用失败:, err); that.showError(网络请求失败请检查API配置或网络连接); that.removeTempAIMessage(tempAIMessageId); }, complete() { that.setData({ isSending: false }); } }); }, // 构建发送给API的消息上下文例如只取最近10轮对话 buildMessageContext: function(fullList) { // 简单策略取最后10条消息确保角色交替 const recentMessages fullList.slice(-10); // 转换为API需要的格式 {role, content} return recentMessages.map(msg ({ role: msg.role, content: msg.content })); }, // 更新临时AI消息为真实内容 updateTempAIMessage: function(tempId, content) { const newList this.data.messageList.map(item { if (item.id tempId) { return { ...item, content: content, isLoading: false }; } return item; }); this.setData({ messageList: newList }); this.saveHistory(); // 保存到本地 this.scrollToBottom(); }, // 移除临时AI消息用于出错时 removeTempAIMessage: function(tempId) { const newList this.data.messageList.filter(item item.id ! tempId); this.setData({ messageList: newList }); }, // 显示错误提示 showError: function(msg) { wx.showToast({ title: msg, icon: none, duration: 3000 }); }, // 滚动到底部 scrollToBottom: function() { // 简单实现设置一个位于列表末尾的view的id并滚动到它 setTimeout(() { if (this.data.messageList.length 0) { const lastMsgId this.data.messageList[this.data.messageList.length - 1].id; this.setData({ toView: msg_ lastMsgId }); } }, 100); }, })注意你需要将代码中的apiUrl和apiKey替换成你自己在星图GPU平台上部署服务后获得的真实地址和密钥。同时根据你的后端API的实际要求调整请求头(header)和请求体(data)中的字段。3.3 完善WXML以支持滚动和消息标识为了让scrollToBottom函数生效我们需要回到index.wxml为每条消息的根view添加一个以msg_为前缀的id。!-- 修改消息列表部分的block为每个message-row添加id -- block wx:for{{messageList}} wx:keyid view wx:if{{item.role user}} classmessage-row user-row idmsg_{{item.id}} !-- ... 内容不变 ... -- /view view wx:elif{{item.role assistant}} classmessage-row assistant-row idmsg_{{item.id}} !-- ... 内容不变 ... -- /view /block4. 功能增强与体验优化基础功能已经实现但一个好用的应用还需要一些贴心的细节。我们来添加清除历史和复制消息的功能。4.1 添加清除对话历史功能在index.wxml的标题栏附近添加一个清除按钮。!-- 在 .header 视图内添加 -- view classheader text classtitle我的AI助手 (DASD-4B)/text button classclear-btn sizemini bindtapclearHistory清空/button /view为按钮添加一点样式。/* 在 index.wxss 中添加 */ .header { position: relative; /* 为按钮定位做准备 */ /* 其他样式不变 */ } .clear-btn { position: absolute; right: 20rpx; top: 50%; transform: translateY(-50%); background-color: rgba(255,255,255,0.2); color: white; border: none; font-size: 24rpx; }在index.js中实现清除逻辑。// 在 Page 对象中添加方法 // 清除对话历史 clearHistory: function() { const that this; wx.showModal({ title: 提示, content: 确定要清空所有对话记录吗, success(res) { if (res.confirm) { that.setData({ messageList: [] }); wx.removeStorageSync(ai_chat_history); wx.showToast({ title: 已清空, icon: success }); } } }); },4.2 添加长按复制消息功能让用户可以方便地复制AI的回复或自己的提问。在index.wxml中为消息气泡绑定长按事件。!-- 修改 assistant-bubble 和 user-bubble添加 bindlongpress 事件 -- view wx:if{{item.role user}} classmessage-row user-row idmsg_{{item.id}} view classmessage-bubble user-bubble bindlongpresscopyMessage>// 在 Page 对象中添加方法 // 长按复制消息 copyMessage: function(e) { const content e.currentTarget.dataset.content; if (!content) return; wx.setClipboardData({ data: content, success() { wx.showToast({ title: 内容已复制, icon: success }); } }); },5. 项目配置与真机体验5.1 配置网络请求权限微信小程序要求所有网络请求的域名都需要在后台配置。由于我们调用的是自己部署的后端API其域名不在微信的默认白名单中。你需要登录微信公众平台进入你的小程序管理后台。在开发-开发管理-开发设置页面。找到服务器域名部分。在request合法域名中添加你后端API的域名例如https://your-mirror-endpoint.com。注意域名必须备案且必须使用HTTPShttps://。对于开发阶段你可以在微信开发者工具中临时开启“不校验合法域名”选项在工具栏的“详情”-“本地设置”中勾选以便在开发工具内测试。但真机预览和上线前必须配置合法域名。5.2 真机预览与发布预览在开发者工具点击“预览”生成二维码用微信扫码即可在手机上体验。上传点击“上传”可以将代码上传到微信服务器用于提交审核。审核与发布在微信公众平台提交审核通过后即可正式发布你的个人智能聊天机器人小程序。6. 总结与后续思考走到这里一个连接了强大后端AI模型的个人微信聊天机器人就基本完成了。整个过程从零开始涵盖了小程序的基础结构、样式布局、数据绑定、网络请求wx.request以及本地存储wx.setStorageSync等核心知识点。你不仅学会了如何将前端界面与后端服务连接还实现了一个有完整交互逻辑的应用。实际用下来这个方案有几个明显的优点。首先是便捷手机点开就用比打开电脑网页方便太多。其次是私有化对话历史和你的API调用都掌握在自己手里。当然在开发过程中你可能也发现了一些可以优化的点比如目前使用的是非流式接口回复需要等待全部生成完毕体验上会有一点延迟。未来你可以尝试接入后端模型的流式输出接口实现打字机式的逐字输出效果体验会立刻提升一个档次。另外当前的上下文管理比较简单只取了最近10条。如果你的模型支持更长的上下文你可以设计一个更智能的历史管理机制比如自动总结过长的对话。你还可以为小程序加入更多功能比如语音输入、多轮对话场景预设、甚至将对话记录同步到云端等等。这个项目就像一个乐高底座你已经搭好了最关键的部分。接下来可以根据你的兴趣和需求自由地添加更多“积木”。希望这个实践能帮你打开一扇门看到将AI能力融入日常移动应用开发的无限可能。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。