CocosCreator中插件开发介绍（一）

摘要

以前写了一个生成热更新配置文件的插件没有记录下流程，导致现在想在写插件时发现脑袋空空(我是谁，我在哪)，所以在此简单记录一下插件开发流程，具体相关资料请查阅官方文档。

版本说明

使用 CocosCreator 的 2.4.3 版本。

开始

创建项目：

打开CocosCreator引擎点击上方扩展–>创建新扩展插件–>选择一个安装路径即可，如下图：

img_name

文件介绍：

项目创建完以后我们打开创建的文件路径，这里我是创建在项目中的，扩展包的结构大致如下：

hello-world
  |--panel        存放界面的文件夹
  |--main.js      入口程序
  |--package.json 包描述文件

注:将该文件夹放入到 ~/.CocosCreator/packages（Windows 用户为 C:\Users\${你的用户名}\.CocosCreator\packages），或者放入到 ${你的项目路径}/packages 文件夹下即可完成扩展包的安装。

定义你的包描述文件：package.json （官方文档）

每个包都需要一份 package.json 文件去描述他的用途，这样 Cocos Creator 编辑器才能知道这个包要扩展什么，从而正确加载。值得一提的是，虽然 package.json 在很多字段上的定义和 node.js 的 npm-package 相似，它们仍然是为不同的产品服务的，所以从 npm 社区中下载的包，并不能直接放入到 Cocos Creator 中变成插件，但是可以使用它。

{
  "name": "hello-world", 
  "version": "0.0.1",
  "description": "一份简单的扩展包",
  "author": "张佰万",
  "main": "main.js",
  "main-menu": {
    "newPackages/Hello World": {
      "message": "hello-world:open"
    }
  },
  "panel": {
    "main": "panel/index.js",
    "type": "dockable",
    "title": "窗口",
    "width": 400,
    "height": 300
  }
}

解释：

name String - 定义了包的名字，包的名字是全局唯一的，关系到今后在官网服务器上登录时的名字。插件若要上传到 Cocos Store，对包名有一定的限制，只允许使用 小写字母、数字，连字符（-）、下划线（_） 和 点（.），并以 小写字母 或数字开头。
version String - 版本号，我们推荐使用 semver 格式管理你的包版本。
description String（可选） - 一句话描述你的包是做什么的。
author String（可选） - 扩展包的作者
main String (可选) - 入口程序

main-menu Object (可选) - 主菜单定义

定义方式：

1.显示在最上方

"main-menu": {
    "newPackages/Hello World": {
      "message": "hello-world:open"
    }
  }

img_name

2.在扩展中才可以看到

"main-menu": {
    "i18n:MAIN_MENU.package.title/newPackages/Hello World": {
      "message": "hello-world:open"
    }
  }

img_name

panel 目前编辑器扩展系统支持每个插件注册一个面板，面板的信息通过 panel 字段对应的对象来申明。其中 main 字段用来标记面板的入口程序，和整个扩展包的入口程序概念类似，panel.main 字段指定的文件路径相当于扩展包在渲染进程的入口

入口程序：

每一个插件都可以指定一份入口程序，入口程序是在 主进程 中被执行的。通常我们会在入口程序中：

初始化扩展包
执行后台操作程序（文件I/O，服务器逻辑）
调用 Cocos Creator 主进程中的方法
管理扩展面板的开启和关闭，以及响应主菜单和其他面板发送来的 IPC 消息

当你定义好你的描述文件以后，接下来就要书写你的入口程序 main.js 了。定义如下：

'use strict';

module.exports = {
   // 当扩展包正确载入后，将会执行用户入口程序中的 load 函数。我们可以在这里做一些关于扩展包本身的初始化操作。
  load () {
   
  },
  
   // 当扩展包卸载进行到最后阶段，将会执行用户入口程序中的 unload 函数。我们可以在这里做一些扩展包卸载前的清理操作。
  unload () {
    
  },

  messages: {
    'open' () {
       // 激活我们的面板窗口
      Editor.Panel.open('hello-world');
      
    }
  },
};