零基础使用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的沟通也很费时。

相关推荐
机器人猎头David1 分钟前
VLA、世界模型、强化学习,在机器人里分别解决什么问题?
人工智能·机器人·机器人猎头·机器人猎头公司
dianziyao_2 分钟前
第 4.1 篇:让 Codex 理解你的双链——AI 辅助发现笔记间的关联
人工智能·笔记
围炉聊科技3 分钟前
网站把自己变成 MCP server:OpenAI 第一个用上 WebMCP
人工智能
葡萄城技术团队12 分钟前
一句话生成数据透视表?SpreadJS AI 如何把分析需求变成行、列和值
人工智能
米小虾14 分钟前
给 AI 生成的内容发一张身份证:C2PA 到底能证明什么,又证明不了什么
人工智能
芯片人00719 分钟前
纯硬件一键开关机ASIC芯片,为什么比 MCU 方案更适合更可靠
人工智能·单片机·嵌入式硬件·物联网·芯片
北岛贰40 分钟前
迷茫焦虑期,我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
冬奇Lab40 分钟前
一天一个开源项目(第212篇):OpenMAIC —— 清华出品的多智能体交互式课堂
人工智能·开源·资讯
乐迪信息42 分钟前
如何通过AI防爆摄像机精准判断船舶超速?
大数据·人工智能·算法·安全·目标跟踪
leoZ2311 小时前
第 1 篇:为什么不该再让 AI 画页面
人工智能·神经网络·机器学习·自然语言处理·cnn·word2vec·mllib