pbkiller1.0已经上线Cocos商店，支持了微信小游戏环境，我录制了一段小视频，演示pbkiller的使用流程和方法。

在「奎特尔星球」除了介绍插件、工具以外，更重要的是将这些插件、工具的实现原理和方法分享给大家，共同学习一起进步。

我曾在公众号上发过一篇《微信小游戏protobuf.js快速解决办法》，在这里给大家说声不好意思，这篇文章中的proto加载方案存在缺陷，具体问题如下图所示：

当a.proto文件中import了b.proto文件，在成功加载a.proto文件后protobufjs内部在解析a.proto时会自动加载b.proto，此时会触发XMLHttpRequest API的调用，导致在微信小游戏环境出现错误。

一、protobuf.js加载源码分析

还是从protobuf.js源码入手，我增加了一些注释，方便理解：

ProtoBuf.loadProtoFile = function(filename, callback, builder) {
   //参数解析,检查callback参数是否有效
   if (callback && typeof callback === 'object')
       builder = callback,
       callback = null;
   else if (!callback || typeof callback !== 'function')
       callback = null;   //callback存在，使用异步加载
   if (callback)
       //使用ProtoBuf.Util.fetch函数异步加载，
        //注意这里的写法很不爽，调用fetch函数后立即return了
       return ProtoBuf.Util.fetch(typeof filename === 'string' ? filename : filename["root"]+"/"+filename["file"], function(contents) {
           if (contents === null) {
               callback(Error("Failed to fetch file"));
               return;
           }
           try {
               //加载成功，调用ProtoBuf.loadProto函数解析contents变量，转换为proto对象，通过callback函数返回
               callback(null, ProtoBuf.loadProto(contents, builder, filename));
           } catch (e) {
               callback(e);
           }
       });
 
   //callbcak不存在，使用同步方式，
    //通过ProtoBuf.Util.fetch的返回值，获取文件数据
   var contents = ProtoBuf.Util.fetch(typeof filename === 'object' ? filename["root"]+"/"+filename["file"] : filename);
   //加载成功，调用ProtoBuf.loadProto函数解析contents变量，转换为proto对象，通过return返回
   return contents === null ? null : ProtoBuf.loadProto(contents, builder, filename);
};

从源码中可以看出，protobufjs有两种加载模式：同步与异步。

在《当creator遇上protobufjs|相遇》 一文中我们分析过ProtoBuf.Util.fetch函数，这里简单回顾一下：

浏览器：使用XMLHttpRequest实现的同步、异步的proto文件加载。 nodejs：异步使用fs.readFile，同步使用fs.readFileSync Cocos-JSB：我们介绍了伪装fs模块的办法调用jsb.fileUtils.getStringFromFile来解决。

微信小游戏环境我的理解是：阉割+定制过的浏览器，它没有提供XMLHttpRequest API，这是导致protobuf.js失败的原因。

后来我又尝试了在protobufjs 6.x中使用的方案，在ProtoBuf.loadProtoFile函数，使用cc.loader.load代替ProtoBuf.Util.fetch，采用异步加载的方式，同样存在存问题。

在遇到问题时，以个人的能力不能很好的解决时，去逛一逛论坛是一个不错的想法。当我把问题一提出，第二天就有一位ID叫a1990091的热心朋友提供了一个思路：重写ProtoBuf.Util.fetch函数，在函数中检查当前是否为微信小游戏环境，然后可以利用微信提供的api去实现加载：

此方法做的非常的漂亮，分别检测了JSB\微信\Web环境，提供不同的加载实现。可对我来说，的遗憾是pbkiller库对外一直提供的是同步加载方法，改为异步加载，对已经使用pbkiller用户不太友好，同步、异步如取舍呢？

二、救命稻草cc.loader

发完帖从论坛回到问题上，不能解决估计是睡不着了，头脑中一阵自言自语言，忽然想到cc.loader.getRes同步获取资源的接口与ProtoBuf.Util.fetch的同步方式一样，能否从这里下手呢？

在这里先简单介绍一下cc.loader下的系列load函数。

1. cc.loader.load(url, callback)

