亲测有效!前端小白的我0.5天内用Cursor开发出微信小程序

突发奇想

有过小孩的都知道,4、5岁正是他最喜欢问为什么的年纪?脑子里对任何事情都好奇,都想问个明白。可是这就要求我们家长要当一个移动的百科全书,这对我来说可太难了,于是灵感一动要是有这么一个软件,能够在我不认识某些事物时能够照相机拍一拍就出来百科结果就太好了。

市面上找了一圈,确实有很多这种软件,但是有的要么收费、要么识别植物、要么还要下载软件。这可太麻烦了,身为程序员的我想这有什么难得,我自己开发一个。

可是我是后端开发工程师,对于前端可不擅长。不过现在是AI时代,什么事情是AI做不了的呢。

说干就干,首先打开Cursor,同时打开微信开发中工具(因为要预览效果)

目标有了,直接告诉Cursor让它帮我实现。需求如下:

# 需求介绍
帮我新建一个用typescript写的微信小程序,主要功能是通过拍照来识别图片中的物体,包括植物、动物、昆虫、矿物等。
需求如下:
1. 程序的首页是一个拍照按钮,点击后可以调出相机拍照,并调用后台API来识别图片中的物体。按钮的下方也有一个从相册中选择图片的小按钮。 
2. 识别过程中有一个中间页面,用于等待后台接口结果返回,内容是一个图片预览窗口,有富有科技感的逐帧扫描的动画效果
3. 如果识别成功后,显示识别结果,识别结果中包含植物的名称、描述、科属、图片链接等信息。
4. 如果后台接口返回识别失败或者超时,跳转到一个识别失败页,友好地提示可重试或者返回首页

它视乎听懂了我的需求,不过可能由于Cursor是外国人训练的,对国内微信小程序的开发目录结构可能认识不够,生成的目录结构貌似有点问题,如下所示:

image-20241108173140040

没关系,Cursor不知道我就告诉它,可是我好像也不知道,毕竟我是小白,那腾讯自家的元宝肯定知道

image-20241108170725270

目录结构有了,我们优化下我们的需求,重来一下

# 需求介绍
帮我新建一个用typescript写的微信小程序,主要功能是通过拍照来识别图片中的物体,包括植物、动物、昆虫、矿物等。
需求如下:
1. 程序的首页是一个拍照按钮,点击后可以调出相机拍照,并调用后台API来识别图片中的物体。按钮的下方也有一个从相册中选择图片的小按钮。 
2. 识别过程中有一个中间页面,用于等待后台接口结果返回,内容是一个图片预览窗口,有富有科技感的逐帧扫描的动画效果
3. 如果识别成功后,显示识别结果,识别结果中包含植物的名称、描述、科属、图片链接等信息。
4. 如果后台接口返回识别失败或者超时,跳转到一个识别失败页,友好地提示可重试或者返回首页

# 技术栈
1. typescript
2. 微信小程序
3. 百度AI

# 项目结构
```
docs/                     # 文档目录,样例图片等
miniprogram/
├── app.json              # 小程序公共设置
├── app.wxss              # 小程序公共样式表
├── app.ts                # 小程序逻辑层入口文件(TypeScript版本)
├── pages/                # 页面文件夹
│   ├── index/            # 首页
│   │   ├── index.json    # 页面配置文件
│   │   ├── index.wxml    # 页面结构层文件
│   │   └── index.wxss    # 页面样式表文件
│   │   └── index.ts      # 页面逻辑层文件(TypeScript版本)
│   ├── logs/              # 日志页面
│   │   ├── logs.json     # 页面配置文件
│   │   ├── logs.wxml     # 页面结构层文件
│   │   └── logs.wxss     # 页面样式表文件
│   │   └── logs.ts       # 页面逻辑层文件(TypeScript版本)
│   └── ...                # 其他页面
├── utils/                 # 工具函数文件夹
│   ├── util.ts           # 工具函数(TypeScript版本)
│   └── ...                # 其他工具函数
├── components/            # 自定义组件文件夹
│   ├── my-component/      # 自定义组件
│   │   ├── my-component.json
│   │   ├── my-component.wxml
│   │   ├── my-component.ts # 自定义组件逻辑层文件(TypeScript版本)
│   │   └── my-component.wxss # 自定义组件样式表文件
│   └── ...                # 其他自定义组件
├── typings/                 # 类型定义文件夹
│   ├── index.d.ts         # 全局类型定义
│   └── types                # 其他类型定义
├── project.config.json    # 项目配置文件
├── tsconfig.json          # TypeScript配置文件
└── package.json           # 项目依赖和脚本配置
```

