不懂代码的餐饮人,7天做出一个小程序(二)
- 2026-08-11 08:15:19
上篇我们搭了一个能对话的AI智能体——食材成本计算助手。它能算毛利、能帮你看成本构成，但它藏在扣子平台的对话框里，店里的小伙伴用起来不方便。
今天这篇，我要给它做个"脸面"——一个微信小程序。这样你打开微信就能用，输入食材数据，直接出毛利分析，跟用美团、饿了么一样顺手。
先说个事儿：上篇发出来之后，后台收到好多留言，有兄弟说"大飞你是不是在忽悠我，我连HTML是啥都不知道"。兄弟你放心，这篇我要干的事更离谱——我要让一个根本不会写代码的AI工具，帮我把整个小程序的页面框架全写出来。
你沒看错，不是我写代码，是AI帮我写代码。而我需要做的，就是把需求说清楚。就这么简单。
来吧，跟着我走。这篇搞完，你的电脑上就能跑起来一个小程序——虽然数据是假的，但界面是真实的，能点开、能滑动、能点击按钮。那种成就感，说实话，比我第一次把卤水调好味还爽。
01 先搞懂一件事：小程序骨架长什么样
在动手之前，咱先搞清楚一个概念：小程序的"前端"到底是啥。
你在微信里用过的那些点餐小程序——打开之后能看到首页、能选菜品、能下单、能看订单列表。这些你眼睛看得到的页面、手指能点的按钮，就是"前端"。
回到咱这个项目。上篇搭好的智能体，它是一个"大脑"——能算成本、能分析数据。但它现在没有脸，没有手，只能在一个对话框里跟你聊。
今天我要做的事，就是给它捏一张脸、装一双手。具体来说，就是搭一个小程序的页面骨架：
首页 —— 一打开就能看到的关键数据：今天成本多少、毛利多少、哪个食材花钱最多。
食材录入页 —— 填个表：买了啥、多少钱、多少斤。简单粗暴。
经营分析页 —— 看趋势：这个月成本率走势如何、哪些食材在偷偷涨钱。
设置页 —— 改店铺名、导出数据，一些辅助功能。
这四个页面搭起来，就像一个房子的框架——墙有了、门有了、窗户的位置留好了，但里面还没家具、没装修。所以我们叫它"骨架"。
打个比方你更好理解：
智能体 = 大脑（负责思考和计算）
小程序前端 = 脸和手（负责展示和操作）
大脑今天已经搭好了。现在来搭脸和手。
骨架搭好之后长什么样呢？先看个效果图，心里有个数：
看到了吧？底部三个Tab，点哪个进哪个页面。页面里有数据展示区域、有按钮、有输入框。虽然数据是假数据，但整个结构已经在了。
你可能会说："这看着也不难啊。"没错，骨架本身不难。难的是写那些代码。但好消息是——代码不用你写。接下来我教你怎么让Codex帮你全部搞定。
02 打开Codex，开始对话
上篇我们用的是扣子平台搭智能体。今天换个工具——Codex。它是OpenAI出的一个AI编程助手，你跟它说你要什么，它帮你把代码写出来。
别被"编程"俩字吓到。用Codex跟用ChatGPT聊天是一模一样的，只不过它专门擅长写代码。你要做的就是——把需求说清楚。
先说怎么进去：
1 打开浏览器，访问 chat.openai.com
2 登录你的账号（没有的话注册一个，免费的就行）
3 在模型选择里，选 Codex 或者带有代码能力的模型
进去之后，你会看到一个对话框，跟上篇在扣子里搭智能体的界面差不多。接下来就是关键环节了——写第一条提示词。
提示词写得好不好，直接决定Codex给你生成代码的质量。我反复调了好几版，下面这个版本是我测下来效果最好的，你直接复制粘贴就行。
注意，这段话有点长，但每个字都有用，别偷懒删减：
📋 直接复制以下全部内容 👇
📋 复制到这里结束 👆
我来说说为什么这段提示词要这么写，搞懂了你以后自己改需求也方便：
第一，明确告诉它做什么。开头就说了"创建一个微信小程序项目"，别让它猜。
第二，把每个页面要有什么写清楚。不是笼统说"要一个首页"，而是写清楚首页放什么数据、放什么按钮、数据怎么展示。你越具体，它生成的东西越接近你的预期。
第三，指定技术要求。告诉它用原生开发、加中文注释。这样生成的代码你以后改起来也看得懂。
第四，指定配色和风格。不指定的话它会给你一套默认样式，可能很丑。咱做餐饮的，审美得在线。
第五，说明数据用假的。这一步很关键。骨架阶段先别想数据的事，先把壳子搭好，后面再接真数据。
把这段话粘贴进去，按回车，然后等。大概一两分钟，Codex就会开始输出代码。你会看到它一个文件一个文件地写，跟一个程序员在你面前敲代码一样。
等它全部输出完，你就能看到一堆代码文件。这时候别慌，往下看——我教你怎么看懂这些代码。
03 Codex生成的代码，怎么看
Codex输出完之后，你面前会有一大堆代码文件。我知道你跟我一样，看到代码就头大。但别急着关页面，我教你快速看懂它的结构。
你不需要看懂每一行代码。真的不需要。但你得知道哪些文件是干嘛的，这样后面出了问题，你至少知道该找谁。
Codex给你生成的项目，大概长这个结构：
我给你翻译一下：
app.json —— 就像一本目录。它告诉小程序"你一共有4个页面，底部Tab栏长这样"。如果页面打不开，先检查这个文件里有没有配对应的路径。
pages文件夹 —— 每个子文件夹就是一个页面。里面的四个文件各管一件事：.wxml管结构（页面上有什么东西）、.wxss管样式（这些东西长什么样）、.js管逻辑（点了按钮会发生什么）、.json管配置。
utils/util.js —— 公共的工具函数。比如成本率怎么算、毛利怎么算，这些计算逻辑放在这里，各个页面都可以调用。
你就把它想象成一家餐厅的组织架构：app.json是菜单（告诉你有哪些菜），每个pages文件夹是一个档口（负责做具体的菜），utils是调料间（公共的原材料）。
你可能还想看看代码长什么样。随便打开一个 .wxml 文件，大概长这样：
看不懂没关系。你只要知道：尖括号包裹的就是页面上的一个元素。就像你看菜单，"宫保鸡丁"是一道菜，这里每一个尖括号对就是一道"菜"——一个文本、一个按钮、一个卡片。
那些 {{shopName}} 这种双大括号，是动态数据占位。意思是"这个地方显示的内容是变量shopName的值"。现在它是假数据，后面接入真实数据后，它就会变成你店铺的真实名字。
好了，代码结构你心里有数了。接下来是最激动人心的环节——把这些代码跑起来！
04 把代码变成能跑的小程序
代码写好了，怎么变成手机上能看到的小程序呢？需要一个工具——微信开发者工具。
这个工具是微信官方出的，专门用来做小程序开发。别被"开发"吓到，咱不用自己开发，只是用它来预览Codex帮我们写好的代码。
具体操作步骤：
1下载微信开发者工具
打开浏览器，搜索"微信开发者工具下载"，进入微信官方下载页面。选"稳定版"，选你电脑对应的系统（Windows或Mac），下载安装。大概1个G左右，等它装完。
2在电脑上创建项目文件夹
在桌面或者任意位置，新建一个文件夹，取名"my-miniprogram"。这个名字随便起，自己能记住就行。
3把Codex生成的代码放进去
回到Codex的对话页面，它生成的每个文件，你都需要手动创建到刚才那个文件夹里。具体来说：Codex给你输出了 app.js 的内容，你就在文件夹里新建一个 app.js 文件，把内容粘贴进去保存。pages/index/index.wxml 的内容，你就在文件夹里创建 pages/index/ 目录，再新建 index.wxml，把内容粘贴进去。
这一步是最花时间的，但也是最简单的——就是复制粘贴，一个一个文件来。大概20-30分钟能搞定。
4打开微信开发者工具，导入项目
打开微信开发者工具，用微信扫码登录。然后点击"导入项目"，选择刚才那个"my-miniprogram"文件夹。AppID那里选"测试号"就行（因为你还没注册小程序账号，用测试号足够预览用了）。点击确定。
5点击编译，见证奇迹
导入成功后，你会看到开发者工具左边有一个手机模拟器，右边是代码编辑区。点击工具栏上的"编译"按钮——
左边模拟器里就会出现你的小程序界面！
说实话，我第一次看到自己"做"出来的小程序出现在模拟器里的时候，愣了好一会儿。那种感觉，就像你开了一辈子的店，第一次有人帮你把店面装修好了。
你可以点击底部的Tab栏，切换首页、录入、分析、设置四个页面。每个页面都有内容，虽然数据是假的，但结构是完整的。
💡 小贴士：遇到问题怎么办？
如果编译后报错，别慌。90%的情况是文件路径不对或者文件少了。检查两件事：① app.json 里的页面路径跟实际文件夹结构是否一致；② 每个页面的四个文件（.wxml/.wxss/.js/.json）是否都创建齐全了。如果还是不行，把报错信息截图发给Codex，让它帮你排查。
05 骨架跑起来了，但还不能用
好了兄弟，到这里，我们来盘点一下今天的战果。
✅ 你已经完成的事情：
✓ 搞懂了小程序前端的基本结构（页面+文件+路由）
✓ 学会了用Codex生成完整的小程序项目代码
✓ 安装了微信开发者工具
✓ 成功把代码导入并编译运行
✓ 拥有了一个能点开、能滑动、能切换的小程序骨架
这对于一个零代码基础的餐饮人来说，已经很了不起了。你做到了很多厨师老板想都不敢想的事情。
❌ 但是，诚实地说，现在这个小程序还不能真正用：
✗ 数据都是写死的假数据，不会变化
✗ 食材录入页填了数据保存后，不会真正存下来
✗ 分析页的数据不会根据录入自动更新
✗ 还没有跟上篇搭的智能体对接
✗ 界面细节还需要调整优化
别气馁，这一切都在计划之内。就像盖房子，地基打好了、框架立起来了，接下来就是往里面填砖、走水电、搞装修。
下一篇，我们来做第一步实质性工作——食材录入。
我会教你：怎么让录入页的表单真正能用，填完数据怎么保存到本地，怎么让首页和分析页的数据跟着变。一步步来，每篇解决一个具体问题，每篇都能看到明显的进展。
📌 系列文章进度
第1篇 ✅ 搭建AI智能体（食材成本计算助手）——已完成
第2篇 ✅ 用Codex搭出小程序骨架——就是这篇
第3篇 🔜 食材录入——让小程序真正能用起来
第4篇 🔜 对接智能体——让AI分析跑起来
第5篇 🔜 上线发布——让全店人都能用上
大飞
4年餐饮人 | 零代码基础 | 不懂代码但敢折腾
正在用7天时间，从零做出一个餐饮小程序
📖 下篇预告
食材录入：让小程序真正动起来
手把手教你改造录入页面，让填进去的数据真正保存下来，首页数据跟着自动更新。还会教你怎么在手机上预览，给店里的兄弟试用。
想跟着做但卡住了？
评论区留言，或者扫码进交流群，咱一起摸索 👇
本文由大飞原创，转载请注明出处
