从了解代码的基础运行逻辑，到学会分析纯前端小程序的需求，再到一步步开发出自己的小程序并拿到完整源代码直接运行，这篇文章就像一本实用的编程入门指南，手把手教你如何借助 AI 的力量开启编程之旅。

因为最近在尝试用 AI 编程，而且我是一个非常结果导向的人，喜欢直接做项目学习。复刻了一下之前很火的《小猫补光灯》，在这里把我复刻的思路和过程分享给大家。作为没学过编程的人，怎么看懂一点代码。

这篇内容会包括：

1. 了解代码的基础运行逻辑

2. 学会分析纯前端小程序的需求思路

3. 一比一靠开发出一个《补光灯》小程序

4. 拿到完整源代码，可以直接粘贴运行

1. 了解代码的基础运行逻辑

当我决定复刻《小猫补光灯》的时候，我第一是在想，一个程序是怎么运行的。所以，我学到了三个东西：前端、后端、服务器。

前端：是用户眼睛能看到和操作的东西。比如你打开了一个注册页面，看到页面上的内容，然后输入了信息，点击「注册」按钮。都是前端。

后端：是藏在操作背后的逻辑，比如计算、存储数据等。当你点击了「注册」按钮，前端把你的信息发给了后端，后端做了一系列处理，创建了你的 user id， 最后告诉前端注册成功。

服务端：让后端能进行运作的东西。服务器保证 24 小时在线，让任何人随时都能注册。

这时候，再来看我们要复制的项目——补光灯。

用户点一下按钮，屏幕背景立即换成对应颜色。我们需要哪些部分呢？

前端：当然要有，界面和按钮都是前端负责的。

后端：逻辑很简单，就是「点击 → 换颜色」，不涉及复杂计算或数据库，所以完全不需要后端。

服务器：既然没有后端逻辑，也不需要服务器来运行。

最后你会发现，这就是一个纯前端程序。没有数据库，没有复杂逻辑，简单直观，所以非常适合 0 基础练手。

2. 学会分析纯前端小程序的需求思路

我们已经知道《补光灯》是一个纯前端小程序。那接下来问题是：

如何清楚地告诉 AI，或者自己动手分析，要写什么？

最简单的办法就是把需求变成几个问题，然后逐一回答。

1. 打开小程序我们看到的是什么？（界面和元素）

• 一个全屏背景（颜色会变化）。
• 底部一排 5 个按钮，每个按钮代表一种灯光颜色。
• 中间有一行提示文字（“点击屏幕中间隐藏所有按钮”），帮助用户理解操作。

2. 小程序我们能进行什么操作？（操作）

• 点击按钮：切换背景颜色。
• 点击屏幕中间：隐藏或显示按钮（以及提示文字）。

3. 小程序进行操作之后是什么结果？（结果）

• 点按钮 → 背景立刻变成对应的颜色。
• 点中间 → 按钮消失，再点一次，中间提示和按钮重新出现。

通过这样的分析，我们就能把小程序拆解为三部分：界面和元素 → 操作 → 结果。

无论是让 AI 写代码，还是自己动手实现，都能清晰知道该怎么做。

3. 一比一靠开发出一个《补光灯》小程序

1. 注册小程序 & 下载开发工具

首先，你需要一个小程序账号和开发环境：

• 去微信公众平台注册小程序账号。
• 下载并安装 微信开发者工具。

👉 官方教程链接：

https://developers.weixin.qq.com/community/business/course/000264e20a0dd8e69669b609451c0d

（这部分步骤和我的教程关系不大，大家跟着官方文档来就行了。）

2. 进入云开发初始模式

当你新建一个小程序项目时，会看到一大堆文件和文件夹。

这是因为微信贴心地给你一键配齐了所有装备：

但是，我们之前已经分析过：

👉 《补光灯》是一个 纯前端小程序！

所以这些“后端和服务器”的部分用不到。删删删！

最终我们只保留以下内容（是不是清爽很多 👇）：

3. 创建第一个页面

我们的小程序只有一个页面，所以在 pages 下面新建一个文件夹，比如叫 homepage，我这里叫 color。

小程序会自动帮你生成 4 个文件：

• color.wxml：页面结构（像 HTML）
• color.wxss：页面样式（像 CSS）
• color.js：页面逻辑（像 JavaScript）
• color.json：页面配置

这就是小程序的基本组成。

4. 需求分析交给 AI

接下来就可以把我们前面写好的 需求分析 交给 AI：

• 界面：全屏背景 + 底部 5 个按钮 + 中间提示文字
• 操作：点击按钮换颜色；点击屏幕中间隐藏/显示按钮
• 结果：颜色切换、按钮隐藏显示

把这些描述丢给 AI，AI 就能帮你生成对应的代码。

我们要做的就是“看懂逻辑、跑起来”，而不是从零写出每一行。

4. 拿到完整源代码，可以直接粘贴运行

当你让 AI 生成完代码后，回到微信开发者工具，点击 「编译」 即可运行。本项目也提供了我已整理好的完整源码，目录结构和前面教程一致。

夸克网盘资源：

https://pan.quark.cn/s/94265fe944ec

使用方式：直接粘贴（适合照着练手）

• 在你的项目里按前文创建好目录（miniprogram/pages/color/…）。
• 把教程给出的 4 个页面文件（color.wxml / .wxss / .js / .json）和 app.json / app.js / app.wxss 覆盖粘贴。
• 点击 编译。

最后，我还在摸索 AI 编程的阶段，我发现直接做项目的学习方式非常适合我，分享给大家，希望也对大家有帮助。也欢迎留言更好的编程技巧，也帮助我更好地学习编程，谢谢大家。

本文由人人都是产品经理作者【CoopyZhou】，微信公众号：【CoopyZhou】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于 CC0 协议。