微信小游戏限制主包大小4MB

子包可拥有额外4MB空间

然而这往往还是不够

因此对于更大一些的游戏,就需要设置远程资源服务器的方式

来加载更多的资源

首先官方文档(非常简略)

http://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame.html?h=remote

详细攻略如下

转载请注明原文出处https://www.cnblogs.com/billyrun/articles/9798387.html

 

1.CocosCreator工程设置REMOTE_SERVER_ROOT

在微信输出目录(类似/output/wechatgame/game.js)

设置game.js中的REMOTE_SERVER_ROOT

wxDownloader.REMOTE_SERVER_ROOT = "https://xxx.yourhost.com/xxx";(注意目录截止位置,没有/res)

默认未设置状态是这样的

wxDownloader.REMOTE_SERVER_ROOT = "";或wxDownloader.REMOTE_SERVER_ROOT = "undefined";

为了不要在每一次打完包都去手动设置这个东西

可以在build-templates里面的game.js去设置,打包会复制该文件,就不用每次手动改了

 

2.上传资源文件包

将打包生成的res目录整体放到REMOTE_SERVER_ROOT所指定的位置

放置之后大概如下

http://xxx.yourhost.com/res/
../
import/                                            16-Oct-2018 11:50       -
raw-assets/                                        16-Oct-2018 14:06       -

如果是https的貌似看不到目录结构

反正就这样放上去,要确保能访问到每一个文件

需要说明的是

实测在CocosCreator1.8版本,如果远程目录缺了某张纹理

比如某个按钮的纹理图被人为删掉了

那么这个按钮仅仅是不显示而且,其余界面正常

而在1.10版本,直接整个界面都黑掉报错了

因此要保证远程资源目录的完整性

 

3.移除部分文件,减小包体大小

此时最简单的方式,可以把res目录整体删掉

这也是官方文档中第3条所选择的方案

  1. 构建时，勾选 md5Cache 功能。
  2. 将小游戏发布包中的 res 文件夹完整的上传到服务器。
  3. 删除发布包内的 res 文件夹。
  4. 在构建发布面板中设置 远程服务地址。
  5. 对于测试阶段来说，可能你无法部署到正式服务器上，需要用本地服务器来测试，那么请在微信开发者工具中打开详情页面，勾选项目设置中的 不检验安全域名、TLS 版本以及 HTTPS 证书 选项。

这样做优点是最大化减少包大小

但对于整包大概在10M左右的程序,可能还是希望保留大部分资源在微信包内

也就是说仅删除res中的部分文件

理论上在加载资源时,留下的文件将会快速直接加载

而删掉的部分会从我们设置的远程资源服务器中获取

在1.8.x/1.9.x版本中剔除部分文件十分简单,自己看着删或者写脚本批处理都不难

而在2.0之后的版本,res打包出来的目录不再与工程目录一一对应

怎样快速剔除文件目前我还没有好的方法

补充

将需要剔除的文件放在resources目录下

获取其实际位置

例如cc.url.raw('resources/remote/pet5b.png')

得到"res/import/64/64102090-e897-459b-b00d-d274e933a4dc.png"

修改自定义打包脚本,在打包结束时先生成资源包再删除远程文件,使包体符合微信限制

# 远程资源包相关
cd ${BUILD_PATH}${FOLDER}
zip -qr ../res.zip res
# 删除包外资源
rm res/raw-assets/b3/b32e1868-7bed-47e8-9bdf-55dfbd3357d2.png
rm res/raw-assets/b4/b49304e7-dbdc-425b-a9d8-55621d7efca4.png
rm res/raw-assets/11/11f0dbed-a2f6-4c67-8618-0fcb944b772e.png
rm res/raw-assets/21/217708bb-93e8-4539-b3f8-c73f63f8b7e2.png
rm res/raw-assets/02/02016667-0698-42f2-84f1-e14a25340ba4.png

注意路径替换import/raw-assets

 

4.微信相关配置

以上3步完成后,即可从资源服务器加载资源

可能会报错如下

Tue Oct 16 2018 14:49:21 GMT+0800 (CST) downloadFile 合法域名校验出错
gamePage.html:1 如若已在管理后台更新域名配置，请刷新项目配置后重新编译项目，操作路径：“详情-域名信息”
gamePage.html:1 https://xxx.yourhost.com 不在以下 downloadFile 合法域名列表中，请参考文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

看到这个只要去公众平台设置即可

设置->开发设置->服务器域名

request合法域名
  • https://xxx.yourhost.com

一个月内可申请5次修改

本月还可修改4次
修改
socket合法域名  
uploadFile合法域名  
downloadFile合法域名
  • https://xxx.yourhost.com

注意https的问题,如果是http需要升级协议

否则只能做调试时用,无法发布面向用户使用

 

5.ZIP资源包加载与微信解压

某些情况下可以让用户把全部资源下载完毕再进行游戏

这样可以将res目录压缩成zip包上传CDN

在游戏开始后通过以下方式下载并解压

解压后的文件路径与原包内的资源位置是一致的

可以直接使用

同时REMOTE_SERVER_ROOT加载远程散列文件的方式依然可以使用

在解压完成后，资源直接从本地获取，不会走远程加载

在解压完成前，从远程获取散列资源文件

下载的过程是不会阻塞渲染进程的！

var fileManager = wx.getFileSystemManager();

// 下载资源
var downloadTask = wx.downloadFile({
    url: "https://cdn.hbabei.com/test2/test2.zip",
    success:function(res){ // 下载成功
             var filePath = res.tempFilePath; // 下载路径
              fileManager.unzip({
                          zipFilePath:filePath,   // 资源下载后路径
                          targetPath:wx.env.USER_DATA_PATH,  // 解压资源存放路径
                           success : function(res){// 解压成功
                                console.log('解压缩成功')
                           },                           
                          fail : function(res){// 解压失败
                                console.log('解压缩失败')
                           },
              })
    },
    fail : function(res){ // 下载失败
        console.log('下载失败') // 下载的进度
     },
})
// 下载资源进度
downloadTask.onProgressUpdate((res) => {
      console.log('下载的进度:' +res.progress) // 下载的进度
})

 

6.总结

以上方案可以与开放数据域/子包共存

如果有更好的方案,欢迎留言