不懂代码的餐饮人,30天做出一个小程序(五)

但我总觉得还差那么点意思——它还不够"聪明"。你填一个数字，它算一个结果，跟个计算器没什么本质区别。你得自己把食材成本算好填进去，你得自己去翻历史记录找规律，你得自己对着数据想"这礼拜毛利率怎么掉了"。

那为什么不把我们第一篇搭的那个AI智能体接进来呢？让它直接读你的数据、帮你分析、跟你对话。你不用翻来翻去，直接对着小程序说句话就行。

这一篇，就是整个系列的高潮时刻——把AI智能体和你的小程序打通。打通之后，你的小程序就从一个"计算器"变成了一个"AI助手"。

还是那句话：不用你写代码，全让AI帮你写。你只要跟着做，半小时搞定。

01

为什么要把智能体接进小程序？

有人可能会问：扣子本身就能聊天，我直接在扣子上用智能体不就行了？为啥还要费劲接到小程序里？

问得好。我刚开始也这么想的。但做着做着就发现，把智能体放进小程序里，有几个没法替代的好处：

1数据打通，不用重复输入

智能体在小程序里，可以直接读你存在云数据库里的食材数据、营业额数据。你不用把同样的东西在两个地方各输一遍。问一句"这个礼拜毛利率怎么样"，它直接从数据库里取数据回答你。

2一个入口，用起来方便

对餐饮人来说，手机里App越少越好。打开微信、下拉、点一下小程序，就能录数据、问问题，多方便。谁也不想同时用好几个工具，记好几个账号密码。

3你的产品，你的品牌

小程序是你自己的，名字、Logo、功能都是你说了算。别人用你的小程序，记住的是你这个品牌。如果都在扣子里用，那人家记住的是扣子，不是你。

4后面可以分享给同行用

如果你做得好，想分享给其他餐饮老板用，直接把小程序发过去就行。人家不用注册扣子、不用搭智能体，点开就能用。这才叫真正的产品化。

说白了，智能体是"大脑"，小程序是"身体"。光有大脑没有身体，它碰不到你的数据、没法帮你干活；光有身体没有大脑，它就是个没灵魂的计算器。

把两者接在一起，才是一个完整的AI餐饮助手。

💡 大飞的心里话

我做这个系列的初衷，不是教大家写代码，而是想证明一件事：一个不懂技术的普通人，也能用AI工具做出自己的产品。以前做个小程序得花几万块找外包，现在呢？你只要花时间，AI帮你写代码、帮你搭智能体、帮你调试。成本几乎为零，门槛也低到你不敢相信。

02

扣子智能体怎么接入小程序？

在动手之前，先给你讲清楚原理。不用太细，但你得知道大概是怎么回事，不然出了问题你都不知道去哪找。

扣子（Coze）给每个智能体都提供了一个API接口。什么是API？你可以理解成一个"传话员"——你的小程序有话想跟智能体说，就把话传给这个API，API再把话带给智能体，智能体回答完了，API再把答案带回来给小程序。

整个流程大概是这样的：

1用户在小程序的输入框里打字，点发送

↓

2小程序把这句话通过API发送给扣子智能体

↓

3智能体思考、生成回答（还能调用你数据库里的数据）

↓

4API把回答返回给小程序，显示在聊天界面上

你需要准备两样东西：API Key和Bot ID。

API Key就像是一把钥匙，证明你有权利调用这个智能体。Bot ID就像是门牌号，告诉API你要找哪个智能体。这两个东西都在扣子的后台能找到，后面我会告诉你具体在哪。

知道了原理，接下来就简单了：先让Codex写一个聊天页面，然后把API Key和Bot ID填进去，最后测试一下能不能对话。三步走，半小时搞定。

▲ 扣子官方有完整的API文档，有兴趣可以去看看

03

让Codex写一个聊天页面

老规矩，写代码的事交给Codex。我们只要把需求说清楚就行。

这一次的需求比前几篇稍微复杂一点，因为要做一个聊天界面，还要对接API。没关系，我把提示词给你写好了，你直接复制粘贴就行。

▲ 打开Codex，新建对话，把下面这段粘进去

📋 可直接复制的提示词：