# 需求介绍
这是一个用typescript写的微信小程序,主要功能是通过拍照来识别图片中的物体,包括植物、动物、昆虫、矿物等。
需求如下:
1. 程序的首页是一个拍照按钮,点击后可以调出相机拍照,并调用百度AI的API来识别图片中的物体。按钮的下方也有一个从相册中选择图片的小按钮。参考图片 @1.PNG 
2. 识别成功后,显示识别结果,参考图片 @2.PNG,这是对“绿萝”植物的识别结果,识别结果中包含植物的名称、描述、科属、图片链接等信息。有点击查看详情的按钮。
3. 点击查看详情按钮后,跳转到一个新的页面,显示植物的详细信息,参考图片 @3.PNG,包括植物的名称、描述、科属、图片、与之相关的诗、趣事、寓意、传说等。数据内容可以来源于百科。
4. 点击返回按钮后,返回到首页。

第一步:小程序的目录结构长什么样呢?找到腾讯自家的元宝,它自家的东西它肯定最清除

image-20241108170725270

第二步:有了目录结构的介绍,加上我的需求描述,这下Cursor应该能知道我要干嘛了

# 需求介绍
这是一个用typescript写的微信小程序,主要功能是通过拍照来识别图片中的物体,包括植物、动物、昆虫、矿物等。
需求如下:
1. 程序的首页是一个拍照按钮,点击后可以调出相机拍照,并调用百度AI的API来识别图片中的物体。按钮的下方也有一个从相册中选择图片的小按钮。参考图片 @1.PNG 
2. 识别成功后,显示识别结果,参考图片 @2.PNG,这是对“绿萝”植物的识别结果,识别结果中包含植物的名称、描述、科属、图片链接等信息。有点击查看详情的按钮。
3. 点击查看详情按钮后,跳转到一个新的页面,显示植物的详细信息,参考图片 @3.PNG,包括植物的名称、描述、科属、图片、与之相关的诗、趣事、寓意、传说等。数据内容可以来源于百科。
4. 点击返回按钮后,返回到首页。

# 技术栈
1. typescript
2. 微信小程序
3. 百度AI

# 项目结构
```
docs/                     # 文档目录,样例图片等
miniprogram/
├── app.json              # 小程序公共设置
├── app.wxss              # 小程序公共样式表
├── app.ts                # 小程序逻辑层入口文件(TypeScript版本)
├── pages/                # 页面文件夹
│   ├── index/            # 首页
│   │   ├── index.json    # 页面配置文件
│   │   ├── index.wxml    # 页面结构层文件
│   │   └── index.wxss    # 页面样式表文件
│   │   └── index.ts      # 页面逻辑层文件(TypeScript版本)
│   ├── logs/              # 日志页面
│   │   ├── logs.json     # 页面配置文件
│   │   ├── logs.wxml     # 页面结构层文件
│   │   └── logs.wxss     # 页面样式表文件
│   │   └── logs.ts       # 页面逻辑层文件(TypeScript版本)
│   └── ...                # 其他页面
├── utils/                 # 工具函数文件夹
│   ├── util.ts           # 工具函数(TypeScript版本)
│   └── ...                # 其他工具函数
├── components/            # 自定义组件文件夹
│   ├── my-component/      # 自定义组件
│   │   ├── my-component.json
│   │   ├── my-component.wxml
│   │   ├── my-component.ts # 自定义组件逻辑层文件(TypeScript版本)
│   │   └── my-component.wxss # 自定义组件样式表文件
│   └── ...                # 其他自定义组件
├── typings/                 # 类型定义文件夹
│   ├── index.d.ts         # 全局类型定义
│   └── types                # 其他类型定义
├── project.config.json    # 项目配置文件
├── tsconfig.json          # TypeScript配置文件
└── package.json           # 项目依赖和脚本配置
```

找到aliyun的百炼大模型平台,里面有个多模态视觉模型,正合我意

于是找到官网

image-20241108165745146


 上一篇
利用Cursor开发智能剪辑工具 利用Cursor开发智能剪辑工具
想法 作为一个主要工作语言为Java的软件工程师,如果要实现一个前后端全栈的一个应用是个不小的挑战,不仅要知道前端前端开发技术栈,例如Vue 3、TypeScript、Vite,css,你还得知道一些想实现的样式和效果该如何实现,用什么实
2024-11-20
下一篇 
OpenAI推出O1模型:引领AI模型新时代的力量 OpenAI推出O1模型:引领AI模型新时代的力量
ModelBridge(魔桥) - 国内免费的OpenAI api代理,无需魔法免费使用, 支持国内外主流大模型,免费使用。
2024-09-29
  目录