记录小白使用 Cursor 开发第一个微信小程序(二):创建项目、编译、预览、发布(250308)

文章目录

  • [记录小白使用 Cursor 开发第一个微信小程序(二):创建项目、编译、预览、发布(250308)](#记录小白使用 Cursor 开发第一个微信小程序(二):创建项目、编译、预览、发布(250308))
    • 一、创建项目
      • [1.1 生成提示词](#1.1 生成提示词)
      • [1.2 生成代码](#1.2 生成代码)
    • 二、编译预览
      • [2.1 导入项目](#2.1 导入项目)
      • [2.2 编译预览](#2.2 编译预览)
    • 三、发布
      • [3.1 在微信开发者工具进行上传](#3.1 在微信开发者工具进行上传)
      • [3.2 管理平台的版本管理](#3.2 管理平台的版本管理)
      • [3.3 手机扫描二维码](#3.3 手机扫描二维码)
    • 四、总结

记录小白使用 Cursor 开发第一个微信小程序(二):创建项目、编译、预览、发布(250308)


一、创建项目

复制代码
(1) Cursor 使用 0.46.8 版本
(2) 随便买一个一天的会员(使用普通账号的话,Sonnet 3.7 经常卡)试水

1.1 生成提示词

(1) 第一个版本的提示词

text 复制代码
# 微信小程序需求

## 项目概述
构建一个微信小程序,用于记录工作打卡时间和查看历史记录。

## 功能页面

### 第一个界面:打卡页面
- 记录上班时间以及下班时间
- 显示目标工作时长为10.2个小时
- 显示本月历史打卡记录的平均工作时长
- 提供跳转到历史记录页面的功能

### 第二个界面:历史记录页面
- 以日历形式呈现历史打卡记录
- 显示本月的平均工作时长
- 点击任意日期可显示所选日期的上下班时间
- 支持对历史的上下班时间进行修改
- 修改完上下班时间后,本月的平均工作时长需重新计算并自动更新

## 技术要求
- 所有数据保留在本地,不需要调用任何API接口

(2) 第二个版本的提示词:使用 cursor 对第一个版本进行完善

text 复制代码
# 微信小程序需求

## 项目概述
构建一个微信小程序,用于记录工作打卡时间和查看历史记录。

## 功能页面

### 第一个界面:打卡页面
- 记录上班时间以及下班时间
- 显示目标工作时长为10.2个小时
- 显示本月历史打卡记录的平均工作时长
- 提供跳转到历史记录页面的功能
- 打卡按钮设计醒目,易于操作
- 实时显示当前日期和时间
- 当天已打卡状态明显展示(上班已打卡/下班已打卡)

### 第二个界面:历史记录页面
- 以日历形式呈现历史打卡记录
- 显示本月的平均工作时长
- 点击任意日期可显示所选日期的上下班时间
- 支持对历史的上下班时间进行修改
- 修改完上下班时间后,本月的平均工作时长需重新计算并自动更新
- 提供返回打卡页面的导航功能
- 对于工作时长不足10.2小时的日期进行视觉提示(如标红)
- 支持按周、月查看统计数据

## 用户体验要求
- 简洁明了的界面设计,符合微信设计规范
- 关键信息(如工作时长、打卡状态)字体加大或高亮显示
- 操作流程简单直观,减少用户学习成本
- 加载速度快,响应及时

## 技术要求
- 所有数据保留在本地,使用微信小程序的本地存储能力
- 确保数据在应用关闭后仍能保存
- 考虑数据备份和恢复机制
- 适配不同屏幕尺寸的设备

## 其他功能建议
- 支持设置个性化的工作时长目标
- 提供月度/季度工作时间统计报表
- 可选的提醒功能(如工作时间即将达到目标时通知)
- 支持数据导出功能(如导出为Excel表格)

1.2 生成代码

复制代码
本次开发基于的大模型是 3.7-sonnet-thinking

二、编译预览

2.1 导入项目

复制代码
使用上个帖子下载页面下载的 "微信开发者工具" 导入,可以先用 "测试号"

2.2 编译预览

复制代码
每次编译前,先清缓存

(1) 打卡页面

(2) 历史页面


三、发布

3.1 在微信开发者工具进行上传

复制代码
是需要使用正式的 appid

3.2 管理平台的版本管理

复制代码
开发版本设置为体验版

3.3 手机扫描二维码

复制代码
在微信小程序直接使用

四、总结

  • 不会写提示词可以将自己的需求简单描述,然后让大模型完善
  • 尽量一次性把需求描述完整
  • 3.7-sonnet-thinking 不愧为当前地表最强
  • 生成的东西有瑕疵,需要继续润色

血的教训:做好版本管理,避免无法回滚

相关推荐
井云AI6 小时前
井云智能体封装小程序:独立部署多开版 | 自定义LOGO/域名,打造专属AI智能体平台
人工智能·后端·小程序·前端框架·coze智能体·智能体网站·智能体小程序
晓翔仔1 天前
小程序个人信息安全检测技术:从监管视角看加密与传输合规
小程序
咸虾米2 天前
微信小程序服务端api签名,安全鉴权模式介绍,通过封装方法实现请求内容加密与签名
vue.js·微信小程序·uni-app
—Qeyser2 天前
小程序UI(自定义Navbar)
小程序
2501_915921432 天前
iOS 应用上架多环境实战,Windows、Linux 与 Mac 的不同路径
android·ios·小程序·https·uni-app·iphone·webview
Goona_2 天前
PyQt多窗口应用开发:构建完整的可二次开发用户登录注册模板
python·小程序·excel·pyqt
wstcl2 天前
安卓app、微信小程序等访问多个api时等待提示调用与关闭问题
android·微信小程序·webapi
咸虾米2 天前
微信小程序通过uni.chooseLocation打开地图选择位置,相关设置及可能出现的问题
vue.js·微信小程序
AAA修煤气灶刘哥2 天前
微信小程序+Spring Boot:三步教你搞定微信小程序登录+Token加密+全局拦截器
spring boot·后端·微信小程序
yw00yw2 天前
小程序插件使用
java·小程序·apache