当前位置：首页 > news >正文

如何用AI开发完整的小程序＜8＞—让AI制作具体功能

news 2025/6/23 9:37:15

之前主要介绍了如何让AI制作UI界面，接下来让它制作具体的功能。

我依然以“修仙太难了”为例，如下图。

这个游戏主功能比较简单，开始游戏后会自动随机生成一些事件，然后根据事件增加或者减少属性，直到玩家死亡，游戏结束。

不过要完整实现这个功能稍微有点复杂，这里我只实现一个小功能，具体需求如下：

1、点击踏入剧情——进入游戏页面——随机生成1个事件

2、点击继续剧情——随机生成一个事件

3、点击退出游戏——返回开始界面

接下来我们开始制作

一、创建游戏页面

在app.json中添加gaming页面

备注一般新增页面后最好重启一下微信开发者工具，才能生效

二、点击踏入仙途跳转到gaming页面。

AI指令：

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

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

1、点击gameStart的页面跳转到gaming页面。

2、gaming页面的相对路径：pages\gaming

注意事项：

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

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

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

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

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

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

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

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

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

gameStart的相关代码如下：

将gameStart.js和gameStart.wxml页的代码复制给AI

说明一下为什么要将gameStart.js和gameStart.wxml的代码丢给AI。

因为一个按钮的功能是由这两个文件决定的，我们在wxml中找到-踏入仙途-的代码如下：

<button class="main-btn" bindtap="onStartJourney">踏入仙途</button>

里面有一段代码bindtap="onStartJourney"，这个代表这个按钮绑定了一个点击事件onStartJourney。当我们点击这个事件的时候就会执行一个叫做onStartJourney的方法，而onStartJourney这个方法具体干什么是在gameStart.js里面实现的。

这里我们只需要了解这个逻辑就行，具体功能还是让AI实现。

接下来我们将AI编写的代码复制到原代码中。

注意这时候AI输出的代码中可能就只保留了修改或新增的部分，我们要注意区别。

先在gameStart.js中去搜索他修改的这个函数名onStartJourney: function，找到后直接复制AI给的代码进行替换。

如果原代码中没有这个方法，再完整粘贴进去。

另外AI有时候编写的代码不一定正确，比如上面图种AI给的跳转方法里面的url就不正确

正确的应该是：url: '/pages/gaming/gaming'

然后点击踏入仙途后就可以跳转过去了，示例如下：（我隐藏了顶部菜单栏-之前有介绍如何隐藏）

这时候没有返回按钮，点击顶部的编译按钮-重新编译一下就返回开始页了。

三、制作游戏数据

之前我说了“修仙太难了”每点击一次继续剧情，随机一个事件描述出来，我正常的游戏中目前已经填充了3800+条事件。

如果把这些数据都放在gaming.js的代码中，会很不好维护，为了解决这个问题，我们可以单独把这些事件数据制作成一个独立的配置文件，然后在gaming.js中调用。

另外在实际制作中这么多的数据平时要修改啥的如果在配置文件中进行也会很麻烦，为了解决这个问题，我们可以先设计一个excel表格——命名为gamingText

表格的第一列：ID——相当于给右边的描述Describe编号，且这个编号不能重复，这个完全由自己决定怎么编号。

表格第二列：Describe——我让AI随机生成了50条修仙梗，填进了表格里。

现在我们让AI将这个Excel表格转换成代码可以识别的数据。具体操作如下

1、使用豆包AI上传创建的Excel文件（注意目前我测试下来豆包最好用）

2、上传完成后输入以下命令-这里最好关闭深度思考

将该文件转成.js，并且按照 CommonJS 模块的格式导出数据。

重点说明：第一行是表头。中文字符不能被转义。describe描述中的标点符号只能用中文的。

格式示例：每一个属性都要换行

const attributeTemplateData = {

"attributeTemplate": [

{

"id": 1001,

"attributeName": "道号",

"attributeClassDes": "基础信息",

"attributeClass": 1,

"mixValue": null,

"maxValue": null

格式说明：文件头const attributeTemplateData其中attributeTemplateData中的attributeTemplate取文件名。然后"attributeTemplate": [里面包含数据，"attributeTemplate"取文件名。

最后添加类似这样的方法：

module.exports = {

openWorldEventData

};

然后豆包就会生成一个game.js文件-示例如下图

我们把这个文件下载下来存放到项目中

为了方便管理可以创建一个单独的文件夹，将这个文件丢到里面，如下图我单独创建了一个config的文件夹

备注，有时候AI转换的文件会有问题识别不出来，这时候重新转换1次即可。

三、正式开始制作功能

Ai指令：

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

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

1、当用户进入gaming页面的时候首先随机生成一个事件描述，并展示出来，事件描述从gamingText.js（相对路径：config\gamingText.js）文件中获取，仅展示describe中的数据即可，gamingText.js中的数据格式示例如下：（打开gamingText.js-完整复制前面的两行数据-给AI参考）

const gamingTextData = {

"gamingText": [

{

"id": 10001,

"describe": "渡劫失败竟是因为邻居 WiFi 信号太强干扰灵气波动"

{

"id": 10002,

"describe": "刚筑基就发现金丹期大佬在楼下开煎饼摊"

2、当用户点击界面底部的继续剧情按钮时，在之前的事件描述下面，再随机1条describe展示出来。

3、所有的事件描述展示在一个独立的容器里面，设置一个最大高度，当内容超出高度时，自动滚动展示超出的内容。

4、当用户点击界面底部的返回主页按钮时跳转到"pages/gameStart/gameStart",（直接从app.json中复制链接）页面。

5、UI界面由你先自行设计，要求黑色主题。