cocoscreator扩展编辑器菜鸟简易上手教程

cocoscreator扩展编辑器菜鸟简易上手教程

**
个人开发过程中的见解
官方文档：https://docs.cocos/creator/manual/zh/extension/
首先在项目的packages文件夹下新建一个文件夹（命名为扩展包的名字）

扩展包底下必须含有这几个文件

其中：
index.js为具体页面结构编写(若不需要弹出的panel界面则不需要)
main.js为入口程序
package.json为用途描述
接下来详细描述三个文件的内容构成首先是

package.json

{
  "name": "extended-editor",
  "version": "0.0.1",
  "description": "一份简单的扩展包",
  "author": "Cocos Creator",
  "main": "main.js",
  "panel": {
    "main": "index.js",
    "type": "dockable",
    "title": "Extend Editor",
    "width": 400,
    "height": 700
  },
  "main-menu": {
    "extend/Hello World": {
      "message": "extended-editor:say-hello"
    },
    "extend/Extend Editor": {
      "message": "extended-editor:open"
    }
  },
  "license": "ISC",
  "repository": {
    "type": "",
    "url": ""
  },
  "dependencies": {
    "node-cmd": "^3.0.0"
  }
}

name:包名，全局唯一；
version：版本号；
description：描述；
author：作者；
main：入口程序，即为main.js；
panel：弹出面板的信息main：页面构成详细文件，即为index.js；title：弹出面板的标题
；width、height：面板默认宽高，当你手动改变面板宽高时，编辑器会记忆最后一次的宽高。
main-menu：编辑器的菜单，结构为主菜单名/菜单选项：{消息message:“扩展包名：入口程序中IPC消息监听messages下函数名”}
如图：

入口程序main.js：

module.exports = {
    load() {
    },

    unload() {
    },

    messages: {
        "say-hello"(event, ...args) {
            Editor.log("Hello World!",args);
        },
        open() {
            Editor.Panel.open('extended-editor');
        },
    },
};

可以通过在load和unload中注册监听和取消监听来对构建过程进行修改
具体参照官方文档：定制项目构建流程
https://docs.cocos/creator/manual/zh/publish/custom-project-build-template.html?h=build-fini

messages为IPC消息监听。
由于-作为函数名会报错，所以用双引号。其中args是随着消息传输过来的参数。
有关IPC通信：
面板向主进程发送消息：
Editor.Ipc.sendToMain(‘extended-editor:say-hello’, “nihao~”);
结果如下图

其余进程向进程，进程向面板的消息通信请参考官方文档：
https://docs.cocos/creator/manual/zh/extension/ipc-workflow.html

页面index.js

Editor.Panel.extend({
  style: `
    :host { margin: 5px; }
    h2 { color: #f90; }
  `,

  template: `
    <h2>标准面板</h2>
    <hr />
    <div>label: <span id="label">--</span></div><br>
    <div>button:<ui-button id="btn">点击</ui-button></div><br>
    <div>input:<ui-input placeholder="..." id="input1"></ui-input></div><br>
    <div>num input:<ui-num-input placeholder="Search..." step=1></ui-num-input></div><br>
    <div>select:<ui-select value="4">
      <option value="0">Foo</option>
      <option value="1">Bar</option>
      <option value="2">Hello</option>
      <option value="3">World</option>
      <option value="4">A Long Text</option>
    </ui-select></div>
  `,

  $: {
    btn: '#btn',
  },

  ready() {
    this.$btn.addEventListener('confirm', () => {
      Editor.Ipc.sendToMain('extended-editor:say-hello', "nihao~");
    });
  },
});

style：样式，其中margin为边距，h2的color为h2的颜色
template：页面具体内容，使用html的语法，cocoscreator重新封装的标签。更多标签，请参考官方文档：https://docs.cocos/creator/manual/zh/extension/using-ui-kit.html
$：绑定控件，名称：’#该控件的id’。
另外可以新建index.html来保存template的内容，然后使用require的fs

template: fs.readFileSync(Editor.url("packages://包名/index.html"))

读取即可。
ready()：逻辑代码，基本上为各种控件监听。有两种形式，一种如以上使用addEventListener，另外一种为添加vue，需要在template对应标签添加如下

<ui-button id="btn" v-on:confirm="onBtnClick">点击</ui-button>

vue响应

this.vue = new window.Vue({
      el: this.shadowRoot,
      methods: {
        onBtnClick(event) {
          Editor.log("btn click");
        },
      }
    });

通过event.target可以获取标签的各种信息，比如event.target.id获取id，event.target.value，event.target.innerText标签中间的文字，此处对应"点击"。

Tips：

1.有关nodejs的npm install，需要在package.json中添加以下字段

"license": "ISC",
  "repository": {
    "type": "",
    "url": ""
  },

否则install会出现warn。
2.添加滑动条，可以使用

<div style="height: 100%; overflow:scroll"> </div>

在此div块的内容如果超出屏幕会生成滚动条。但是高度也有限制在2000px~3000px之间。
3.nodejs的fs和path可以直接require，不需要install。

var path = require("path");
var fs = require("fs");

4.load与unload中无法使用Editor.url(“db://”)，和Editor.url(“packages://”)获取项目路径。