从零到一，手把手教你开发点餐微信小程序

小区门口那家快餐店，老板老周最近换了套点餐系统。顾客扫码、选菜、下单、付款，一气呵成。高峰期排队的人少了，老周也有空跟熟客多聊两句。他说这小程序花八千块找人做的，我听完笑了笑，其实这活儿自己干，成本也就一台电脑加几杯咖啡的事。

开发点餐小程序，真没你想的那么玄乎。微信官方给的工具叫「微信开发者工具」，下载安装，免费。注册个小程序账号，个人主体就行，认证费三十块，企业主体三百，差别在于能不能开通微信支付。你要是想收钱，得走企业认证，个人主体只能做展示用。这一步卡住了不少人，其实找个朋友的公司挂靠一下，或者自己花三百块注册个个体工商户，问题就解决了。

工具装好，账号搞定，打开开发者工具，新建项目，选「小程序」模板，填上你的AppID，点确定，一个能跑的空壳就出来了。这时候你看到的界面分三块：左边是模拟器，中间是代码区，右边是调试器。别被这阵仗吓住，你只需要动三个文件：app.json管全局配置，pages/index.wxml管页面结构，pages/index.wxss管样式。逻辑代码放在同目录的js文件里，就这么简单。

点餐小程序的核心，说白了就三件事：展示菜单、加入购物车、提交订单。先说展示菜单，你可以在wxml里用``标签循环渲染菜单数据。数据放哪？两种办法：一是写死在js文件的data里，适合菜品种类少、不常变的店；二是通过微信的云开发数据库存储，适合菜品多、要随时改价的店。我建议直接上云开发，免费额度够小餐馆用一年，省去自己买服务器的钱，也不用备案域名，微信都帮你搞定了。

云开发怎么用？打开开发者工具，点「云开发」按钮，开通环境，然后你就在控制台里建集合，比如叫「dishes」，往里面插入菜品记录，每条记录包含菜名、价格、图片链接、分类、销量这些字段。前端页面通过`.database()`调用，获取数据后渲染到界面上。代码就几行，`collection('dishes').get()`，拿到数据用`setData`更新页面，完事。

购物车这块，逻辑稍微绕一点。你得维护一个全局变量，比如叫`cartList`，用数组存用户选中的菜品，每个元素包含菜品id、数量、单价。点击「加号」按钮时，先判断购物车里有没有这个菜，有就把数量加一，没有就新增一条记录。这里有个小坑，微信小程序的`setData`是异步的，你改了`cartList`之后，要立刻计算总价，得在`setData`的回调里做，不然数据还没更新完，你拿到的还是旧值。

提交订单，这是收钱的关键一步。云开发里有现成的「云函数」功能，你写一个叫`createOrder`的云函数，前端把购物车数据传给这个函数，函数负责把订单写入数据库，然后调用微信支付的接口生成支付参数，返回给前端，前端用`wx.requestPayment`拉起支付面板。整个流程微信官方文档写得非常详细，照着抄就行。唯一要注意的是，云函数里要配置好你的商户号，也就是mchid和API密钥，这些在你申请微信支付的时候会拿到，千万别泄露给任何人。

界面设计这块，别花太多心思搞花活。微信官方有个组件库叫「WeUI」，小程序里直接引用，按钮、列表、弹窗都是现成的，风格统一，看着干净。你要做的就是搭积木：顶部放店铺名称和公告，中间是菜品分类的横向滚动栏，下面是菜品列表，每个菜品左边是图片和名称，右边是价格和加减按钮，底部固定一个购物车栏，显示总价和「去结算」按钮。这套布局，用Flex布局加`position: fixed`就能搞定，代码量不超过两百行。

测试环节别偷懒。微信开发者工具里有个「真机调试」按钮，拿自己的手机扫码，在真实环境里点一遍：加菜、减菜、清空购物车、提交订单、支付、退款，每一步都走一遍。特别要注意网络切换的场景，比如从WiFi切到4G，菜单还能不能正常加载。我见过不少小程序，开发工具里跑得好好的，一上真机就白屏，多半是图片链接用了本地路径，真机上访问不了，记得所有图片都换成云存储的链接。

发布上线，比你想象的快。在开发者工具里点「上传」，填个版本号和备注，然后在微信公众平台的后台提交审核。审核一般一两天，工作日快的话几个小时就过。审核通过后，点「发布」，你的点餐小程序就正式上线了。用户怎么找到你？把小程序码打印出来贴在餐桌上，或者做成台卡，扫码即用，不用下载不用关注，这是小程序最大的优势。

老周那八千块花得冤不冤？其实不冤，他省了时间。但你要是愿意花个周末，跟着官方文档一步步来，从零到一做出自己的点餐小程序，那种成就感绝对比省下的钱更值。开发过程中遇到报错，先复制错误信息去搜索引擎搜，八成能搜到答案；搜不到就加几个小程序开发的微信群，里面都是热心人。技术这东西，动手试错比看十篇教程都管用。你的第一家店，就从扫码点餐开始吧。