手把手带大家使用 Cursor + 大模型提示词工程，从零开始打造一款高颜值、功能完整的 微信扫码与解码小程序。无需深厚的原生小程序语法基础，只需掌握规范的 Prompt 即可快速生成高完成度作品。

🛠️ 开发准备

1. 注册小程序账号

前往微信公众平台完成小程序账号注册，获取 AppID（本地开发与真机调试必需的身份凭证，测试阶段亦可使用测试号）。

2. 配置开发环境

• 代码编辑器：Cursor（AI 辅助编程编辑器，官网下载安装）
• 官方调试环境：微信开发者工具（官方调试与真机预览环境）

🚀 执行步骤

步骤一：创建 UI 美化设计提示词

在 Cursor 编辑器中新建 UI美化.md 文件，将以下设计规范提示词粘贴保存：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

请作为资深UI设计师，基于以下要求美化小程序页面：
 
# 设计规范 
1. 风格系统
   - 采用 iOS 18 + Material Design 混合风格 
   - 主色：#3B82F6 / 辅色：#F59E0B / 中性灰：#64748B 
   - 间距系统：4px基准单位，采用 8/16/24px 间距阶梯 

2. 组件要求
   - 头像模块：使用双层渐变描边 + 状态指示环 
   - 信息卡片：毛玻璃效果背景 + 动态投影 
   - 功能入口：悬浮微动效 + 按压态涟漪反馈 

3. 交互动画
   - 页面入场：Staggered Slide-in 动画（延迟 0.1s 递增）
   - 按钮交互：Bezier 曲线缓动（cubic-bezier(0.4,0,0.2,1)）

# 技术实现 
- 使用 TailwindCSS 框架实现响应式布局 
- 图标采用 @heroicons/react 2.1.1 版本 
- 适配微信小程序 rpx 单位系统 

# 参考案例 
参考 Figma 社区案例《Neumorphism Mobile Design》中的层级处理，以及 Dribbble 配色方案。

步骤二：通过 Cursor 对话驱动生成核心功能

使用快捷键 Ctrl + L 打开 Cursor 对话框，在对话中输入小程序的基本需求，并通过 @ 引用刚刚保存的 UI美化.md：

案例需求 Prompt：
“你是一位专业的小程序全栈开发工程师，现在需要做一个二维码扫码和解码的功能，界面干净清爽，操作快捷方便，UI 美化参考提示词。”

回车执行后，AI 会自动规划目录结构并生成对应的小程序工程文件。若中途因网络波动暂停，直接在对话框输入「继续」即可完成全量生成。

步骤三：图标素材优化

初次生成的文件中，图标素材通常为占位符说明，需要进行二次下载或替换：

图标优化 Prompt：
“更换 icons 的图标，要求从图标库（如 iconfont.cn、flaticon.com 等）下载符合设计规范的图标，图标尺寸为 64x64px 或 128x128px，保存为 PNG 格式，支持透明背景。”

步骤四：界面视觉二次重构

为进一步提升界面的质感与操作流畅度，可使用以下重构提示词对 pages 内的视图进行二次细化：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

作为资深小程序 UI 设计师，请基于以下要求重构 pages 里的页面的视觉方案：

# 设计规范
1. 基础参数
  - 色彩系统：主色 #3B82F6 / 辅色 #F59E0B / 文字色 #1F2937  
  - 间距布局：采用 8px 单位网格，外间距 24px / 内间距 16px  
  - 圆角规范：大圆角 12px / 中圆角 8px / 小圆角 4px  

2. 组件改造
  - 按钮：悬浮微动效 + 按压态涟漪反馈，禁用状态 50% 透明度  
  - 卡片：毛玻璃效果（backdrop-filter: blur(20px)）+ 双层投影  
  - 头像模块：圆形切割 + 动态状态环（在线状态用 #34D399）  

3. 交互动画
  - 页面入场：阶梯式延迟加载（staggered 入场，延迟 0.1s 递增）  
  - 点击反馈：bezier 缓动动画（cubic-bezier(0.4, 0, 0.2, 1)）

# 技术约束 
- 适配微信小程序 rpx 单位系统
- 结构清晰，便于维护
- 图标采用微信原生 iconfont 体系 

📱 调试、配置与真机预览

1. 微信开发者工具导入

• 打开微信开发者工具，点击【导入项目】；
• 目录选择 Cursor 生成的小程序工程根路径；
• 填入自己的小程序 AppID（或选择测试号）；
• 点击导入并等待项目编译完成。

2. 常见问题处理

• 若提示无权限或权限报错，请确保已在微信开发者工具中扫码登录当前开发者的微信号；
• 真机预览前，建议在开发者工具详情设置中勾选「不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书」。

3. 真机扫码与效果展示

点击微信开发者工具顶部的【真机调试】或【预览】，使用微信扫描二维码即可在手机上体验丝滑的扫码与历史解析记录：

🎁 资源与源码获取

为了方便大家对照学习与直接体验，已将整理好的完整工程源码（包含全部 pages 逻辑、样式文件与对应 Prompt 提示词）打包归档：

1. 关注微信公众号：扫描博客侧边栏或底部的微信二维码；
2. 发送后台关键词：在公众号对话框发送关键词「扫码源码」；
3. 即刻获取源码：系统将自动推送 微信扫码小程序完整工程源码包，解压后即可直接通过微信开发者工具一键导入预览。