本公众号由以下老铁赞助,感谢他们❗️
我个老司机,好久没写项目遇到个问题差点翻车,在此记录下全流程。
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. 只能使用 HTTPS 与 WSS 协议。
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 在浏览器上检查一下,确实打不开:



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

打开微信扫码运行,效果正常!
05、
直到最后,我才发现当初的问题所在。
回过头去,再看前面老铁发给我的问题,我当时完全被他标注的红框中的代码给锁定了。

完全没注意到,上方写的注释:当复用其它项目的 Assets Bunlde 时
这几个字。
而且,就在这句注释上面,就有 Bundle 加载的示例,在当前项目加载 Bunlde 直接用 Bundle 名字就行了。

关于 Bundle 加载失败的问题,时常会有人遇到。希望本篇内容能对你有所帮助,如果有用感谢点个赞吧!
以下是广告请按需享用
像使用 PPT 一样,学会使用 Cocos Creator 引擎编辑器、多平台打包构建、游戏换皮、常用内置组件的使用,以及广告SDK通用组件拿来就用。为此,晓衡准备换个姿势帮助『非游戏开发者』快速入门 Cocos 游戏开发!
下面是两篇免费试读章节:
《入门篇 | 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
专栏教程配套源码请加小助手微信 tddrap 领取!