cc.loader.load的url参数是从项目发布的根路径开始的完整路径，因此需要借助cc.url.raw函数来获取完整路径。

例如：加载文件assets/resources/a.json

cc.loader.load(cc.url.raw('resources/a.json'), (error, json) => {
   cc.load(json);
});

cc.loader.load除了可以加载当前项目资源，更重要的能力是加载其它远程服务器上的资源。只需要给出完整路径即可，但在浏览器上使用需要注意跨域问题。

加载当前项目下resources目录下的资源，使用cc.loader.loadRes更为简单。

更多用法请参考API文档：

http://docs.cocos.com/creator/api/zh/classes/loader.html#load

2. cc.loader.loadRes(url, callback)

cc.loader.loadRes的url参数路径是以resources为根路径。

例如：加载文件assets/resources/a.json

cc.loader.loadRes('a.json'), (error, json) => {
   cc.load(json);
});

cc.loader.loadRes的用法比cc.loader.load简单很多，也有没那么多参数重载的用法，API文档链接：http://docs.cocos.com/creator/api/zh/classes/loader.html#loadres

3. cc.loader.loadResDir(url, callback)

cc.loader.loadResDir顾名思义它是加载一个目录（及子目录），url同样以assets/resources目录作为根路径。

例如：加载文件 assets/resources/json目录下有a.json、b.json两个文件

cc.loader.loadResDir('json', (error, array) => {
    //array中包含a.json和b.json的内容
   cc.log(array);
});

4. cc.loader.getRes(url)

cc.loader.getRes是cc.loader家族中唯一的同步资源获取函数。但是它有一个前提，需要被cc.loader.loadXXX加载成功过的资源才能使用，不然它会返回null。

例如：加载文件 assets/resources/json/a.json

//jsonA为null
let jsonA = cc.loader.getRes('json/a.json'); cc.loader.loadResDir('json'), (error) => {
    //此时获取jsonB才有效
   let jsonB = cc.loader.getRes('json/b.json');    
});

这里分享一个查看cc.loader缓存资源的一个方法，在浏览器中运行你的项目，在调试控制台上输入：cc.loader._catch，你会看到如下内容：

cc.loader._catch对象中的所有资源，都可以使用cc.loader.getRes获取。讲到此处，我猜你已经大概知道怎么使用cc.loader.getRes解决微信小游戏中proto的加载问题了。

三、cc.loader.getRes移花接木

从分析cc.loader的系列加载函数，cc.loader.getRes去代替ProtoBuf.Util.fetch，同样使用同步方式，这样pbkiller.loadAll/ pbkiller.loadFromFile的接口用法可以保持不变。

要想cc.loader.getRes的返回值有效，需要预先将资源加载到cc.loader的缓存中，因此提供了一个pbkiller.preload函数

let ProtoBuf = require('protobufjs');
preload(cb) {
    //运行时动态修改ProtoBuf.Util.fetch为cc.loader.getRes
   ProtoBuf.Util.fetch = cc.loader.getRes.bind(cc.loader); 
    //使用cc.loader.loadResDir加载resources/pb目录所有文件
   cc.loader.loadResDir('pb', (error, data) => { 
        //通知调用都，预加载完毕
       cb();
   });
}

简单几行代码解决了所有问题，而且没有修改protobuf.js任何一行源代码。再看下如何使用预加载函数：

//预先加载proto文件到引擎缓存
pbkiller.preload(() => {
 //加载所有proto文件并动态生成proto对象
 let pb = pbkiller.loadAll();
 //实例化proto对象
 let player = new pb.grace.proto.msg.Player();
 ...
});

在实际项目中可以提前执行pbkiller.preload，以前所有的pbkiller的用法保持不变，利用javascript的动态属性赋值，特别是可以修改函数指针，基本上可以做到为所欲为，而且不需要修改源代码，有没有觉得特别爽呢？

四、结束

pbkiller的内核是protobuf.js，我所做的工作只是将protobuf.js适配到Cocos-JSB和微信小游戏环境，让其能正常工作。希望我的经验能对你有所帮助，愿pbkiller能为你节省时间，提高效率！