如何仅用AI开发完整的小程序＜6＞—让AI对视觉效果进行升级

上一节我们已经成功创建了开始页面，但是视觉效果不是太理想。

这一节我们对视觉效果进行升级。

一、优化标题栏

在让AI干活之前，我们先手动做一个小优化—修改顶部的标题栏。

我们将这个标题栏的白色改成黑色：#121212，并且隐藏wexin文本。需要修改app.js文件里面的配置

1、将"navigationBarTitleText": "",里面的weixin删掉

2、将"navigationBarBackgroundColor": "#1a1a1a"，里面本来的颜色改成#121212。（控制背景颜色）

3、"navigationBarTextStyle": "white",修改成，white（控制字体颜色）

3、Ctrl+s保存即可。

4、修改后如下图

5、或者也可以将gameStart.json中当前的代码替换成以下配置，彻底隐藏底部菜单栏。

{

"navigationStyle": "custom"

}

二、AI提升视觉效果指令

---

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

现在需要你在这个基础上开发新功能，提升开始页的整体视觉表现效果，且不影响原功能，具体需求如下：

1、将界面背景颜色改为#121212，同步修改整个界面的字体，按钮主题色调使其和背景统一。

2、在wxss中增加星空的闪烁效果和流星雨效果

3、在按钮上适当增加一些动效，但不要太复杂，间接一些即可

4、不要修改整体界面布局排版，可以做一些微调，整体给人深邃，空灵的感觉。

5、所有的视觉效果优化全部在wxss和wxml中完成，不要在js中编码

注意事项：

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

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

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

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

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

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

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

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

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

---

好了这次由于只是修改UI视觉，我们只需要把wxss，wxml中的原代码复制给AI即可。

然后等AI输出结果后将代码复制粘贴到对应的文件中：

以下是经过AI优化后的效果。

整体换成了黑调，增加了流星雨效果，一些星星闪烁的效果（不太明显）按钮上增加了一些动效。

三、总结说明

1、此过程中可能Ai首次输出的效果并不理想，这时候就需要让AI持续优化，哪里有问题就让AI调整哪里，直到自己满意。

2、并不是每次都需要让AI将修改后的完整代码输出出来，可以只让它输出修改的部分，不过这样就要自己去原代码中找到修改的部分替换。（后期代码已经迭代过长时，每次修改后全部输出代码会很长很慢，最后就是让他只输出修改的部分，自己查找替换）

3、如果你只想让Ai提升视觉的颜色主题，动效等拿就只让它修改wxss，不要修改wxml和js。当然前提是你让它将所有色彩，动效的代码都实现在了wxss中，不过有些视觉必须都改动都生效。比如流星雨效果wxss和wxml都必须修改。

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

--完--