零基础使用AI从0到1开发一个微信小程序

零基础使用AI从0到1开发一个微信小程序

准备

想多尝试一些新的交互方式,但我没有相关的开发经验,html,JavaScript 等都不了解,看了一些使用AI做微信小程序的视频教程,觉得自己也行了,于是有了如下尝试。我的目标是做一个个人日程管理的小程序。

名称 版本
微信开发者工具 稳定版 1.06.2412050
Visual Studio Code n.a.

操作记录

  1. 注册小程序账号:<mp.weixin.qq.com>。记住小程序信息下的账号信息AppID (其实测试的时候用测试AppID也可以,但会影响后续的代码上传和发布)。
  2. 明确开发目标,与LLM沟通让它帮我们生成代码框架和其中的具体内容。这里我用的是GPT-4o,先按它的生成内容在本地创建相关的文件夹和文件。
    我的文件结构如下,每个文件的具体信息可以在此处下载:
bash 复制代码
project-root/
├── app.js       // 小程序主逻辑
├── app.json     // 全局配置文件
├── app.wxss     // 全局样式文件
├── pages/
│   ├── index/   // 首页(日程表页面)
│   │   ├── index.js    // 逻辑文件
│   │   ├── index.json  // 页面配置
│   │   ├── index.wxml  // 页面结构
│   │   ├── index.wxss  // 页面样式
├── utils/       // 工具函数
├── cloud/       // 云函数目录 (可选,若使用云开发)
└── project.config.json // 项目配置文件
  1. 打开"微信开发者工具",填充相关信息,"目录"就是刚刚创建的文件夹地址,并填充第一步中记录的AppID。由于我的小程序没有使用数据库等,我也就"不使用云服务"了,也不需要选择什么模板。
  2. 测试:打开"模拟器",点击"编译"看效果,如有需要就本地修改代码,刷新代码,清楚缓存重新编译。看情况需要选择"真机调试"然后微信扫码测试(这时候都是只有开发者自己可以测试。)
  3. 效果呈现:这个小程序可以帮用户记录一天的日程安排。时间从 早上 8 点到晚上 11 点 ,每隔 15 分钟 有一个时间块,用户可以给每个时间块添加、查看或者修改内容,方便管理自己的时间。
  4. 如果需要发布的话,在小程序网页上<mp.weixin.qq.com> 填写相关信息,按提示提交材料,随后等待审核即可。

整个开发时间大约一个工作日。最初的愿望是宏大的,但和LLM,如Gpt-4o以及DeepSeek-R1多次沟通后,我发觉单纯依靠AI想实现更多交互功能是非常困难的,目前只能实现如下效果。此外,与LLM的沟通也很费时。

相关推荐
迪菲赫尔曼4 小时前
YAML2ModelGraph【v1.0】:一键生成 Ultralytics 模型结构图
人工智能·yolo·目标检测·yolov5·yolov8·yolo11·结构图
道19934 小时前
树莓派vsRK3588 对比及无人车集成方案(RTK / 激光雷达 / 云卓 H16)
人工智能
会挠头但不秃4 小时前
深度学习(5)循环神经网络
人工智能·rnn·深度学习
乐迪信息4 小时前
乐迪信息:AI摄像机识别煤矿出入井车辆数量异常检测
大数据·运维·人工智能·物联网·安全
_OP_CHEN4 小时前
用极狐 CodeRider-Kilo 开发俄罗斯方块:AI 辅助编程的沉浸式体验
人工智能·vscode·python·ai编程·ai编程插件·coderider-kilo
代码洲学长4 小时前
卷积神经网络CNN
人工智能·神经网络·cnn
l1t4 小时前
利用小米mimo为精确覆盖矩形问题C程序添加打乱函数求出更大的解
c语言·开发语言·javascript·人工智能·算法
weixin_398187754 小时前
YOLOv11 轻量级移动端网络ShuffleNetV2集成指南(详注)
人工智能·yolo
千寻技术帮4 小时前
10379_基于SSM的校园跑腿服务平台
mysql·微信小程序·校园跑腿·ssm
_Li.4 小时前
机器学习-贝叶斯公式
人工智能·机器学习·概率论