零基础使用AI从０到１开发一个微信小程序
零基础使用AI从０到１开发一个微信小程序
- 准备
- 操作记录
准备
想多尝试一些新的交互方式，但我没有相关的开发经验，html，JavaScript 等都不了解，看了一些使用AI做微信小程序的视频教程，觉得自己也行了，于是有了如下尝试。我的目标是做一个个人日程管理的小程序。
| 名称 | 版本 |
|---|---|
| 微信开发者工具 | 稳定版 1.06.2412050 |
| Visual Studio Code | n.a. |
操作记录
- 注册小程序账号：mp.weixin.qq.com。记住
小程序信息下的账号信息的AppID(其实测试的时候用测试AppID也可以，但会影响后续的代码上传和发布)。 - 明确开发目标，与LLM沟通让它帮我们生成代码框架和其中的具体内容。这里我用的是GPT-4o，先按它的生成内容在本地创建相关的文件夹和文件。
我的文件结构如下，每个文件的具体信息可以在此处下载：
project-root/
├── app.js // 小程序主逻辑
├── app.json // 全局配置文件
├── app.wxss // 全局样式文件
├── pages/
│ ├── index/ // 首页(日程表页面)
│ │ ├── index.js // 逻辑文件
│ │ ├── index.json // 页面配置
│ │ ├── index.wxml // 页面结构
│ │ ├── index.wxss // 页面样式
├── utils/ // 工具函数
├── cloud/ // 云函数目录 (可选，若使用云开发)
└── project.config.json // 项目配置文件
- 打开“微信开发者工具”，填充相关信息，“目录”就是刚刚创建的文件夹地址，并填充第一步中记录的
AppID。由于我的小程序没有使用数据库等，我也就”不使用云服务“了，也不需要选择什么模板。
- 测试：打开“模拟器”，点击“编译”看效果，如有需要就本地修改代码，刷新代码，清楚缓存重新编译。看情况需要选择“真机调试”然后微信扫码测试（这时候都是只有开发者自己可以测试。）
- 效果呈现：这个小程序可以帮用户记录一天的日程安排。时间从 早上 8 点到晚上 11 点，每隔 15 分钟有一个时间块，用户可以给每个时间块添加、查看或者修改内容，方便管理自己的时间。
- 如果需要发布的话，在小程序网页上mp.weixin.qq.com 填写相关信息，按提示提交材料，随后等待审核即可。
整个开发时间大约一个工作日。最初的愿望是宏大的，但和LLM，如Gpt-4o以及DeepSeek-R1多次沟通后，我发觉单纯依靠AI想实现更多交互功能是非常困难的，目前只能实现如下效果。此外，与LLM的沟通也很费时。