如何仅用AI开发完整的小程序＜5＞—让AI制作开始页面

这一节我们正式开始让AI干活。

接下来我将以我开发制作“修仙太难了”为例来介绍如何用AI制作开发微信小程序。

虽然这是一个偏游戏的程序，其实用的是小程序的技术方案开发出来的，学了这个你不见得就会用Ai开发小游戏了，但是一定会用Ai开发小程序了。

上一节我们已经创建了一个空白的开始页

这一节我们来对照“修仙太难了”的开始页实现一个类似的页面

我们先观察“修仙太难了”的页面内容然后编写AI指令。

一、编写AI指令

---

我正在用微信开发者工具开发一款小程序

现在需要你在这个基础上开发新功能，且不影响原功能，具体需求如下：

1、在gameStart页面创建标题：修仙太难了，副标题“单机版”，solgan“模拟真实的修仙体验”

2、创建主按钮：踏入仙途

3、主按钮底部创建4个小按钮-修行攻略，仙途成就，凡尘结缘，更新记录（这四个按钮需要在一个水平线上）

4、底部创建“健康游戏公告”，公告内容“抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。”

5、界面UI主题深蓝色星空背景，你需要将整个界面设计的非常美观舒适，不要引用外部的图片资源，所有按钮动效，背景动效等只需要用wxss纯代码实现即可。

注意事项：

最重要的事情：每个修改的方法函数必现将修改后的完整的方法函数打印出来，不要省略原来方法中的任何代码。

1、不要修改额外的东西，当修改已经有的函数时，不要修改函数名。

2、不要在一个函数中实现多个功能方法，每个方法都单独实现，然后在需要的地方调用，注意所有函数集成到 Page 对象中

3、当某个函数方法被修改时，需要把修改后的完整的函数方法单独打印出来。

4、备注说明修改的代码块

5、新增文件/方法命名规范：首字母小写，如果是多个单词拼接的，则除首单词之外的其它单词首字母大写，示例：roleAttributeTemplate。

6、新增文件或者文件夹时请详细说明具体放到那个名字的目录下（不要说放到根目录）

7、注意：如果有类似margin-bottom: {{bottomSafeAreaHeight}}px的动态样式绑定应该放在WXML文件中而不是wxss文件中

8、充分考虑代码运行性能

---

然后我们就可以把以上命令丢给AI，并且要把gameStart.js，gameStart.wxml，gameStart.wxss三个文件里面的内容全部复制出来一起丢给AI。（比如DeepSeek）

然后就是等待Ai输出结果...

等AI输出结果后，我们将对应的代码复制粘贴到项目中对应的文件下即可

比如下图就是AI输出的gameStart.wxml中的代码。

注意复制粘贴后每一个文件都要Ctrl+s保存一下。

我将以上AI生成的代码复制粘贴进去保存后，生成的界面效果如下：

怎么样是不是很简单~

虽然页面样式结构和“修仙太难了”不太一样，不过基本的页面框架已经有了。

二、要点说明

1、编写AI指令时具体需求一定要详细，越详细越好

2、声明让它在原功能的基础做修改且不要影响原功能

3、注意事项部分命令是我总结的通用部分命令，每次让AI干活的时候都丢给它。（也可以按照自己的具体需求增加或者删除）

4、最后一定要把当前项目中已完成的相关代码复制丢给它，让它在已经完成的功能基础上修改。

5、一般系统的编写功能我会用DeepSeek（逻辑严谨-靠谱），提升视觉效果或者修改小BUG用豆包（逻辑虽然不严谨但是反应快）

以下是我完全用AI开发的小游戏，欢迎体验。

--完--