零基础用 AI 辅助开发微信小程序实录（一）：技术选型与环境搭建

一个会点代码但从未做过小程序的工程师，用 AI + uniapp 从 0 开始做一款「记物」小程序的全流程实录。本文是系列第 1 篇，主要讲技术选型思路和开发环境搭建。

一、项目背景

先交代下我的技术底子：会写代码（前端为主），但小程序一次都没做过。

之前一直觉得小程序开发挺复杂，一直拖着没动手。最近有个想法越来越强烈，决定试一下。

要做什么

一款「记物」小程序，核心功能：

• 记录生活物品信息（名称、分类、位置、过期时间、价格等）
• 临期提醒：日用品快过期了主动提醒
• 吃灰统计：买了但超过 N 天没用的东西，算个"吃灰率"
• 快速查找：搬家或整理时，能快速清点有什么、值多少钱

市面上的工具要么太重（进销存系统），要么太轻（备忘录），"个人物品管理"这个点上没有刚好合适的产品，那就自己做一个。

二、技术选型

2.1 框架：为什么选 uniapp

方案	优点	缺点	结论
微信原生	性能最好、能力最全	只能跑微信，学习成本高	❌ 怕一上来被劝退
uniapp	Vue 语法无缝衔接、一套代码多端	包体积略大、个别能力受限	✅ 新手友好
Taro	React 生态	我 React 不如 Vue 熟	❌ 不匹配我的技术栈

选 uniapp 的三个理由：

1. 上手成本低：有 Vue 基础几乎零学习成本，语法无缝衔接
2. 跨端能力：一套代码可编译到微信/支付宝/抖音等多个小程序平台，留有余地
3. 降低放弃率：第一次做小程序，最怕配环境、理解生命周期就耗掉一半热情。uniapp 封装了大量复杂度，让我聚焦业务逻辑

2.2 AI 辅助：副驾驶而非替代

这次的开发模式是 AI 辅助编程，但要先明确 AI 的边界。

AI 擅长的：

• 解释概念：比如"uniapp 生命周期和 Vue 的区别"
• 生成模板代码：比如"写一个物品列表页的结构"
• 排查报错：贴错误信息给它，比自己搜引擎快

AI 搞不定的：

• 业务逻辑设计：物品表该有哪些字段，得自己想
• 交互细节：按钮放哪、流程怎么走，得自己试
• 用户体验：顺不顺手，只有真人用了才知道

定位清楚了，才不会对 AI 产生不切实际的依赖。

三、环境搭建实录

3.1 准备清单

- HBuilderX（uniapp 官方 IDE）
- 微信开发者工具
- 微信小程序账号（个人主体，免费注册）

3.2 跑通 Hello World

整个流程比想象中顺：

# 大致流程
1. HBuilderX 新建 uniapp 项目（选默认模板）
2. 配置微信小程序 AppID（manifest.json）
3. 运行 → 运行到小程序模拟器 → 微信开发者工具
4. 微信开发者工具里点"预览"，手机扫码看真机效果

看到 Hello World 出现在手机上的那一刻，才算真正开始了。

3.3 原型设计

没用什么专业工具，纸笔画了三个页面：

• 首页：物品列表
• 添加页：表单录入
• 我的：设置页

丑是丑，但足够把"要做什么"想清楚了。先做减法，把 MVP（最小可行产品）范围框死，是第一天的关键动作。

四、一个认知转变

之前拖延的根源，是把"做小程序"想得太大了——觉得要学完所有东西、设计出完美架构、写出漂亮代码，才能开始。

跑通 Hello World 之后想明白一件事：先跑起来，比想明白更重要。

代码可以重构，功能可以迭代，但如果没有第一天的"冲了"，就永远停在"想"的阶段。

五、Day 2 计划

• 首页物品列表静态页面
• 本地存储（uni.setStorageSync）模拟数据，先不碰后端
• 完成物品的增、删、展示三个基本操作

后端、数据库、云同步都是后面的事。先让东西能跑，再让它跑得好。

六、总结

项目	内容
技术栈	uniapp + Vue + 微信开发者工具
开发模式	AI 辅助编程（副驾驶模式）
Day 1 成果	环境搭好、Hello World 跑通、原型画完
核心心得	先跑起来，比想明白更重要

本系列会持续更新整个开发过程，包括顺利的部分和踩坑的部分。下一篇讲首页列表页的开发实录。

---

如果你也在用 AI 辅助开发项目，或者对「记物」这个方向有想法，欢迎评论区交流。