3. 图文教你打包基于AI完成“垃圾消除小游戏”

一灰灰blog约 2350 字大约 8 分钟

上一篇使用图文的方式演示了如何从0到1借助ai生成一个可运行的小游戏，接下来我将通过图文的方式，手把手教你将上面生成的小游戏，打包出来供其他人玩耍

接下来将分别介绍常见的三种打包发行方式

接下来的动作将主要在HBuilder中执行

一、打包成H5游戏

h5游戏，主要用于浏览器直接访问玩耍，需要配置域名，没有域名的小伙伴，可以考虑一些云服务的PAGES服务来实现，接下来介绍下Cloudflare的托管部署方式

Step1. 打包

Hbuilder ，一次点击发行 -> 网站PC Web 或手机H5 如果出现下面的异常，则按照下图方式进行修正

打开项目下的 manifest.json 文件
在右边的视图中，点击重新获取按钮
- 如果没有登录的，会让你输入unicod的账号密码，登录即可
- 成功之后，就会得到下面3所示的AppID

上面问题修复之后，再次进行打包，正确的样式如下

因为接下来的演示是基于Cloudflare进行托管，所以下面的域名可以先随便填一个

然后进入上面的输出目录，将目录下的内容打包为zip文件，如下图操作

Step2. 发行Cloudflare

没有账号的小伙伴自行注册，后续教程给出完整的注册使用流程，敬请蹲守一波😄

直接进入 Workers & Pages 目录
点击create按钮，进入创建应用页面
切换Tab页到Pages -> 点击Upload assets -> 进入发布页面
输入项目名，此时会自动给你分配一个访问域名
接着上传zip压缩包
最后点击发布按钮

发布成功的页面如下，我们可以直接点击域名，看一下效果（重点说明一下：上传的压缩包，请确保index.html在最外层）

直接点击上面的域名，就可以访问我们的小游戏啦

域名是： https://sheepremove.pages.dev/open in new window

Step3. 发行到自己的服务器或者OSS托管

当然如果你有自己的服务器或者OSS，也是可以将h5游戏部署上去的，下面简单介绍下将H5游戏托管到免费的七牛云空间下

首先在oss上，创建对应的目录空间，如 /app/sheepremove

修改HBuilder中web打包的输出前缀

manifest.json 文件 -> web配置 -> 运行的基础路径
启用https协议这个看你自己的托管域名，支不支持https，支持就选中；不支持就取消
然后重新发行一次：菜单发行 -> 网站-PC

上传文件到七牛云

注意此时是文件的形式上传，不用之前的zip压缩包了

体验一下

http://cdn.hhui.top/app/sheepremove/index.htmlopen in new window

二、打包成微信小游戏

接下来我们看一下将上面的垃圾小游戏生成微信小游戏来体验一下，此时我们需要借助微信开发工具

Step1: 微信开发者工具，生成appid

将生成的appid记录出来，后续打包时会用到
注意：这里选择小程序，如果选择小游戏时，uniapp输出到微信时会报错

Step2: 打包微信小程序

配置小程序AppID

case1：运行小程序

然后hbuilder会自动打开微信开发者工具，启动我们的垃圾消除游戏 , 如下图

说明：多平台时，可能出现各种奇怪的问题，需要针对性的进行提问解决如：在微信小程序运行时，也出现了一个小问题，游戏区域未显示，同样将问题抛给Trae来修复

case2: 发行小程序

这种场景适用于我们开发完毕，准备提交给微信后台去申请上线，流程如下（由于没准备上线小程序，所以就不演示小程序上线流程了，放在后续的教程进行介绍）

三、打包成Android app

接下来我们再来演示一下如何将上面的小游戏打包成android 应用包

Step1: uniapp开发者后台配置签名

首先进入开发者后台：https://dev.dcloud.net.cn/pages/app/listopen in new window

然后点击应用，进入详情：

各平台信息 -> 点击新增
进入编辑页，依次补齐下面几个信息
Android App
正式版/测试版 -- 都可以
包名：打包出来的签名，按照惯性约定命名即可
应用签名 SHA1, SHA256 ---> 这个是基于你打包时的签名证书生成的（后续android输出篇教程详细介绍）

