微信小游戏开发,如何加载远程zip资源包?

本公众号由以下老铁赞助,感谢他们❗️

我个老司机,好久没写项目遇到个问题差点翻车,在此记录下全流程。

01、

就在上周末,有老铁在微信问 Cocos Creator 3.8 是否支持 Bundle 远程 zip 压缩方式加载。

我一看到消息,想都没想一下就回复说:可以,这不是官方文档里明明就写了的嘛!

可是,话刚一发说这位老铁马上就发来截图说,按文档操作没搞定。而且他还相对委婉地说:好像-不太-行!

这时我"认真"看了下文档,他是按文档操作的还是不行,怎么会呢?

这位老铁是想远程加载资源,多半是做的小游戏项目,小游戏项目每个分包有4M限制。

使用 Bundle + 远程加载分包来解决这个问题,这是很常见的解决方案,Cocos Creator 引擎老早就支持的。

zip 资源不会是自己压缩,自己写的一套加载方式吧!我赶紧问。

果不其然,是我猜错了!

一下子让我为之郁闷了起来,看来要翻车,当时我没在电脑前,只好回一句,先检查下路径、跨域、看看是什么报错提示。

02、

在一路回家的路上,我也琢磨着起来我记得 Store 上,有哪位大佬的项目是用过 Bundle 加载的。还好我对 Store 上的资源如数家珍,很快就找到了二喵的 Jare World 

这个游戏的玩法是,一只帅气的小鸡在一个庄园里找月饼的故事!这里就不多说了,我立即看了下 Bundle 是怎么设置的。

这个项目是使用的 3.6 的引擎,看样子,只是用的默认的合并依赖我切换到微信小游戏也是一样,没有使用 zip 压缩包。

就在这个项目上将 Bundle 改成 zip 类型,马上试一下不就行了,说干就干!除了将 Bundle1 目录设置为 zip 外,我在构建面板上,将主包也设置成了 zip 格式。

不过构建面板上警告,没有配置远程服务器地址的话,配置远程主包会失败。

不过还好的是,引擎提供有内置 HTTP 服务器,可用于开发调试。

勾选使用构建内置服务器选项,点击构建,先在微信模拟器上跑起来看看再说!

啊!报错了。看看具体是什么意思,找到一行关键字:

fail url not in domain list

翻译来意思是:失败url不在域名列表中!这里要说重点一下,小游戏加载远程资源,是有前置条件的。登录微信小游戏管理后台,开发管理-服务器域名中可以看到:

再看微信官方文档,关于网络、远程服务器配置的注意事项。

任何远程网络访问,都需要这里填写相关服务器的地址,而且有两个关键点:

  1. 1. 只能使用 HTTPS 与 WSS 协议。

  2. 2. 域名需要 ICP 备案。

有朋友可能对 HTTP 与 HTTPS 不太了解,可以看下 DeepSeek 的解释。

总结就是,HTTPS 是 HTTP 的安全升级版,通过加密、身份验证和数据完整性保护,大幅提升网络通信的安全性。 WSS 协议是 WS 协议的安全升级版,也就是游戏中使用到了 WebSocket 的地方。

是不是好麻烦呀!

还好的是,微信也为开发者提供有开发调试的选项,不然游戏还没做起来,又是购买服务器、又是注册域名、又是域名备案、还要购买 HTTPS 协议证书......

具体怎么做呢?

只需要在微信开发者工具中,右上角点击【详情】→【本地设置】勾选不校验合法域名...选项的选项,游戏就运行起来了。

图上有一个报错,是在手机浏览器上开启全屏显示,但在微信小游戏中这个 API 是不支持的,这里就不用管它了。

03、

怎么确认是从远程加载的 zip 资源呢?在微信小游戏的资源管理器中,找到 remote 目录,这就是引擎生成的远程 Bundle 资源。

在 Network 调试器中搜索 zip ,可以看到对应加载到的 3 个 zip 文文件的 URL 地址是:http://192.168.50.84:7456/build/wechatgame/remote/Bundle1/res.zip

再看下别的文件URL呢?以引擎构建目录中的 cocos-js/cc.js 为例:

可以看到,URL路径是以 http://127.0.0.1 开头,这已经说明游戏是从远程 zip 文件中加载的资源。

不过,我想再把稳一点,将构建目录中的 remote 文件夹删除,看是否能正常运行。反正他可以从远程加载的嘛!

不过,在删除之前还是要复制一份出来才行,而且还要单独启动一个 HTTP 服务器来放远程资源包。

在我电脑上,最简单的就是使用 Node.js 的 http-service 命令行工具了。如果你没有可以用 npm install -g http-service 安装!

打开命令行终端进入 reomte 目录,运行 http-service 命令,将当前目录做为 HTTP 服务器,浏览器上输入 URL 确认访问正常。

现在有了远程服务器了,需要重新构建一下微信小游戏,并配置上远程服务器地址。

配置好后再次构建,在微信开发者工具中运行!

啊!报错,有几个 JSON 文件读取不到。复制出 URL 在浏览器上检查一下,确实打不开:

原来是引擎在加载远程服务器地址上,还会默认加一个 'remote' 的路径后缀。因此,我在 romte 目录下再新建一个 remote 目录,将构建出的几个 Bunlde 目录移进去,目录结构如下:
现在终于可以删除构建目录中的 remote 文件了,这样极大减小包体空间。看下效果,游戏正常在微信开发者工具中运行起来了。

04、

再保险一点,手机上运行看下呢?用微信的代码包依赖分析工具看现在的主包只有2.67M,远小于4M,完全可以手机上测试。

在微信开发者工具上点击【预览】按钮,经过一阵编译与上传出现测试二维码。

打开微信扫码运行,效果正常!

05、

直到最后,我才发现当初的问题所在。

回过头去,再看前面老铁发给我的问题,我当时完全被他标注的红框中的代码给锁定了。

完全没注意到,上方写的注释:当复用其它项目的 Assets Bunlde 时 这几个字。

而且,就在这句注释上面,就有 Bundle 加载的示例,在当前项目加载 Bunlde 直接用 Bundle 名字就行了。

关于 Bundle 加载失败的问题,时常会有人遇到。希望本篇内容能对你有所帮助,如果有用感谢点个赞吧!


 以下是广告请按需享用 

像使用 PPT 一样,学会使用 Cocos Creator 引擎编辑器、多平台打包构建、游戏换皮、常用内置组件的使用,以及广告SDK通用组件拿来就用。

为此,晓衡准备换个姿势帮助『非游戏开发者』快速入门 Cocos 游戏开发!

换个姿势入门Cocos游戏开发》小报童专栏,原价¥199,首发¥19.9 每满百人涨价!晓衡计划保底不低于50篇内容。目前已更新34篇, 并开启合伙人计划(60%分销) 一 起实践,游戏开发, 副业 变 现!

Image

下面是两篇免费试读章节:

  • 《入门篇 | 02 构建你的第一个H5游戏》

    https://xiaobot.net/post/81a06aa8-8fe0-4f03-9004-09698621e6ad

  • 《入门篇 | 04 引擎编辑器—资源管理》

    https://xiaobot.net/post/ba0e6815-7209-4553-8e5f-d59f03bb6647

  • 《基础篇 | 02 将游戏运跑在微信小游戏上》

    https://xiaobot.net/post/53a4af47-74f0-4c97-b084-175ab1886fd9

Image

专栏教程配套源码请加小助手微信 tddrap 领取!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值