AI编程极速开发应用 Day12/21 ：微信小程序开发

一. 注册小程序

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

微信小程序一种新的开放能力，开发者可以快速地开发一个小程序。

小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验

• 之前网站从来没考虑这个在群里转发 营销的方式

• 学习开发？去微信学堂

注意小程序 需要认证

输入小程序基本信息

小程序的名称 和 图像 自己还没有想清楚 暂时不修改

二、安装开发工具

区分电脑

• window -不建议安装 c 盘
• macOS x64、--3 年前电脑
• macOS ARM64--最新电脑

三、开发一个题库的小程序

传统认知： AI编程能力 ≈ 代码熟练度（如掌握Python/算法）

颠覆观点：

未来核心竞争力转向 需求洞察力（定义问题比解决问题更重要）

3.1 Cursor

Cursor是基于大型语言模型(LLM)的AI编程助手，专为提升开发效率而设计。

在微信小程序开发中，Cursor具有以下独特优势：

代码智能生成：根据自然语言描述直接生成符合小程序规范的代码

实时错误分析：自动检测并分析代码错误，提供修复建议 上下文理解：理解整个项目结构，生成与现有代码风格一致的新代码

学习曲线平缓：降低小程序开发入门门槛，新手也能快速上手

开发效率提升：相比传统开发方法，开发速度提升3-5倍

与传统的代码编辑器不同，Cursor不仅是一个编辑工具，更是你的编程搭档，能理解你的意图并协助完成复杂的编程任务。

3.2 技术架构是什么

❝

前端：JavaScript + WXML + WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。

同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

尺寸单位 样式导入

后端： 出于简化开发目的，暂不引入后端服务。 数据存储（题目收藏及刷题记录）通过本地缓存实现

3.3 明确核心需求

① 题型练习模块

• 支持四种题型：选择题、填空题、判断题、代码分析题

② 搜索系统 ▸ 支持题目关键词检索

▸ 集成热门搜索词推荐 + 用户历史搜索记录

③ 本地化数据功能 ▸ 题目收藏（本地缓存存储） ▸ 刷题记录跟踪（含答题正确率统计）

④ 用户信息调用 ▸ 头像与昵称仅作展示用途（无数据采集行为）

3.4  梳理Cursor能看懂的业务逻辑

根据需求组织项目框架语句， 确保Cursor可以听懂。

① 对上述核心功能进行总结

我们需要2个页面（首页 + 我的）。

首页：包含搜索框和题库。 点击搜索框，进入搜索页面。 点击题库，进入对应的题库页面。

我的页面：由3部分组成： 头像昵称。 题目收藏（点击可进入收藏页面）。 其他功能（点击会进入不同页面）。

如果不清楚，可以参考其他系统的

提示词

我要做一个微信小程序，小程序是一个题库小程序，可以刷题、记录和收藏，请按照以下要求进行生成。

要求： 1）拥有两个导航页面；

2）第一个导航页面为题库页面，包含搜索框，题库以及导航栏；

3）第一个导航页面要求搜索框在最上面，题库居中，导航栏在最下面；

4）第二个导航页面为我的页面，包含头像昵称、题目收藏和历史记录；

5）第二个导航页面要求头像昵称在最上面，题目收藏和历史记录居中，导航栏在最下面；

6）注意：一定要把 UI 图片投喂给 Cursor，不会做，可以截图其他同类型小程序的页面

于核心功能 Cursor 开发对应的页面 ② 完善题库详情页面

很简单，只需要设计页面即可。

组织 Cursor 语句，例： 帮我完善该小程序的题库详情页。

要求：

1）点击不同题库，跳转到对应的题库详情页面； 2）题库详情页最上方为题库介绍，中间为题目，页面下方固定一个开始刷题的按钮； 3）点击不同的题目会进入对应的题目详情页。

③ 完善题目详情页面

完善小程序的题目详情页。

要求：

1）题目详情页上面为题目，题目右上方可以点击收藏，并且显示收藏状态；

2）中间不同类型题目对应不同，选择题为对应选项，填空题为对应一个文本框，判断题则是对、错两个选项； 3）在选项或者文本框下还包含三个按钮：提交答案、上一题和下一题；

4）点击提交答案可以对所有类型的题进行正误判断；

5）无论对错，在提交答案后都会把解析给出；

6）点击上一题会跳转到上一题，如果为第一题则提示当前为第一题，点击下一题请参考点击上一题的做法；

7）点击提交答案后会自动隐藏提交答案的按钮。

④ 题目收藏页面

完善小程序的收藏页面。

要求：

1）请根据页面的收藏状态将题目展示到收藏页面；

2）按时间排序，最近收藏的记录在上面；

3）具备一键清除的功能，一键清除所有收藏题目；

4）收藏页面的题目右方有个单独的收藏按钮，点击可以直接取消收藏，不用点进题目再取消。

⑤ 历史记录页面 完善小程序的历史记录页面。

要求：

1）在题目详情页只要点击提交答案，即记录下来，并且将对错也同时记录；

2）在历史记录页面展示时也会展示对错；

3）具备一键清除的功能，一键清除所有历史题目；

4）历史记录页面的题目右方有个单独的删除按钮，点击可以单独删除。

⑥ 搜索页面 完善小程序的搜索页面。

要求：

1）具备历史搜索和热门搜索并且完善该功能的逻辑；

2）根据题目进行搜索，每输入一个字符都会间隔 0.2 秒进行一次被动搜索；

3）只有点击搜索按钮才会记录历史。

⑦ 头像和昵称页面 完善小程序的头像和昵称页面。

要求：

1）点击头像，弹出“使用微信头像”或者从相册选择； 2）点击昵称，弹出“使用微信昵称”或者自己输入； 3）头像昵称只在本地展示，不进行采集。

总结

因为是第一次写小程序，只有前端，无 后端 前端：JavaScript + WXML + WXSS

小程序关键不在上面语法，而是挖掘需求， 定义问题 比解决问题能力更重要

提示词是根据自己需求来写的