当前位置: 首页 > news >正文

Cursor小程序实战系列一:0到1开发一个小程序,需求整理、小程序注册备案

一、需求的诞生

某书发表了一片笔记: 家长使用多维表格+DeepSeek对小孩进行作文辅导。

 

 

痛点

两到三个核心功能点

这些内容对使用Cursor来生成页面很有帮助

 

AI作文辅导

一般的家长辅导孩子作文非常困难,主要原因如下:
1、家长难以针对孩子写作弱点提供定制化提升方案

2、无法获得实时写作建议

1)上传作文照片,使用DeepSeek进行作文分析给出建议和提升方案【核心功能】
2)每批改一次作文消耗一次积分,使用微信充值获得积分【商业变现方式】
3)用户使用微信授权登陆,登陆完成需要绑定手机号【用户注册流程】

1、AI对接

2、完整支付流程

3、完整用户流程

 

二、完成小程序的前置流程

事项

协助工具/网站

作用

可获得

成本

周期

小程序注册备案

https://mp.weixin.qq.com/

 

系统使用的载体

appId

appSecret

小程序待上线状态

300/年

 

两周左右

微信支付商家申请

https://pay.weixin.qq.com/

充值支付使用

商户号mchId

0

一周左右

域名注册备案

 

阿里云、腾讯云、华为云或者其他

小程序的后端服务逻辑

域名

.com

.cn

35~83/年

两周左右

服务器购买

阿里云、腾讯云、华为云或者其他

小程序的后端服务逻辑

公网ip

 

99/年

 

短信套餐

阿里云或者其他
https://dysms.console.aliyun.com/overview

发送验证码

发送验证码

35/年

根据情况调整

 

豆包大模型API

https://console.volcengine.com/

 

api秘钥

合作合同

按使用量收费

 

二、小程序注册及备案、微信支付

1)小程序LOGO

Logo 可以使用即梦AI生成,提示词如下

充满创意与活力的品牌标志。标志需融合多种鲜明色彩(如红色、蓝色、绿色、黄色等),以手印图案为核心元素。整体设计需简洁而富有张力,黑色背景与多彩手印形成鲜明对比,下方配以醒目的白色文字“UDESIGN ”。

参考:

[该类型的内容暂不支持下载]

2)备案方法:微信备案流程(企业/个人)

 

3)AI类目审核

 

备案流程:

注意:小程序的主体和算法使用签订的合同主体必须一致

4)微信支付:

微信支付对接渠道

优势

劣势

建议

微信商户号

申请方便,快速

费率高

优先使用,跑通流程

微信服务商

(类似你是微信支付能力提供商)

申请麻烦,类似建大号,还要一个小号,费率低

流程麻烦

不建议

第三方支付渠道

费率低

接口稳定性,账期等

可考虑,看是否有对接经验

三、原型页面生成

我想开发一个小程序

目标用户:

- 主要用户:25-45岁的家长,没时间来教小孩怎么写作文,也可能不知道还在对应年级作文的写作规范和要求

 用户痛点:

-家长难以针对孩子写作弱点提供定制化提升方案

-无法获得实时写作建议

我目前想到的核心功能如下:

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 代码,并确保其可用于实际开发。

 

 

http://www.zskr.cn/news/3762.html

相关文章:

  • 赛题
  • .gitignore 文件
  • MySQL集群高可用架构 - 指南
  • 在Kubernetes中DaemonSet无法在master节点调度的问题
  • 9 12-
  • 在CentOS 7系统中彻底移除MongoDB数据库
  • 【数学建模】烟幕干扰弹投放策略优化:模型与算法整合框架 - 实践
  • 开源排名算法工具raink:利用LLM实现智能文档排序
  • Metasploit Framework 6.4.88 (macOS, Linux, Windows) - 开源渗透测试框架
  • 中大型水闸安全监测的重要性及实施方法 - 指南
  • python 轻量级别的网页包Streamlit
  • 大模型基础|位置编码|RoPE|ALiBi
  • grafana部署并使用harbor监控模板
  • 成品app直播源码搭建,sql优化原则 - 云豹科技
  • 使用Clang静态分析技术追踪Heartbleed漏洞
  • 川土微CA-IF1051S、CA-IF1051VS 支持CAN FD
  • 十六、异常和中断的响应过程
  • 关于前端的一些疑问整理(标签属性值和符号)
  • 思考 | 躺平者的本质和区别
  • ECT-OS-JiuHuaShan框架元推理,为何超乎想象,难以置信?
  • ECT-OS-JiuHuaShan框架元推理,其运行与推理,是自指自洽性的唯一证明
  • 配置gemini
  • 基于chrony的NTP校时配置方法
  • ECT-OS-JiuHuaShan框架元推理,就是普罗米修斯主义,穷神知化
  • UI/UX 桌面操作系统应该做好的几个功能
  • 完整教程:1.1 汽车运行滚动阻力
  • 鸿蒙用户首选项数据持久化
  • 基于Transformer的预训练大语言模型,如何区分文本位置?
  • UE RPC介绍
  • JS监听DOM元素的变化