我正在开发一个餐饮毛利计算小程序，用微信小程序+云开发。  现在需要做一个AI聊天页面，对接扣子（Coze）智能体API。具体需求如下：  【页面布局】 1. 顶部：导航栏标题"AI助手" 2. 中间：聊天消息列表区域，气泡样式    - 用户消息：右侧橙色气泡，白色文字    - AI回复：左侧白色气泡，深色文字    - 消息之间有间距 3. 底部：输入框 + 发送按钮    - 输入框支持多行输入    - 发送按钮橙色背景    - 发送中显示"正在输入..."的加载状态  【API对接】 使用扣子的Bot API接口，接口地址： https://api.coze.cn/v3/chat  请求方式：POST 请求头需要带： - Authorization: Bearer {API_KEY} - Content-Type: application/json  请求体格式： {   "bot_id": "{BOT_ID}",   "user_id": "wechat_user_001",   "stream": false,   "additional_messages": [     {       "role": "user",       "content": "用户输入的内容",       "content_type": "text"     }   ] }  返回结果中，AI的回复在 content 字段里。  【代码要求】 1. 给出完整的页面代码：chat.wxml、chat.wxss、chat.js、chat.json 2. API_KEY和BOT_ID放在js文件顶部，方便后续修改 3. 发送消息时，用户消息立即显示在列表中，然后调用接口 4. 接口返回后，把AI回复追加到列表里 5. 处理加载状态和错误提示 6. 消息列表自动滚动到底部 7. 小程序的app.json里需要配置什么也告诉我  请把完整代码给我，我直接复制就能用。

▲ 提示词就长这样，全选复制过去

把这段提示词发给Codex，等个一分钟左右，它就会给你一整套代码。包括页面结构、样式、交互逻辑，连API请求怎么写都帮你弄好了。

💡 小技巧

如果Codex给你的代码里API地址不对，或者请求格式跟扣子最新的API不一样，别慌。你就把扣子官方API文档的链接发给它，说"按照这个最新文档的格式改一下"，它马上就能调整过来。AI写代码不怕改，就怕你不说清楚要改成什么样。

04

找到API Key和Bot ID，填进代码里

代码写好了，但现在还跑不通——因为API Key和Bot ID还是占位的，得换成你自己的。这一步很关键，找对地方了两分钟搞定，找不对地方能急死你。

我一步步告诉你在哪找。

1找Bot ID（智能体编号）

打开扣子网站（coze.cn），登录进去，找到你第一篇创建的那个智能体（餐饮毛利管家或者你自己起的名字）。点进去，在浏览器地址栏里，你会看到一串数字，那就是Bot ID。大概是7开头的一串数字，比如73xxxxxxxxx。把它复制下来。

▲ 地址栏里那串数字就是Bot ID，很好找

2找API Key（接口密钥）

在扣子网站上，点击右上角你的头像，找到"API密钥"或者"个人访问令牌"之类的选项（不同版本名字可能略有不同）。点进去，选择"新建密钥"，给它起个名字比如"我的小程序"，然后确认。它会给你一长串字符，那就是API Key。注意：这个Key只显示一次，赶紧复制保存好，关了页面就看不到了。

▲ API Key只显示一次，一定要马上复制保存

3把两个ID填进代码里

打开微信开发者工具，找到chat.js文件，在顶部找到API_KEY和BOT_ID两个变量，把你刚才复制的内容填进去。注意别多空格也别少字符，前后的引号要保留。填好之后保存。

⚠️ 重要安全提醒

API Key相当于你的密码，千万别泄露给别人，也别传到公开的代码仓库里。如果不小心泄露了，赶紧去扣子后台把那个密钥删掉，重新生成一个。后面如果你要正式上线，建议把API调用放在云函数里，不要直接写在前端代码里，这样更安全。但我们现在只是做原型测试，先写在前端没问题。

4配置request合法域名（重要！）

微信小程序有个规定：你要请求外部的接口，必须先把域名加到白名单里。不然在真机上会请求失败。操作方法：登录微信公众平台 → 开发 → 开发管理 → 开发设置 → 服务器域名 → 把 api.coze.cn 添加到request合法域名里。

如果你现在只是在开发者工具里测试，可以先跳过这一步，在详情 → 本地设置里勾选"不校验合法域名"就行。但后面要发布上线的话，必须配置。

05

测试一下，跟你的小程序说句话

好了，代码贴完了，Key也填好了，域名也配了（至少本地测试的勾打上了）。现在是见证奇迹的时刻——点击编译，然后在模拟器里打开聊天页面，试着说句话。

比如你可以问："你好，你能帮我做什么？"

如果AI回复你了——恭喜！你的小程序正式"活"了！它不再是一个只会算数的工具，而是一个能跟你对话、能思考的AI助手了。

