Cocos微信小游戏资源热更方案

发表于 | 分类于

由于小游戏4m的限制，游戏资源大多只能放在远程服务器上，Cocos也在第一时间做了很好的支持。

1
2
require('libs/wx-downloader.js');
wxDownloader.REMOTE_SERVER_ROOT = "https://dev.zovew.com/Json/";

这里设置的REMOTE_SERVER_ROOT便是远程资源的根路径，游戏构建完成后直接把res文件夹放到此路径下即可。

Cocos资源寻找顺序为

  1. 本地
  2. 缓存
  3. 服务器

且资源可以使用MD5Cache，MD5值加入了文件名。文件修改后，MD5变化，文件名随之改变，避免了读取缓存的问题。

但是这个地方有个小尴尬，当增加某些游戏资源时(比如增加几个关卡)，代码也需要更新，因为Cocos的游戏资源全部都注册在了settings.js文件中。

upload successful

动态增加游戏关卡，实现的方案也有其他，可以根据接口数据，动态绘制关卡，但是工作量庞大，策划人员后台配置新关卡也麻烦。作为一个懒人，十分不想这么办。

这个settings文件打开看了一下，发现了一个好方案：
这个settings.js里面只是一段Json而已，服务器返回这段Json可以有同样的作用。

修改后的game.js

1
2
3
4
5
6
7
8
9
10
11
12
13
require('libs/weapp-adapter-min');
var Parser = require('libs/xmldom/dom-parser');
window.DOMParser = Parser.DOMParser;
require('libs/wx-downloader.js');
wxDownloader.REMOTE_SERVER_ROOT = "https://dev.zovew.com/Json/";
wx.request({
  url: 'https://dev.zovew.com/Json/setting.json',
  success: (res) => {
    var response = res.data;
    window._CCSettings = response;
    require('main');
  },
});

–补充–
wx.request在手机表现有问题

1
2
3
4
5
6
7
8
9
10
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status < 400)) {
    var response = xhr.responseText;
    window._CCSettings = JSON.parse(response);
    require('main');
  }
};
xhr.open("GET", 'https://dev.zovew.com/Json/setting.json', true);
xhr.send();

这两种方式在开发工具里是ok的，真机测试只有XMLHttpRequest可用，尚不明原因。

经测试，完全ok~~~

下面是完善后的微信项目，settings.js已删除，game.js、main.js、cocos2d-js-min.js几乎不改，project.js是游戏代码，不再使用MD5，改为版本号了。框架搭好，project也是可以不动的。因为修改了project又要提交审核了。

upload successful

坑点：微信开发工具的缓存死活清不掉，settings.json明明更新了，清缓存清cookie各种清+重启都不行，建议拼接个时间戳：

xhr.open(“GET”, wxDownloader.REMOTE_SERVER_ROOT + ‘/settings.json?’ + (new Date().getTime()), true);

—项目模板地址 Github—
（自行修改服务器地址）