news 2026/6/9 21:36:32

48 小时做完并提审:待办事项微信小程序实战(VS Code + Codex 插件)

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
48 小时做完并提审:待办事项微信小程序实战(VS Code + Codex 插件)

48 小时做完并提审:待办事项微信小程序实战(VS Code + Codex 插件)

很多人用 AI 做小程序,卡在最后一步:提审。

不是因为代码写不出来。
是因为流程顺序错了。

这篇给你一套可执行的路径:
先把“能上架”设计出来,再用 AI 快速实现。

你能直接拿走什么

  • 一条从 0 到提审的倒排流程
  • 3 段可直接复制的 Figma 页面提示词
  • 1 段可直接复制的 Codex 项目级提示词
  • 1 份上线前检查清单

技术栈固定:微信开发者工具 + VS Code + Codex 插件

先记住一句话

先做审核一致性。
再做开发效率。

顺序反过来,返工概率会很高。

第 1 步:5 分钟确定项目边界

在写代码前,先定 4 件事:

  • 主体:个人或企业
  • 定位:任务管理工具,不碰社区/交易/资讯
  • 数据:只存任务字段,不采集不必要信息
  • 功能:新增、编辑、完成、筛选、搜索

这一步做对,后面 Codex 的输出会稳定很多。

第 2 步:名称、类目、备案一起推进

平台入口:https://mp.weixin.qq.com

建议顺序:

  1. 创建小程序
  2. 先定名称候选
  3. 确认类目与功能一致
  4. 尽早发起备案

为什么强调这一步?
因为多数延期,不是卡在编码,而是卡在“名称/类目/描述不一致”。

第 3 步:先出原型,再让 AI 写代码

Figma 链接:https://www.figma.com/

先把页面骨架定清楚,再进入编码。
待办事项小程序首版建议 4 个页面:

  • 首页(任务列表)
  • 新建任务页
  • 任务详情/编辑页
  • 已完成任务页

首页提示词(待办事项版)

设计微信小程序“待办事项”首页 UI,整体简洁、轻量、偏工具型,主色绿色。 页面结构: - 顶部:日期 + 标题“我的待办” - 中部:任务列表(未完成/已完成状态) - 列表项:任务标题、截止时间、优先级标签(高/中/低) - 顶部筛选:全部/今日/逾期 - 右下角浮动按钮:+ 新建任务 要求:浅色背景、扁平图标、无登录页、无营销元素,符合微信小程序规范。

新建任务页提示词

设计微信小程序“新建任务”页面 UI。 页面结构:顶部导航栏(返回 + 新建任务)+ 表单区 + 底部固定按钮。 表单字段:任务标题(必填)、任务说明、截止日期、优先级(高/中/低)、提醒开关。 交互要求: - 标题为空时禁止提交并提示 - 日期选择符合微信原生组件习惯 - 页面信息层级清晰,保持工具化风格

任务详情/编辑页提示词

设计微信小程序“任务详情/编辑”页面 UI。 结构:顶部导航栏 + 详情区 + 操作区。 详情区字段:标题、说明、截止时间、优先级、创建时间。 操作区:保存修改、标记完成、删除任务。 要求:删除操作必须二次确认;主次按钮层级明确;视觉风格与首页统一。

第 4 步:VS Code + Codex 插件的正确用法

不要一次性让 Codex 生成全项目。
要按“页面块”分批实现。

推荐节奏:

  1. 在微信开发者工具创建基础模板
  2. VS Code 打开项目目录
  3. 给 Codex 一段项目级约束
  4. 逐页实现,逐页编译,逐页真机验证

第 5 步:给 Codex 的首段提示词(可直接复制)

你是资深微信小程序工程师,熟悉原生小程序生命周期、性能约束和审核规范。 当前项目为“待办事项工具类小程序”,仅使用微信小程序原生能力,不引入 Vue/React 和多余依赖。 请在现有目录中做最小改动,输出可直接运行的代码。 优先实现:任务新增、编辑、完成、删除、按状态筛选、按截止时间展示。 回答格式:先列变更文件,再给代码;不讲基础概念。

第 6 步:首版功能尽量“够用就好”

为了先通过提审,建议第一版控制在最小集合:

  • 本地存储:wx.setStorageSync/wx.getStorageSync
  • 状态:todo/done/overdue
  • 优先级:high/medium/low

示例数据结构:

{"id":"todo_1739050000000","title":"提交周报","description":"补充本周完成项与风险项","status":"todo","priority":"high","dueDate":"2026-02-12","createdAt":"2026-02-09T10:00:00+08:00","updatedAt":"2026-02-09T10:00:00+08:00"}

第 7 步:调试闭环要固定

每一轮都走同一条链路:

  1. Codex 改代码
  2. 微信开发者工具编译
  3. 真机跑通“新增 → 编辑 → 完成 → 筛选”
  4. 只回传一个问题类型给 Codex

不要一轮里同时改布局、逻辑、数据模型。
这是最常见的回归来源。

上线前检查清单(直接照着过一遍)

  • 名称、类目、功能描述是否一致
  • 首页是否清晰展示任务状态
  • 新建任务是否有必填校验
  • 删除是否有二次确认
  • 是否存在与工具定位无关入口
  • 是否采集了非必要信息
  • 体验版是否完成真机全流程验证
  • 提交材料与版本说明是否可核验

常见时间预算(供参考)

  • UI 原型:0.5 天
  • Codex 协同开发:1 天
  • 联调与提审准备:0.5 天
  • 备案与审核:按平台周期浮动

结尾

AI 的价值不在“替你开发”。
在于让你把正确流程执行得更快。

对待办事项这类工具小程序,最稳的方法就是:
前置边界,缩小首版,快速提审,迭代升级。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/9 21:06:41

一文讲透|AI论文软件 千笔写作工具 VS 灵感风暴AI,本科生必备神器!

随着人工智能技术的迅猛迭代与普及,AI辅助写作工具已逐步渗透到高校学术写作场景中,成为本科生完成毕业论文不可或缺的辅助手段。越来越多面临毕业论文压力的学生,开始依赖各类AI工具简化写作流程、提升创作效率。但与此同时,市场…

作者头像 李华
网站建设 2026/6/5 4:52:05

大模型落地全攻略:从技术实践到商业价值创造

大模型技术正从实验室快速走向产业应用,成为企业数字化转型的核心驱动力。据IDC预测,到2026年,60%的企业将把大模型技术嵌入核心业务流程,实现运营效率提升30%以上。本文系统梳理大模型落地的四大关键路径——微调技术、提示词工程…

作者头像 李华
网站建设 2026/6/9 18:34:25

项目分享|Wan2.2:开源且进阶的大规模视频生成模型

引言 随着AIGC技术的快速发展,视频生成成为多模态生成领域的核心方向之一。但现有模型往往面临生成效率低、画质差、运动表现力不足等问题,难以兼顾工业级应用的效率与学术研究的可扩展性。Wan2.2的推出,正是为了解决这些痛点——它以创新的…

作者头像 李华
网站建设 2026/6/9 21:29:21

探索基于LCL的APF双闭环控制:卓越谐波治理之路

基于LCL的APF双闭环控制,电流环采用重复控制PI,电压环采用PI,THD值在3%以下,电压在700V。 只是一种控制方法一种谐波检测算法在电力系统的谐波治理领域,基于LCL的有源电力滤波器(APF)双闭环控制…

作者头像 李华