记录小白使用 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 不愧为当前地表最强
  • 生成的东西有瑕疵,需要继续润色

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

相关推荐
喝牛奶的小蜜蜂1 小时前
个人小程序:不懂后台,如何做数据交互
前端·微信小程序·小程序·云开发
2501_918941052 小时前
旅游微信小程序制作指南
微信小程序·小程序·旅游
全职计算机毕业设计3 小时前
SpringBoot+Mysql实现的停车场收费小程序系统+文档
spring boot·mysql·小程序
邹荣乐3 小时前
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合
前端·微信小程序·uni-app
半兽先生7 小时前
uniapp微信小程序视频实时流+pc端预览方案
微信小程序·uni-app·音视频
KerwinChou_CN8 小时前
自由开发者计划 004:创建一个苹果手机长截屏小程序
图像处理·算法·智能手机·小程序
Uyker8 小时前
空间利用率提升90%!小程序侧边导航设计与高级交互实现
前端·微信小程序·小程序
说私域8 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的生态农庄留存运营策略研究
人工智能·小程序·开源·零售
Nightne8 小时前
小程序引入deepseek
小程序
胡斌附体17 小时前
uniapp路由跳转toolbar页面
小程序·uni-app·switch·路由·type·uview-ui