不会写代码,也能做微信小程序?我用 Codex 跑通了完整流程
- 2026-09-26 05:00:14
不会写代码,也能做微信小程序?我用 Codex 跑通了完整流程以前想做一个微信小程序，第一反应通常都是： 我要先学编程。 JavaScript 要学。 WXML 要学。 WXSS 要学。 微信开发者工具也要研究。 如果还涉及服务器、数据库，门槛就更高了。 但 Coding Agent 出现以后，这件事情正在发生变化。 现在完全可以换一种思路： «你负责告诉 AI 想做什么、长什么样，Codex 负责把它变成代码。» 最近我研究了一套比较完整的流程： 想法 → Figma → Codex → 微信开发者工具 → 手机预览 → 发布 整个过程最有意思的地方是： 你不需要先成为程序员，才有资格开始做自己的产品。 --- 一、先看看整个流程 假设我们现在想做一个非常简单的微信小程序： 「一页」 这是一个阅读打卡工具。 功能并不复杂： 可以记录正在读的书； 可以记录每天读了多少； 可以查看阅读统计； 可以添加新的书籍。 如果按照传统方式开发，需要先设计页面，然后前端开发，再调试。 现在可以换成： Figma 负责设计 ↓ Codex 负责写代码 ↓ 微信开发者工具负责运行 ↓ 手机负责最终验证 ↓ 微信后台负责审核发布 整个思路其实非常清晰。 而且这里有一个很重要的变化： «我们正在从“自己写代码”，变成“管理 AI 帮我们完成产品”。» --- 二、第一步不要急着写代码 很多人第一次使用 Codex，最容易犯的错误就是： 一上来直接说： «帮我做一个微信小程序。» 当然也可以。 但结果很可能是： 能运行，但是不好看。 或者： 页面结构和你想象的完全不一样。 所以更好的方法是： «先确定产品长什么样，再写代码。» 这就是 Figma 的作用。 --- 三、Figma 是什么？ 如果之前没有接触过设计，可以把 Figma 简单理解成： «一个用来画 APP、网站、小程序界面的工具。» 设计师可以用它： 画页面； 调整颜色； 调整字号； 放按钮； 设计布局。 更重要的是： 它还可以制作一个可以点击的产品原型。 例如： 首页有一个： «「继续阅读」» 点击以后跳到： «「阅读记录」» 再点击： «「保存」» 返回首页。 即使一行代码都没有写，你也已经可以提前体验： 这个产品以后用起来是什么感觉。 --- 四、不会设计怎么办？让 Codex 先帮你出草图 这才是现在比较有意思的地方。 你甚至不一定需要会 Figma。 可以先把需求告诉 Codex。 比如： «我要做一个叫「一页」的阅读打卡小程序。 需要书架首页、阅读记录、阅读统计三个页面。 整体风格像一本安静的阅读手账。 奶油白背景，深蓝文字，浅绿色作为重点颜色。 首页突出正在阅读的书籍和记录入口。 先不要写程序，先给我设计页面。» 这样 Codex 可以先帮助完成第一版视觉方案。 你觉得不好看？ 继续告诉它： «标题小一点。» «留白增加。» «首页的书封再大一点。» «按钮统一使用深蓝色。» 不断调整。 直到你看到设计以后觉得： «对，我想要的就是这个。» 再进入下一步。 --- 五、为什么推荐先做设计，再让 AI 写代码？ 因为 AI 写代码其实很快。 真正困难的是： «你自己都不知道想要什么。» 如果需求一直变化： 今天觉得按钮应该放下面； 明天觉得应该放右边； 后天又决定首页结构全部重做。 那 Codex 就只能不断返工。 所以比较好的顺序是： 先确认视觉 ↓ 再确认交互 ↓ 最后实现代码 这个思路不仅适用于微信小程序。 以后做： 网站； APP； 管理系统； 个人工具； 基本都可以这么做。 --- 六、把设计稿放进 Figma 设计满意以后，可以把页面放到 Figma 里面继续调整。 比如建立三个画板： 01 - 书架首页 02 - 记录阅读 03 - 阅读统计 然后把它们横向摆在一起。 这个时候我们就能更加精确地调整： 字号； 间距； 按钮； 颜色； 图片； 页面尺寸。 还可以给按钮增加跳转。 例如： 点击「继续阅读」 ↓ 进入「记录阅读」 点击保存： ↓ 返回首页 这样即使代码还没有开始写，整个产品的基本使用流程已经出来了。 --- 七、接下来就是一个非常关键的东西：MCP 如果最近关注 AI Agent，应该经常看到： MCP。 很多人知道这个词，却不知道它到底能干什么。 这个案例其实特别容易理解。 我们已经在 Figma 里面做好了设计。 现在需要： «让 Codex 看懂这个设计。» 这时候就可以通过 Figma MCP，把设计信息提供给 Codex。 Codex 可以进一步读取： 页面结构； 字号； 颜色； 间距； 素材； 布局。 然后我们告诉它： «根据这个 Figma 设计稿，实现成微信原生小程序。» 这时候 MCP 的价值就非常直观了： «它相当于在 Figma 和 Codex 之间搭了一座桥。» --- 八、现在才真正开始写小程序 设计确定以后，就可以正式让 Codex 开工。 这里有一个非常重要的要求： 一定要明确告诉它： «我要的是微信原生小程序。» 技术栈使用： WXML WXSS JavaScript JSON 因为如果不说明目标环境，AI 有可能按照普通网页的方式实现。 我们的目标不是： «“给我一些小程序代码。”» 而应该是： «给我一个能够直接导入微信开发者工具运行的完整项目。» 这是两种完全不同的 Prompt 思路。 --- 九、不懂 WXML、WXSS 怎么办？ 这里可能也是很多非程序员最担心的问题。 Codex 最后生成了一堆： ".wxml" ".wxss" ".js" ".json" 完全看不懂怎么办？ 其实刚开始没必要全部看懂。 你只需要知道一个大概： WXML → 页面结构 WXSS → 页面长什么样 JavaScript → 点击以后发生什么 JSON → 页面和项目配置 就够了。 剩下的问题可以继续交给 Codex。 你的任务开始从： «“我怎么写这段代码？”» 转变成： «“这个功能是不是我想要的？”» --- 十、把项目扔进微信开发者工具 代码生成以后，下一步就是验证。 安装微信开发者工具。 选择： 导入项目 然后找到 Codex 生成的小程序目录。 等待编译。 如果一切正常，右侧模拟器里就会出现： 你刚才设计的小程序。 这一步其实非常有成就感。 因为前面还是： 一张设计图。 现在已经变成： 一个真正可以点击的小程序。 --- 十一、接下来不要看代码，先“玩”自己的产品 这个阶段最重要的事情不是研究代码。 而是像普通用户一样使用它。 例如： 点击继续阅读。 填写阅读记录。 点击保存。 查看统计。 添加一本新书。 然后重点检查三个问题： 页面有没有错位？ 按钮能不能正常工作？ 输入的数据能不能保存？ 如果这些都正常，再去考虑细节。 --- 十二、出 Bug 了怎么办？ 一定会出 Bug。 但现在处理 Bug 的方式也变了。 比如： 进入阅读记录页面以后，书封没有显示。 以前可能需要： 打开控制台； 看报错； 检查路径； 研究 JavaScript； 调试生命周期。 现在可以直接： 截图。 然后把截图交给 Codex。 告诉它： «我从首页进入记录页面以后，书封没有显示。 这是微信开发者工具的报错截图。 请检查图片路径和页面加载逻辑。 修复问题，但不要修改现在的页面布局。» Codex 检查代码以后修改。 重新编译。 再次验证。 整个过程变成： 发现问题 ↓ 截图 / 描述问题 ↓ Codex 修改 ↓ 重新运行 ↓ 确认结果 这就是非常典型的 Agent 工作方式。 --- 十三、这里有一个非常重要的能力：描述问题 很多人认为： AI 时代以后，编程能力不重要了。 这句话其实只说对了一半。 代码可能没有以前那么重要。 但是另外一种能力会变得越来越重要： «把问题描述清楚。» 比如不要只告诉 Codex： «不对。» 而应该告诉它： «我从首页点击「继续阅读」进入记录页以后，书封没有显示。 首页显示正常。 这是报错截图。 我希望修复图片问题，但保持现有布局不变。» 前者的信息量几乎为零。 后者已经给 Agent 提供了： 发生位置 操作步骤 实际结果 期望结果 修改边界 这会极大提高 AI 解决问题的效率。 --- 十四、电脑跑通以后，再上手机 开发者工具里面正常运行，并不意味着真正完成。 下一步： 手机预览。 通过微信开发者工具生成预览二维码。 然后用手机微信扫码。 这时候重点检查： 字体是不是太小； 按钮是不是不好点； 键盘弹出来以后有没有挡住输入框； 页面在真实手机上有没有错位； 底部导航是否正常。 因为： «模拟器正常 ≠ 真机正常。» 最终还是要在真实设备上验证。 --- 十五、最后一步：上传、审核、发布 如果手机预览也没有问题，就可以继续： 上传开发版本 ↓ 设置体验版 ↓ 邀请朋友测试 ↓ 提交微信审核 ↓ 审核通过 ↓ 正式发布 到了这里，一个真正可以被别人使用的微信小程序就完成了。 从最开始： «“我想做一个阅读打卡工具。”» 一直到： «“手机微信里真的可以打开。”» 整个链路就跑通了。 --- 十六、把整个流程再串一次 以后自己想做一个小程序，可以直接按照这个流程： 第一步：想清楚要解决什么问题 ↓ 第二步：让 AI 生成页面草图 ↓ 第三步：Figma 调整设计 ↓ 第四步：确认页面和交互 ↓ 第五步：通过设计稿 / MCP 交给 Codex ↓ 第六步：Codex 生成微信小程序 ↓ 第七步：微信开发者工具运行 ↓ 第八步：截图 + Codex 修 Bug ↓ 第九步：手机真机测试 ↓ 第十步：上传、审核、发布 以后想做： 记账工具； 健身打卡； 菜谱； 喝水提醒； 学习记录； 待办事项； 个人效率工具； 都可以沿着这个思路继续做。 --- 十七、真正变化的可能不是“人人都会编程” 以前我们经常听到一句话： «未来人人都会编程。» 但 Coding Agent 出现以后，我反而觉得未来可能不是这样。 更可能发生的是： «越来越多人不需要真正成为程序员，也能够创造软件。» 你需要知道： 我要解决什么问题。 产品应该长什么样。 用户怎么操作。 哪里不符合预期。 结果是不是正确。 至于： 这个按钮到底用什么代码实现； 这个数据怎么保存； 这个页面怎么跳转； 这些工作越来越可以交给 Agent。 --- 写在最后 Figma + Codex + 微信开发者工具这套流程，真正有意思的地方并不是： «AI 可以帮你写微信小程序了。» 而是软件开发正在发生一个更加深层的变化。 以前： 想法 → 学编程 → 写代码 → 调试 → 产品 中间存在一道非常高的技术门槛。 现在逐渐变成： 想法 → 设计 → Agent 实现 → 验证 → 产品 技术当然没有消失。 只是越来越多技术细节，被 Agent 接管了。 对于普通人来说，这意味着： 一个想法和一个真正能够运行的产品之间，距离正在变得越来越短。 所以，如果你一直有一个： «“我早就想做，但因为不会编程一直没有开始。”» 的小工具。 现在可能真的可以试试了。 不用先学半年编程。 先把第一版做出来。
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
