摘要：从了解代码的基础运行逻辑，到学会分析纯前端小程序的需求，再到一步步开发出自己的小程序并拿到完整源代码直接运行，这篇文章就像一本实用的编程入门指南，手把手教你如何借助 AI 的力量开启编程之旅。
从了解代码的基础运行逻辑，到学会分析纯前端小程序的需求，再到一步步开发出自己的小程序并拿到完整源代码直接运行，这篇文章就像一本实用的编程入门指南，手把手教你如何借助 AI 的力量开启编程之旅。
因为最近在尝试用 AI 编程，而且我是一个非常结果导向的人，喜欢直接做项目学习。复刻了一下之前很火的《小猫补光灯》，在这里把我复刻的思路和过程分享给大家。作为没学过编程的人，怎么看懂一点代码。
这篇内容会包括：
1. 了解代码的基础运行逻辑
2. 学会分析纯前端小程序的需求思路
3. 一比一靠开发出一个《补光灯》小程序
4. 拿到完整源代码，可以直接粘贴运行
当我决定复刻《小猫补光灯》的时候，我第一是在想，一个程序是怎么运行的。所以，我学到了三个东西：前端、后端、服务器。
前端：是用户眼睛能看到和操作的东西。比如你打开了一个注册页面，看到页面上的内容，然后输入了信息，点击「注册」按钮。都是前端。后端：是藏在操作背后的逻辑，比如计算、存储数据等。当你点击了「注册」按钮，前端把你的信息发给了后端，后端做了一系列处理，创建了你的userid，最后告诉前端注册成功。服务端：让后端能进行运作的东西。服务器保证24小时在线，让任何人随时都能注册。这时候，再来看我们要复制的项目——补光灯。
用户点一下按钮，屏幕背景立即换成对应颜色。我们需要哪些部分呢？
前端：当然要有，界面和按钮都是前端负责的。后端：逻辑很简单，就是「点击→换颜色」，不涉及复杂计算或数据库，所以完全不需要后端。服务器：既然没有后端逻辑，也不需要服务器来运行。最后你会发现，这就是一个纯前端程序。没有数据库，没有复杂逻辑，简单直观，所以非常适合 0 基础练手。
我们已经知道《补光灯》是一个纯前端小程序。那接下来问题是：
如何清楚地告诉 AI，或者自己动手分析，要写什么？
最简单的办法就是把需求变成几个问题，然后逐一回答。
1. 打开小程序我们看到的是什么？（界面和元素）一个全屏背景（颜色会变化）。底部一排5个按钮，每个按钮代表一种灯光颜色。中间有一行提示文字（“点击屏幕中间隐藏所有按钮”），帮助用户理解操作。2. 小程序我们能进行什么操作？（操作）点击按钮：切换背景颜色。点击屏幕中间：隐藏或显示按钮（以及提示文字）。3. 小程序进行操作之后是什么结果？（结果）点按钮→背景立刻变成对应的颜色。点中间→按钮消失，再点一次，中间提示和按钮重新出现。通过这样的分析，我们就能把小程序拆解为三部分：界面和元素 → 操作 → 结果。
无论是让 AI 写代码，还是自己动手实现，都能清晰知道该怎么做。
1. 注册小程序 & 下载开发工具首先，你需要一个小程序账号和开发环境：
👉 官方教程链接：
（这部分步骤和我的教程关系不大，大家跟着官方文档来就行了。）
2. 进入云开发初始模式当你新建一个小程序项目时，会看到一大堆文件和文件夹。
这是因为微信贴心地给你一键配齐了所有装备：
但是，我们之前已经分析过：
👉 《补光灯》是一个 纯前端小程序！
所以这些“后端和服务器”的部分用不到。删删删！
最终我们只保留以下内容（是不是清爽很多 👇）：
我们的小程序只有一个页面，所以在 pages 下面新建一个文件夹，比如叫 homepage，我这里叫 color。
小程序会自动帮你生成 4 个文件：
color.wxml：页面结构（像HTML）color.wxss：页面样式（像CSS）color.js：页面逻辑（像JavaScript）color.json：页面配置这就是小程序的基本组成。
接下来就可以把我们前面写好的 需求分析 交给 AI：
界面：全屏背景+底部5个按钮+中间提示文字操作：点击按钮换颜色；点击屏幕中间隐藏/显示按钮结果：颜色切换、按钮隐藏显示把这些描述丢给 AI，AI 就能帮你生成对应的代码。
我们要做的就是“看懂逻辑、跑起来”，而不是从零写出每一行。
当你让 AI 生成完代码后，回到微信开发者工具，点击 「编译」 即可运行。本项目也提供了我已整理好的完整源码，目录结构和前面教程一致。
夸克网盘资源：
使用方式：直接粘贴（适合照着练手）
在你的项目里按前文创建好目录（miniprogram/pages/color/…）。把教程给出的4个页面文件（color.wxml/.wxss/.js/.json）和app.json/app.js/app.wxss覆盖粘贴。点击编译。最后，我还在摸索 AI 编程的阶段，我发现直接做项目的学习方式非常适合我，分享给大家，希望也对大家有帮助。也欢迎留言更好的编程技巧，也帮助我更好地学习编程，谢谢大家。
本文由人人都是产品经理作者【CoopyZhou】，【CoopyZhou】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
来源：人人都是产品经理一点号
