一、原型界面的生成
在cursor中用以下提示词
|
我想开发一个小程序 目标用户： • 主要用户：25-45岁的家长，没时间来教小孩怎么写作文，也可能不知道还在对应年级作文的写作规范和要求 • 用户痛点：1、家长难以针对孩子写作弱点提供定制化提升方案 2、无法获得实时写作建议 我目前想到的核心功能如下： 1、用户可以对作文进行拍照，然后上传图片 2、调用大模型对作文进行批改 3、每次批改作文消耗一个积分，使用微信支付进行充值可获得积分 4、用户使用微信授权登陆，登陆完成需要绑定手机号 现在需要你帮我输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发： 1、用户体验分析：先分析这个小程序的主要功能和用户需求，确定核心交互逻辑。 2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。 3、高保真 UI 设计：作为 UI 设计师，设计贴近真实小程序设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。 4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 小程序 设计。拆分代码文件，保持结构清晰： 5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。 • index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。 • 真实感增强： - 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。 • 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。 • 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。 请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。 |
二、导出原型图
使用谷歌 Fireshot 插件,导出PNG图
三、用小程序开发者工具新建项目
下载地址
[该类型的内容暂不支持下载]
使用云开发与不使用云开发的区别
|
对比维度 |
使用云开发 |
不使用云开发（传统开发） |
|
开发方式 |
前后端分离，无需自建服务器，直接调用云函数、云数据库等API完成全栈开发 |
需自建后端服务器，前后端分离需联调接口，需编写完整后端逻辑代码 |
|
开发成本 |
初期成本低（免费基础额度），按量计费；无需服务器购置及运维费用 |
需自购服务器、维护数据库、支付带宽费用，人力成本高（需前后端分工） |
|
服务器运维 |
由腾讯云托管，无需开发者维护 |
需自行搭建服务器，处理负载均衡、安全防护、扩容等运维问题 |
|
数据存储 |
内置NoSQL JSON数据库，支持实时同步，可直接在前端操作 |
需自建关系型数据库（如MySQL）或非关系型数据库，需编写CRUD接口及后端逻辑 |
|
实时数据推送 |
内置实时推送能力，通过API直接实现 |
需自行实现WebSocket或长轮询，代码复杂度高 |
|
扩展能力 |
通过云函数快速扩展功能，集成微信生态API（如支付、登录） |
需手动修改后端代码并重新部署服务器，灵活性受限 |
|
开发难度 |
低门槛，前端开发者可独立完成全栈开发，无需后端知识 |
需掌握前后端技术栈（如Node.js、Java），团队协作要求高 |
|
适用场景 |
中小型项目、快速迭代试错、轻量级应用（如工具类、展示类小程序） |
复杂业务逻辑、高并发场景、需深度定制或对接外部系统（如电商、金融类应用） |
|
性能与扩展限制 |
高并发或大数据量时可能遇到性能瓶颈，需优化或升级服务 |
可自主优化服务器配置，灵活应对高并发需求 |
|
数据安全与迁移 |
数据存储于腾讯云，迁移需通过导出接口；权限管理较简单 |
数据完全自主控制，可自由迁移至其他云服务或本地服务器 |
建议：
超级简单的小程序，使用云开发
其他只建议传统开发
1）使用云开发跟微信生态强绑定在一起，而且随着数据量的增加，成本有可能会比购买服务器要高
2）传统开发更灵活，框架的生态更丰富。
比如需要包含一个任务调度功能
传统开发就有非常多的框架可以选择
云开发只能做到最简单
3）接口可以公用，APP
新建项目的目的是保证文件架构的准确性
四、初始化rules
目的是保证小程序能遵循统一的规范
匹配 /components/**/*，/pages/**/*
|
你是一个经验丰富的小程序开发人员，擅长解决各种小程序开发问题，严格遵守小程序开发规范 项目结构 • components /**这里存放小程序的自定义组件，每个组件单独一个文件夹 */ • pages /**这里存放小程序的页面，每个页面单独一个文件夹 */ • api /** 这里存放调用后端服务的文件，按模块划分，每个模块一个文件,文件命名：**Api.js */ • static /**存放其他常用js或者静态资源图片 */ ui及页面规范 • 所有页面必须包含 js、json、wxml、wxss文件，json文件必须包含以下基本内容 { "navigationBarTitleText": "上传作文", "usingComponents": { } }
代码规范： - 使用微信小程序原生框架进行开发，合理使用组件化开发。 - 遵循微信小程序设计规范，确保良好的用户体验。 - 利用微信小程序提供的API进行功能开发，如登录、支付、地理位置等。 - 使用分包加载优化小程序体积和加载性能。 - 合理使用页面生命周期函数和组件生命周期函数。 - 编写详细的代码注释，并在代码中添加必要的错误处理和日志记录。 - 合理使用本地存储和缓存机制。
|
跟后端交互的rules文件
匹配 api/*.js
|
** 入参要求 - header中必须设置 auth， 值为当前登录后保存的token值 - 请求的参数使用json 格式， 就算是参数为空，也需要使用 {} 来代替 ** http请求 请求方式默认是post，除非有明确要求 ** 返参 - 后端统一返回的参数为json对象，格式如下 { "error": 0, "body": object, "message": ''
} error =0, 表示没有任何异常 error = 500, 表示系统异常，需要弹出系统异常的错误 error = 401，表示需要登录 error 其它值，表示业务异常，直接弹出 message内容 body 是一个对象 ** 设计一个通用函数来处理后端API返回值，所有的API文件都是用这个通用函数 |
五、开始生成界面。
将fireshot导出来的图片，复制到cursor中，输入以下语句
|
请参考图片，完成所有小程序页面的开发，遵守 @wechat.rules, @api.rules 两个规则 |
第一次使用，一定要加上规则，不然会失效。
六、微调界面
fireshot导出来的界面可能不完整，需要手动截取图片发到cursor中再进行调整。
这里要有耐心，一个页面一个页面去检查，也是花费时间最久的
七、常见的问题及解决方案
1）小程序的顶部导航和底部tab
用rules提前来规范，我就是刚开始没有，导致导航一直不对
2）使用第三方框架一直有问题
给出示例代码，让cursor明白正确的是什么
3）出现卡顿
使用 @pastchats 来新开对话窗口
4）生成的小程序页面结构不全
在rules中已经设定了规则