Cocos Creater 敏捷开发之插件开发

Cocos Creater插件的开发
1：首先说为什么要去插件啊，插件这个东西是帮助敏捷开发，比如说你要开发原生的游戏，可能会接一些SDK，这些SDK大部分走的都是Java或者OC，你不可能每次打包都去添加一遍原生的代码吧!那也太麻烦了，写插件的目的就是为了让其在构建的时候，自动将Java和OC的代码自动写入工程，这样你就可以省去很多的麻烦。接下来，我会写一个简单的例子来抛砖引玉。
2：例子：给微信小游戏添加数据分析，目前的准备接入TalkingData, 接入方法如下：

然后我们再去CocosCreater 的官方看一下插件开发的方法:
https://docs.cocos.com/creator/manual/zh/extension/your-first-extension.html
大致意思就是，你需要创建一个文件夹，main.js 和package.json,最基础的试这个样子：
按照官方的文档，我们来写一下插件的配置：

然后是main.js的内容，我们先直接拷贝官方文档里面的一些基本的方法，内容如下：

这里简单说一下这个方法的作用：load（）是插件被成功加载的时候执行的方法，
unload 是被卸载的时候执行的方法，message 里面的内容是与package.json的main-menu的内容方法名对应的。插件最基本的内容已经搞定，现在导入CocosCreater 的工程可以试一下看看是否能被识别，如果识别就说明配置成功了。创建一个工程，然后导入刚才写的插件到工程的packages文件夹下即可，

看到红框的内容说明插件已经识别成功了。
目前遇到的坑：
(1) package.js 的内容是一定要细心，写错一个字母插件可能就会识别失败;
（2）package的name属性必须全是小写字母；
（3）main-menu 的内容一个地方必须保持一致，否则时间无法触发；如下，
如果不一致会报错，如下：

如果不够细心的话，可以直接去官网拷贝，然后修改就可以了，机智如我。
3：插件的核心内容开发
从talkingdata的SDK文档中可以知道，插件需要做的工作是：
1：将其中的tdweapp-conf.js和tdweapp.js文件放在您的项目的同一文件夹中，这个文件可以是微信小游戏构建之后的src文件夹下即可
2：在game.js文件开始，引入tdweapp.js文件，示例如下：
var tdweapp = require(’./sdk/tdweapp.js’);
3:将小游戏的配置信息填入tdweapp-conf.js文件，这个自己手写就可以不需要把功能写到插件中去。
ok,需求分析完成,那么接下开始写main.js 的业务逻辑了。
写代码之前要先把要拷贝的文件方法插件的文件夹下如下：

大概是这个样子：首先要监听引擎的的事件：before-change-files，要在插件被load的时候加载，下载的时候移除；
监听：Editor.Builder.on(‘before-change-files’, handleEvent);
移除：Editor.Builder.removeListener(‘before-change-files’, handleEvent);
如下：与之对应的事件是：handleEvent，在handleEvent 的函数里面需要进行平台判断，我们做的是微信小游戏即：

function trackBuildEvent的函数是固定的写法，主要是用来触发构建的事件。下面才是真正需要做的事情；
（1）修改game.js文件，因为要用到路径的信息和文件的操作，所以需要引入两个库即：
const Path = require(‘fire-path’);
const Fs = require(‘fire-fs’);
代码如下：

接下来是讲解时间：
（1）首先，取得路径，即option.dest,这个路径指的是：构建之后的项目目录，微信小游戏来说就是build/wechatgame,
(2) Path.join()，方法是连接路径 得到的结果是game.js的路径
(3) Fs.existSync 确定game.js 的文件是否存在，要修改文件必须要先把文件读到内存，即Fs.readFileSync,
(4) 修改文件是通过字符串的replace方法取代将想要写入的内容写入即可
(5) 将修改过后的字符串重新写入文件，即：Fs.writeFileSync,
最后一步是：将TalkingData的库文件拷贝到wechatgame/src文件下，即上图中的_copyFsupportFile方法，如下图：

这个方法用到的API基本上已经在上个方法里面已经说过了，用到的都差不多，接下我们打包一下看看所有的操作是否生效：先查看一下src文件夹下面是否有talkingData的两个文件：

是的成功了，game.js 文件也是：

现在是没有勾选MD5的，如果勾选了Md5的话，是否可能正常的引用呢？我们打包试一下：

再看一下game.js的文件中引用的md5值是否一致：

是的，我们可以看到是一致的，说明cocos creater 引擎官方做了相应的适配吧
总结：插件是为了开发方便，插件是可以针对每一个平台的开发，今天的例子比较简单，如果是android,Ios ，也是可以开发的，只是再多加几个判断而已。main.js的代码有些不详细的地方，其实我也是不是很了解，也是从官方的插件中，边猜边测试的试探中得出的结论，如果大家想开发更复杂的插件，也可以参考官方文档去开发或者是在cocoscreater 的安装目录下找到官方的FB插件，那个是android和IOS平台的相对来说复杂一些，API的使用来说其实是大同小异。FB的插件具体位置是在CocosCreator\resources\builtin文件夹下，有兴趣的可以自己去开发一些插件，谢谢观看