cocos-creator使用记录27_将微信小游戏的res资源放后台


1.前言
http://home.51.com/1995494247/diary/wxitem/98405.html
在小游戏中,会首先下载你提交的完整游戏包,再运行 game.js 来启动游戏。所谓完整游戏包,
也就是开发者在微信开发者工具中所导入的资源,不管你是否需要这些资源,在玩家打开你的小
游戏时,都会被完整下载。所以为了首场景加载的体验,我们应该尽可能减小自己的小游戏包体,
将可以按需加载的资源,放在远程服务器上,用脚本进行加载。
下面是具体的小游戏包体方面的限制:
小游戏的包内体积不能够超过 4mb,包含所有代码和资源,额外的资源必须通过网络请求下载;
对于小游戏包内资源,小游戏环境内并不是按需加载的,而是一次性加载所有包内资源,然后再启动页面;
不可以从远程服务器下载脚本文件。

对于从远程服务器下载的文件,小游戏环境没有浏览器的缓存以及过期更新机制。
微信内将小游戏的文件存储空间按照用户和游戏来划分。
上面的文件系统接口,都是在这个文件沙盒环境中执行的,所有的文件目录也是相对于沙盒环境
的,所以我们不用担心不同小游戏或者不同用户之间的文件冲突。

而资源的加载流程如下:
检查资源是否在小游戏包内
不存在则查询本地缓存资源
如果没有缓存就从远程服务器下载
下载后保存到小游戏应用缓存内供再次访问时使用(按照资源相对路径保存)

Cocos Creator 打包的小游戏版本中微信提供了一个 wxDownloader 对象,用户可以给它设置 
REMOTE_SERVER_ROOT 属性。
只要用户保证 REMOTE_SERVER_ROOT 路径下的资源相对路径与 Cocos Creator 发布的资源相对
路径一致,那么再次访问同一个资源时,就会在小游戏的文件沙盒环境中找到对应的文件。

那么我们如何做到资源的更新呢?假设服务端资源内容更新了,而 url 没有变化,那么我们还是
会优先使用缓存中的资源,岂不是就没有得到更新?的确如此,那么我们解决问题的思路,并不是
从资源文件内容是否变化来判断,而是一旦内容变化就修改文件的 url。这点就依赖于 
Cocos Creator 打包时的 md5Cache 功能,这个功能会在打包时给所有资源文件的文件名附加 md5 
后缀,比如 example.png 变成 example.23j8s1.png,一旦文件内容变化,它的 md5 后缀自然会
发生变化。而所有资源文件的相对路径,实际上是在运行时由 AssetLibrary 从 settings.js 中
解析出来的。
所以开发者只要更新了新的小游戏包,包含最新版本的 settings.js,那么所有资源的路径就得到
了更新,自然会从服务端请求最新版本的资源。由此还可引申出多版本共存的方案,就是不同版本
的游戏,指向不同的 REMOTE_SERVER_ROOT 服务器路径,可以保障不同版本都可以访问,并且不会
出现资源的冲突或缺失。

2.实际操作步骤
构建你的项目,进入生成的打包文件夹,如下:
你的项目名字
--wechatgame
  --libs
  --res
    --import         //界面布局json文件
    --raw-assets     //你的项目的资源
    --raw-internal   //引擎默认图片资源
  --src
    --project.js
    --settings.js
  --cocos2d-js-min.js
  --game.js
  --game.json
  --main.js
  --project.config.json

找到game.js,打开如下:
require('libs/weapp-adapter/index');
var Parser = require('libs/xmldom/dom-parser');
window.DOMParser = Parser.DOMParser;
require('libs/wx-downloader.js');
wxDownloader.REMOTE_SERVER_ROOT = "";
wxDownloader.SUBCONTEXT_ROOT = "";
require('src/settings');
require('main');

其中wxDownloader.REMOTE_SERVER_ROOT就是你后台资源的url。
放到后台的资源就是res下的资源,如下是我保存在后台的资源路径:
https://www.mysite.net/myproject/1.0.1/res/raw-assets
对应的
wxDownloader.REMOTE_SERVER_ROOT = "https://www.mysite.net/myproject/1.0.1";

可以看到,我是以版本号作为下载资源的文件夹名字,等到下一个版本,就可以新创建一个
1.0.2文件夹,放入对应的res资源。
另外,使用不同文件名的方式,并不能避免网页会有缓存资源的情况,必须要勾选“MD5缓存”。

针对以上,creator在构建发布面板提供了填写以上资源路径的地方,如下
远程服务器地址:https://www.mysite.net/myproject/1.0.1
这避免了每次构建后,game.js都会重新生成,以至于每次都要手动设置wxDownloader.REMOTE_SERVER_ROOT的问题。

另外,还要登录微信公众平台,进入你的项目的“设置”页面,进入“开发设置”页面,设置服务器域名:
downloadFile合法域名: https://www.mysite.net

最后删除res文件夹,这一步,你要先关闭主域项目、子域项目、微信开发者工具,否则win7会提示你有程序在
使用res文件夹,然后再打开微信开发者工具,上传构建后的项目。

3.实际使用的经验
首先,将资源放到服务器,在打开小游戏时,微信并不是讲所有资源下载完才进入游戏的,而是只下载所有场景必要
的资源,即若你有动态加载的资源,此时并不会下载,而是等到用到时,再下载。即,若你的关卡时动态加载的,
若你的手机在进入下一个关卡前断开网络,那就显示不了下一个关卡了。
 

猜你喜欢

转载自blog.csdn.net/haibo19981/article/details/81224309