但如果没反应、报错了、一直转圈圈，也别慌。这很正常，我当时也调了好半天。下面是我总结的几个最常见的问题和解决方法，你挨个排查：

❓ 问题1：发送后一直没反应，控制台报401错误

401就是"没权限"的意思，99%是API Key填错了。回去检查一下：是不是复制全了？有没有多复制空格？前后的引号有没有问题？如果不确定，就去扣子后台删掉重新生成一个，再填进去试试。

❓ 问题2：报"bot not found"或者找不到智能体

这是Bot ID不对。回去看一下地址栏里的数字，是不是复制错了位数？有没有把前面的字母也复制进去？Bot ID应该是纯数字的。而且注意，这个Bot必须是你自己账号下的，用别人的Bot ID是不行的。

❓ 问题3：开发者工具里能用，真机上用不了

这就是刚才说的域名白名单没配。真机上微信会严格检查域名，不在白名单里的接口一律不让访问。去微信公众平台，在服务器域名里把 api.coze.cn 加到request合法域名里。保存之后，重新扫码预览就好了。

❓ 问题4：AI回复的内容不对，跟我设定的人设不一样

那说明你用错Bot了，或者Bot ID填的是另一个智能体的。回去确认一下你填的Bot ID对应的是不是"餐饮毛利管家"那个智能体。如果ID没错，就去扣子后台检查一下你的智能体提示词对不对，发布了没有。改完提示词一定要点发布，不然调用的还是旧版本。

❓ 问题5：消息能发出去，但返回的是乱码或者格式不对

这通常是因为扣子API返回的数据结构跟你代码里解析的不一样。不同版本的API返回格式可能有差异。最简单的解决办法：把控制台里打印的返回结果复制给Codex，说"这是API返回的数据，请帮我修改代码，正确提取AI的回复内容"。它看一眼就知道怎么改。

以上五个问题，基本覆盖了90%的对接失败原因。如果你碰到的问题不在这五个里面，也别着急，把报错信息复制给Codex，它就是你的免费技术支持。

06

系列进度：一个真正的AI小程序诞生了

到这里，咱们这个系列的核心功能就全部完成了。让我们来盘点一下，从第一篇到第五篇，我们都做了些什么：

✓第一篇：搭好了AI智能体，确定了产品方向

✓第二篇：用Codex搭出了小程序骨架

✓第三篇：接入云数据库，搞定食材录入

✓第四篇：营业额录入，自动算毛利毛利率

✓第五篇（本篇）：对接AI智能体，小程序"活"了

○第六篇：测试上线 + 发布审核（未完待续）

一个月前，我跟你一样，连HTML是什么都不知道，觉得做小程序是程序员才能干的事。现在呢？我们有了一个能录食材、能记流水、能算毛利、还能跟AI对话的小程序。

说真的，我自己都觉得挺神奇的。你说我们写了代码吗？一行都没写。但产品做出来了吗？做出来了。这就是AI的力量——它不是让你变成程序员，而是让你不用当程序员也能做出程序员才能做的事。

当然，现在这个版本还比较粗糙。聊天功能跑通了，但智能体还不能直接读写你小程序里的数据，你还得手动录入食材和营业额。没关系，这是基础版，先跑通，再优化。后面你可以慢慢让智能体接入云数据库，实现真正的"说句话就搞定"。

📚 系列回顾

第一篇：AI智能体搭建——先把"大脑"装起来

第二篇：用Codex搭出小程序骨架——零代码也能搞前端

第三篇：食材录入——让你的小程序真正"记住"东西

第四篇：营业额录入——每天的流水终于有地方记了

第五篇（本篇）：对接智能体——你的小程序终于"活"了

📢 完结篇预告

发布上线——你的小程序终于要跟大家见面了

最后一步：提交审核、发布上线，以及上线后要做的几件事

👨‍🍳 关于作者

大飞，4年餐饮人，开过两家冒菜店。不懂代码但敢折腾，正在用AI工具从零搭一个餐饮毛利计算小程序。记录整个过程，希望能帮到同样在餐饮路上打拼的你。

🧾 小程序体验入口

💬 30天，你也能做出自己的小程序

我能做到的，你也一定能。跟着这个系列一步步来，有问题评论区留言，或者进交流群一起讨论。咱们最后一篇，发布上线见！

如果觉得有用，点个「在看」转给身边做餐饮的朋友 👇