前两篇文章发完后，好多餐饮同行私信我，说跟着做已经把小程序的架子搭起来了，看着自己的小程序跑起来，真的很有成就感。但也有不少朋友问了同一个问题：
"飞哥，我输入的数据为什么关掉页面就没了？"
对，这就是我们今天要解决的核心问题。前两篇我们搞定了 AI 智能体和小程序前端骨架，但数据都是"假的"——写在代码里、存在内存里，就像写在黑板上的字，刷新一下就没了。
这篇文章，我带大家接入微信自带的云数据库，让你输入的食材数据能真正存进去、下次打开还在。全程不用懂 SQL，不用买服务器，照着点、复制粘贴就行。
💡 先看这篇你需要准备什么：已完成前两篇，微信开发者工具能用，小程序前端骨架跑起来了。如果还没，回去补一下前两篇，5分钟就能跟上。
01
为什么要接入数据库？
先讲个大白话。你现在小程序里的数据，存在哪里呢？存在"内存"里。什么是内存？就是你打开小程序的时候，系统临时给你一块地方放数据，就像你饭店里那块记事白板。
客人点了菜，你写在白板上；客人走了，你擦掉写下一桌。小程序也是一样，你输入的食材数据，关掉页面、刷新一下，数据就没了——因为"白板"被擦掉了。
那数据库是什么呢？数据库就是你后厨的冰箱+仓库。买了菜放进去，关了门它也在那儿，下次打开冰箱，东西还在。想拿什么拿什么，想用多少用多少。
🧠 餐饮人理解版
· 小程序前端 = 你的店面，客人看得见、摸得着
· 内存（当前数据） = 前台的白板，用完擦掉
· 云数据库 = 后厨仓库，东西放进去，下次还在
· 云开发 = 给你配仓库+送货员，不用自己建
好消息是，微信小程序自带了一个叫"云开发"的功能，里面就包含了数据库。不用你自己买服务器、不用装数据库软件、不用懂运维，点几下开通就能用，个人开发者还免费。
对餐饮人来说，这就相当于微信免费给你开了个仓库，还配了管理员，你只管进货出货就行，别的啥都不用管。
📷 云开发控制台界面
02
开通云开发，创建数据库
第一步，开通云开发。打开你的微信开发者工具，找到顶部工具栏里那个「云开发」按钮，点一下。
1 点击「云开发」按钮，弹出开通面板
2 点「开通」，给环境起个名字（比如"餐饮毛利小程序"）
3 选择基础版（免费的，个人开发者完全够用）
4 等待十几秒，云开发环境就开通好了
开通之后，你会进入云开发控制台。左边一排菜单，找到「数据库」，点进去。这里就是我们存放数据的地方。
接下来我们要创建一个"集合"。集合是什么呢？你可以理解成仓库里的一个货架，专门放某一类东西。我们要放食材数据，就建一个叫 foods 或者"食材"的集合。
⚠️ 注意一下
集合名字建议用英文，比如 foods，后面写代码的时候不容易出错。当然写中文"食材"也能用，看你习惯。
建好集合之后，还需要设置一下权限。点击集合名称，右边会出现"权限设置"，选择"所有用户可读，仅创建者可读写"。这个意思是，谁都能看食材数据，但只有录入的人才能修改和删除——符合我们这个小程序的使用场景。
📷 新建集合界面
到这里，数据库就准备好了。你可以把它想象成一个空的货架，接下来我们要做一个"送货员"——也就是小程序的食材录入页面，让用户输入的数据能自动送到这个货架上。
03
让 Codex 帮你写录入页面代码
数据库建好了，接下来要写代码来连接它。别担心，不用你写，还是老办法——把需求告诉 Codex，让 AI 帮你写。
打开 Codex（或者你用的其他 AI 编程助手），把下面这段话直接复制粘贴过去。这是我反复测试过的提示词，生成的代码拿来就能用。
📷 Codex 对话界面
📋 直接复制下面这段提示词：
我正在开发一个餐饮毛利计算小程序，用的是微信小程序+云开发。 数据库有一个 foods 集合，存食材信息，字段包括：食材名称、单价、规格、单位、分类。 请帮我写一个食材录入页面，包含以下功能： 1. 表单区域：食材名称输入框、单价输入框（数字）、规格输入框、单位选择器（下拉选择：斤/个/袋/瓶）、分类选择器（下拉选择：蔬菜/肉类/调料/其他） 2. 一个"保存食材"按钮，点击后校验输入不为空，然后把数据存入云数据库的 foods 集合 3. 保存成功后弹出提示，并清空输入框 4. 页面底部显示已录入的食材列表，从云数据库查询并展示，显示名称、单价、单位、分类 5. 列表项左滑可以删除（可选，如果复杂就先不加） 请给出完整的页面代码，包括四个文件： - food-add.wxml（页面结构） - food-add.wxss（页面样式） - food-add.js（页面逻辑） - food-add.json（页面配置） 以及 app.json 里需要添加的路由配置（pages 数组里加一行）。 代码中云数据库集合名用 foods，字段名用中文也可以，但最好用英文（name, price, spec, unit, category）。 注释写清楚一点，我是零基础，怕看不懂。
💡 小技巧：提示词写得越详细，AI 生成的代码越靠谱。我这段已经帮你把字段、功能、输出格式都写清楚了，你直接复制过去就行。如果 AI 生成的代码有问题，就把报错信息再发回去让它改。
等个十几秒，Codex 就会给你生成四个文件的完整代码。它会一段一段地给你标出来哪个是 wxml、哪个是 wxss、哪个是 js、哪个是 json。你先不用管代码什么意思，我们下一步就把它们放进去。
04
把代码放进去，测试一下
这一步稍微有点细，但跟着做没问题。我们分三步走：建页面文件、初始化云开发、测试验证。
第一步：新建页面文件
在微信开发者工具左边的文件目录里，找到 pages 文件夹，右键点击它，选"新建文件夹"，起名叫 food-add。
然后在 food-add 文件夹上右键，选择"新建 Page"，输入 food-add，回车。工具会自动帮你建好四个文件（wxml/wxss/js/json）。
接下来，把 Codex 生成的代码，分别复制粘贴到对应的文件里。wxml 的代码粘到 wxml 文件，wxss 粘到 wxss，js 粘到 js，json 粘到 json。一个字都别错。
第二步：初始化云开发环境
这一步很重要，不然小程序不知道连哪个数据库。找到根目录下的 app.js 文件，打开它，在 App({ 里面的 onLaunch 函数里，加上这段初始化代码：
App({ onLaunch: function () { // 初始化云开发 if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力') } else { wx.cloud.init({ // 这里替换成你自己的云开发环境ID env: 'your-env-id', traceUser: true, }) } } })
⚠️ 环境 ID 怎么找？
打开云开发控制台，左上角或者"设置"里能看到一串英文+数字的字符串，那就是环境 ID。复制下来，替换掉上面代码里的 your-env-id。
然后，别忘了在 app.json 的 pages 数组里加上新页面的路径：
"pages": [ "pages/index/index", "pages/food-add/food-add" ],
第三步：编译运行，测试录入
保存所有文件，点击开发者工具顶部的"编译"按钮。模拟器里应该能看到你的小程序了。如果首页有跳转到食材录入的按钮，点进去；没有的话，在顶部的页面选择器里直接选 food-add 页面。
试着录入一条食材数据，比如：
食材名称：土豆
单价：2.5
规格：500g
单位：斤
分类：蔬菜
点"保存食材"，如果弹出"保存成功"的提示，而且页面底部的列表里多出了刚才输入的土豆，那就说明录入功能跑通了！
但先别急着高兴，我们还得验证一下数据是不是真的存到数据库里了。回到云开发控制台，点开"数据库"，找到 foods 集合，看看里面是不是多了一条数据。
📷 小程序录入界面
如果数据库里也有这条数据，那么恭喜你！你已经完成了小程序开发中最重要的一步——前后端打通。现在你的小程序不再是个"空壳子"，而是真的能存数据了。
📷 食材列表完整效果
05
录入功能成了，但还有问题
好了，到这里食材录入功能基本完成了。我们来盘点一下今天的成果：
✓ 开通了微信云开发环境，有了自己的数据库
✓ 建好了 foods 集合，食材数据有地方放了
✓ 食材录入页面做好了，输入数据能存进去
✓ 关掉小程序再打开，数据还在——它真的"记住"了
但是，咱也不能高兴太早。如果你真的拿去用，会发现还有不少问题：
这些问题我们后面一篇一篇来解决。别着急，路要一步一步走，饭要一口一口吃。能把数据存进去，已经是从零到一的大突破了。
🤔 留个思考题
光有食材的进价，能不能算出毛利？ 显然不能。毛利 = 营业额 - 成本。 成本我们已经能存了（食材进价），那营业额呢？ 你每天的流水数据从哪儿来？怎么记到小程序里？ ——下一篇我们就来搞定这个。
下一篇，我们做营业额录入功能。不仅要能手动记每天的流水，后面还要想办法自动对接收银系统，让数据自己跑进来。
下一篇预告
营业额录入——教你记每天的流水
手动录入 + 后续自动对接收银系统
👨🍳大飞
4年餐饮人，开过两家店，踩过无数坑
不懂代码但敢折腾，用 AI 工具从零做起
相信技术能帮餐饮人省时间、多赚钱
📱 小程序卡片占位符
💬 跟着做但卡住了？
评论区留言，或扫码进交流群
大飞和一群餐饮同行一起帮你解答
— END —
