如何用AI开发完整的小程序＜9＞—UI自适应与游戏页优化
上一节我们已经实现了游戏页的基本功能。
这一节我们调整一下游戏页得UI布局。
一、UI自适应
在此之前需要先了解并制作UI自适应，因为每个手机的屏幕尺寸可能不太一样，所以制作UI的时候需要开发相应的功能使其能适应不同的手机屏幕。
我之前让AI制作这个功能的时候调试了老半天，现在我就不让AI搞了，直接把之前已经搞好的代码块分享给大家，复制到项目中直接就可以用了
完整复制以下代码替换app.js中的代码。
App({
globalData: {
topSafeAreaHeight: 0, // 顶部安全区域高度
bottomSafeAreaHeight: 0, // 底部安全区域高度
},
onLaunch() {
const windowInfo = wx.getWindowInfo();
console.log('获取到的手机屏幕信息',windowInfo);
const windowWidth = windowInfo.windowWidth;
console.log('屏幕宽度',windowWidth);
const screenHeight = windowInfo.screenHeight;
console.log('屏幕总高度',screenHeight);
const safeArea = windowInfo.safeArea;
const safeAreaTop = safeArea.top;
console.log('顶部安全高度',safeAreaTop);
const safeAreaBottom = safeArea.bottom;
console.log('底部安全高度',safeAreaBottom);
// px转rpx的转换函数
const pxToRpx = (px) => px * (750 / windowWidth);
const topSafeAreaHeight = Math.round(pxToRpx(safeAreaTop)); //转化为rpx
const bottomSafeAreaHeight = Math.round(pxToRpx(screenHeight - safeAreaBottom)); //转化为rpx
console.log('最终顶部安全高度',topSafeAreaHeight);
console.log('最终底部安全高度',bottomSafeAreaHeight);
this.globalData.topSafeAreaHeight = topSafeAreaHeight; //存储为全局变量
this.globalData.bottomSafeAreaHeight = bottomSafeAreaHeight; //存储为全局变量
},
})
替换后保存-编译代码-调试器中应该会输出以下日志，代表已经OK了。
这时候我们其实只是获取到了手机的屏幕尺寸，要实现屏幕自适应还需要到每一个页面中去实现具体的功能。
接下里我们以gaming.js页面为例，让AI帮我们实现自适应。
AI指令：
我正在用微信开发者工具开发一款小程序
现在需要你在这个基础上开发新功能，且不影响原功能，具体需求如下：
1、在gaming页面实现屏幕自适应功能。
2、屏幕的安全尺寸我们已经获取到并存储到了以下全局变量中，你只需要直接获取即可。
globalData: {
topSafeAreaHeight: 0, // 顶部安全区域高度
bottomSafeAreaHeight: 0, // 底部安全区域高度
},
注意事项：
最重要的事情：每个修改的方法函数必现将修改后的完整的方法函数打印出来，不要省略原来方法中的任何代码。
1、不要修改额外的东西，当修改已经有的函数时，不要修改函数名。
2、不要在一个函数中实现多个功能方法，每个方法都单独实现，然后在需要的地方调用，注意所有函数集成到 Page 对象中
3、当某个函数方法被修改时，需要把修改后的完整的函数方法单独打印出来。
4、备注说明修改的代码块
5、新增文件/方法命名规范：首字母小写，如果是多个单词拼接的，则除首单词之外的其它单词首字母大写，示例：roleAttributeTemplate。
6、新增文件或者文件夹时请详细说明具体放到那个名字的目录下（不要说放到根目录）
7、注意：如果有类似margin-bottom: {{bottomSafeAreaHeight}}px的动态样式绑定应该放在WXML文件中而不是wxss文件中
8、充分考虑代码运行性能
将gaming页面的js和wxml代码复制粘贴给Ai
替换AI修改后的代码后保存-编辑-进入gaming页面，明显顶部和底部已经留出了一定间距。成功避开了手机屏幕上面的刘海和底部的一定区域。
然后我们切换到其它手机屏幕看看效果。
切换到iphone6-展示也是OK的。-注意我们只是实现了gaming页面的自适应，其它页面也需要用类似的方法让AI实现。
注意，要实现屏幕自适应我们代码中的所有与大小尺寸相关的单位都不能使用px，而是使用rpx。
比如以下wxss代码中的单位都是rpx就是OK的。
二、游戏页面优化
Ai指令：
我正在用微信开发者工具开发一款小程序
现在需要你在这个基础上开发新功能，且不影响原功能，具体需求如下：
1、调整gaming页展示事件描述的容器，使其宽固定，高跟随里面的实际内容高度动态调整，但是需要设置一个最大高度。
2、当点击继续剧情使，容器内的内容展示超出最高高度时，需要自动滚动，将底部看不见的内容自动滚动上来，能全部看见，建议用scroll-view的scroll-into-view属性来实现自动滚动。
3、当一行内容过多时需要自动换行。
注意事项：
最重要的事情：每个修改的方法函数必现将修改后的完整的方法函数打印出来，不要省略原来方法中的任何代码。
1、不要修改额外的东西，当修改已经有的函数时，不要修改函数名。
2、不要在一个函数中实现多个功能方法，每个方法都单独实现，然后在需要的地方调用，注意所有函数集成到 Page 对象中
3、当某个函数方法被修改时，需要把修改后的完整的函数方法单独打印出来。
4、备注说明修改的代码块
5、新增文件/方法命名规范：首字母小写，如果是多个单词拼接的，则除首单词之外的其它单词首字母大写，示例：roleAttributeTemplate。
将gaming页的代码复制丢给Ai
等待AI输出结果，并按照AI的说明替换相关代码后运行如下。
已经实现了以上需求。
注意：Ai可能并不能一次性就解决问题，当我们替换AI的代码后，如果有没有实现的功能，需要持续反馈给Ai，让其修改，直至实现效果。
以下是我完全用AI开发的小游戏，欢迎体验。
--完--