配置完毕之后，点击提交，返回应用列表

点击创建离线Key，再弹窗中点击创建
然后应用列表的按钮变成查看离线key
然后保存弹窗出来的appid

Step2: 打包生成Android的离线资源

菜单点击发行
依次执行 App-Andoird/IOS-本地打包 -> 生成本地打包App资源

Step3: AndroidStudio实现apk输出

这里直接使用我已经封装好的Android基础工程，跳过基于uniapp的原始项目工程的改造过程；我们接下来看一下如何基于这个基础工程来生成我们的apk包

1.拷贝资源

进入android项目的 simpleDemo/src/main/assets/apps 目录
删除目录下的文件
将上面hbuilder生成的资源拷贝进来

修改data/dcloud_control.xml中的appid

将appid改为上面文件夹名（也可以直接在uniapp的后台查看appid)

修改AndroidManifest.xml中包名和dcloud_appkey

package：Step2中填的包名
appKey: Step2中获取的离线key

修改build.gradle中的包名

Namespace: 上面的包名
applicationid：上面的包名

修改应用名和logo

应用名：res/values/strings.xml 文件中 app_name

logo: res/drawable 下的 icon.9.png

将前面生成的icon，拷贝到上面的drawable目录下，然后删除原来的icon.9.png

打包 - 步骤如下：

菜单，点击 Build
在下拉框中，选择 Generate Signed App Bundle/APK
选择APK
点击Next
输入打包证书地址、密码、别名等信息
选择release
点击create，等待下面打包成功的提示
在 simpleDemo/release 目录下可以看到输出的apk包

Step4：安装体验

直接用手机安装一下上面的apk，下面是实际的体验视频（在视频中你也会发现打开会有版本的弹窗提示，这个是uniapp的提醒，可以消除掉；以及android端的样式还需要调整下，这里就不详细展开了）

有兴趣体验的小伙伴，可以下载apk:（说明，这个安装包中集成了谷歌的测试广告，后续在apk打包篇中会介绍如何给应用加上广告变现）

APK下载地址: open in new window

演示视频，原文查看: - 毫无技术难度：由0到1基于AI完成“垃圾消除小游戏”open in new window

四、小结

这个垃圾消除小游戏的开动到apk的手机完整运行，再加上完成本篇文章，总计耗时 5 小时左右，说长不长，说短不短。

上面小游戏的所有代码全部由AI生成，我主要发挥的作用就是给ai喂我的想法、以及适当的告诉它怎么解决问题（有时候ai解决问题的速度有点让人难受），一个完整的流程下来，编程小白想要完成一个自己的h5/小程序/app游戏可能有点挑战，但是耐心怼一波，也不是不可能出现奇迹

最后我想说的一点是，AI正在飞速发展，作为一个十年的互联网的coder真心希望所有的程序员不要傲慢，你可能认为AICoding还很初级、经常制造各种垃圾，但不得不说现如今AiCoding已经对初级程序员已经发起了挑战，同时也为所有的非程序员，打开了一个实现自己想法/产品的大门。

我是一灰灰，后续我将会给大家带来更多的AICoding的系列教程，比如上面提到但是没有展开的

• 各编程工具的安装、调试、基本使用姿势介绍 • 项目开发管理的阶段性保存方案 • H5托管相关知识点：CloudFlare、GitHub Pages、自己专属服务器托管，接入Google AdSense变现 • 微信小程序的发包上线全流程 • Android的广告集成相关

3. 图文教你打包基于AI完成“垃圾消除小游戏”

# 一、打包成H5游戏

# Step1. 打包

# Step2. 发行Cloudflare

# Step3. 发行到自己的服务器或者OSS托管

# 二、打包成微信小游戏

# Step1: 微信开发者工具，生成appid

# Step2: 打包微信小程序

# 三、打包成Android app

# Step1: uniapp开发者后台配置签名

# Step2: 打包生成Android的离线资源

# Step3: AndroidStudio实现apk输出

# Step4：安装体验

# 四、小结