可可扩展使Cocos Creator用户可以自定义和扩展编辑器函数。这些扩展名以数据包的形式加载。
COCOS创建者的扩展使用Node.js社区的软件包设计方法来定义扩展包的内容和注册信息，以描述文件。
应该注意的是，COCOS Creator 2.X系列和Cocos Creator 3.X系列的扩展与不同的位置不兼容，因此开发教程不同。本文讨论了Cocos Creator 2.X系列扩展开发教程。Cocos Creator 3.X系列放置在下一篇文章中。
官方开发教程是：扩展编辑器·可可创作者
可可扩展的商店页面是https://store.cocos.com/app，可以直接在Cocos Creator IDE中打开。
图1开放路径：菜单 - >扩展 - >扩展商店
注意：本文中要提到的Smartad试用和包装工具是这种情况。
在这种情况下描述的Smartad试验包装工具的扩展是COCOS包装试验广告的扩展。
试用广告是一种新兴广告，近年来已经开始上升。与传统的广告格式（例如图片和视频）不同，试验广告与用户高度互动。当广告显示时，您可以与用户进行交互，以使广告更丰富，有趣。
这些广告可以在30秒内吸引观众的注意力，展示游戏玩法并改变用户。即使在激烈的竞争市场中，它们也可以提供低用户的获取成本（CPI），高转化率（CVR）和点击（CTR）（CTR）。
试用广告本质上是一个HTML网页，它通过JS等技术响应用户操作以与用户交互。到带宽和加载速度，试验广告通常对文件大小有严格的要求。启动渠道的大多数要求不超过5m，并且需要单个文件，也就是说，所有资源必须加载并显示在HTML中。
由于发动机的特性，可可非常适合制作试验广告，但是可可的出口是多file目录。它需要用一个具有特殊工具的单个文件包装，并连接到每个通道的SDK。这是一个时间消耗的时间消耗的力量。Smartad平台已经开发了一种工具，可以完成COCOS项目，以一键单击导出试验广告。为了使用户更方便，有必要开发可可创建者扩展，以促进用户使用。
关于试用广告，如果您想了解更多信息，则可以阅读本文：应用程序，游戏和品牌 - 审判广告中心智能中心智能试验广告平台的新营销方法
该扩展的过程是：
选择菜单上的扩展 - >创建新的扩展插头-in->全局扩展名（安装在用户目录中）以创建扩展名。这里的名称使用sartaddemo
上述操作将在用户目录中生成目录。结构如下：
这些文件如下：
package.json是一个扩展定义。文件的内容如下：`{{
“名称”：“ smartaddemo”，
“版本”：“ 0.0.1”，
“描述”：“开始启动的软件包模板。”，
“作者”：“可可创造者”，
“ main”：“ main.js”，
“主菜单”： {
“ i18n：main_menu.package.title/smartaddemo/open”：{
“消息”：“ SmartAddemo：Open””
}，，
“ i18n：main_menu.package.title/smartaddemo/hello”：{{{{
“消息”：“ smartaddemo：say-hello”
}
}，，
“控制板”： {{
“ main”：“面板/index.js”，
“ type”：“ dockable”，
“标题”：“ smartaddemo”，
“宽度”：400，
“高度”：300
}
}`
价值分别：
扩展的输入文件，在package.json中的主角中引入
`'使用严格';
Module.exports = {
加载 （） {{
//加载程序包时执行
}，，
unload（）{
//卸载时执行
}，，
//在这里注册您的IPC消息
消息：{
'打开' （） {
//在Package.json中注册的打开条目面板
editor.panel.open（'smartaddemo'）;
}，，
'问好' （） {
editor.log（'Hello world！'）;
//将IPC消息发送到面板
editor.ipc.sendtopanel（'smartaddemo'，'smartaddemo：hello'）;
}，，
'clicked'（）{
editor.log（'按钮单击！'）;
}
}，，
};`
价值分别：
面板入口文件，介绍包装。
editor.panel.extend（{
//面板的CSS样式
样式：`
：主机{Margin：5px;}
H2 {颜色：＃f90;}
`，，
//面板的HTML模板
模板：`
状态： - 登上专业
`，，
//元素和可变绑定
$：{{{
btn：'#btn'，
标签：'#label'，
}，，
//当成功加载和初始化模板和样式时，方法执行
准备好 （） {{
这。美元
editor.ipc.sendtomain（'smartaddemo：clicked'）;
}）;
}，，
//在这里注册您的IPC消息
消息：{
'smartaddemo：你好'（event）{
这。$ label.innertext ='Hello！';
}
}
}）;`
价值分别：
可可创建者编辑器的扩展名具有构建的多语言解决方案。此方法是创建一个在扩展程序包的分离中命名的新文件夹，并将相应的JavaScript文件添加到每个语言中，因为键值映射数据。数据文件名称应该与语言代码一致，例如相应的英语映射数据。
喜欢：
`// en.js
Module.exports = {
“搜索”：“搜索”，
“编辑”：“编辑”，
};
// zh.js
Module.exports = {
“搜索”：“搜索”，
“编辑”：“编辑”，
};`
在JavaScript脚本中，您可以通过界面获得与当前语言相对应的翻译文本，例如：`//注意：我的软件包名称是“ smartaddemo”
editor.t（'smartaddemo.search'）;//注意：我的包装名称是“ SmartAddemo”
editor.panel.extend（{
模板：`
````
}）;`
多语言翻译可以以扩展程序包中的注册菜单的形式使用。
我们的扩展只需要打开一个，因此更改如下：
`{{{
“名称”：“ smartaddemo”，
“版本”：“ 0.0.1”，
“描述”：“开始启动的软件包模板。”，
“作者”：“可可创造者”，
“ main”：“ main.js”，
“主菜单”： {
“ i18n：main_menu.package.title/smartaddemo/i18n：smartaddemo.open”：{
“消息”：“ SmartAddemo：Open””
}
}，，
“控制板”： {{
“ main”：“面板/index.js”，
“ type”：“ dockable”，
“标题”：“ smartaddemo”，
“宽度”：400，
“高度”：300
}
}`
相应的I18N文件如下：`// en.js
Module.exports = {
“开放”：“ Smartad可玩广告包”
};
// zh.js
Module.exports = {
“开放”：“ Smartad试用广告包”
};`
COCOS创建者的主菜单可以自由扩展。扩展方法是在文件中的字段中添加自己的菜单路径和菜单设置选项。
我们在这里只需要一个，因此配置如下：`{{
“主菜单”： {
“”：map_martaddemdemdemdemdemomo.open”：{：{：{
“消息”：“ SmartAddemo：Open””
}
}，，
}`
效果显示在图中：
面板的原型显示在图中：
为了使代码更易读，我们将面板分为HTML和CSS和JS。特定方法是在面板目录中创建index.html和index.css文件，并在index.js中引用它。
目录如下：
index.html：`
步骤1：添加Smartad SDK（只有一行代码，您可以导出Omni -Channel试用广告）
步骤2：构建一个项目（选择Web移动平台）
查看教程文档或咨询人工客户服务
````
index.css：`身体{
背景：#fff;
}
： 主持人 {
保证金：5px;
}
H2 {{
颜色：#fff;
文本合格：中心；
}
p {
字体大小：16px;
}
.btn_group {
文本合格：中心；
保证金顶：20px;
}
.button-item {
宽度：130px;
身高：40px;
边界拉迪乌斯：5px;
颜色：#fff;
}
白颜色;`
index.js：`const fs = requees（'fs'）;
// panel/index.js，此文件名需要匹配package.json中注册的文件名。
editor.panel.extend（{
//面板的CSS样式
样式：fs.ReadFileSync（editor.url（'packages：//smartaddemo/panel/index.css'），），），），），），），），），），），），），），），），），），），），），），），），），）
//面板的HTML模板
模板：fs.ReadFilesync（editor.url（'packages：//smartaddemo/panel/index.html'），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），），）。
//元素和可变绑定
$：{{{
cancel_btn：'#cancel_btn'，
pack_btn：'#pack_btn'，
help_link：'#help_link'，
msg：'#msg'
}，，
//当成功加载和初始化模板和样式时，方法执行
准备好 （） {{
}，，
}）。
效果显示在图中
COCOS Creator为开发人员提供了非常丰富的接口元素，称为Uikit，帮助开发人员快速开发面板界面。
当前的常见接口元素包括：
查看所有元素：Master UI套件·可可创作者
我们仅在这里使用UI-Button作为演示。HTML中的取消和包装按钮如下：
`取消
包装`
在面板上定义了Uikit之后，通过JS中的$绑定它：`$：{
cancel_btn：'#cancel_btn'，
pack_btn：'#pack_btn'
} 这。$ CANCAL_BTN`。
根据步骤2中的过程，下一个操作是用户单击“包装”按钮以开始检测施工文件并压缩上传。
让我们首先绑定按钮的点击，通过该方法将事件添加到元素：``ready（）{
这。$ castut_btn.addeventlistener（'escrence'，（）=> {
editor.panel.close（'smartaddemo'）;
}）;
这。$ pack_btn.addeventlistener（'escresence'，（）=> {
}）;
这。$ help_link.addeventlistener（'click'，（）=> {
}）;
}，`作为上面的代码，我们添加了单击以“取消”，“包装”和帮助文本。
为了使代码更好地组织和读取，我们在扩展的src/smartad.js中编写了主要逻辑，并且在此处实现了扩展程序的所有过程。
在面板的JS中，我们可以通过以下方式引用Smartad.js：
“包装”按钮中的引用：`const _ self = this;
这。$ pack_btn.addeventlistener（'escresence'，（）=> {
尝试 {
smartad.main（功能msgcallback（msg）{
_自己。$ msg.innerhtml = msg;
}）;
}捕获（e）{
editor.log（e）;
}
}）;`
文件上传标准HTTP POST请求可以实现。
我们在此处使用FS模块的方法来读取上传文件，创建一个流，上传文件的字段为zip，示例如下：`函数upload_zip（zip_file）{
令FormData = {
zip：fs.CreateReadStream（zip_file），
};
}`
请求库在此处使用，代码如下：`函数request_i（params，pallback）{
让标头= {
“用户代理”：“ Mozilla/5.0（Windows NT 10.0; Win64; X64）AppleWebkit/537.36（Khtml，像Gecko一样）Chrome/73.0.3683.103 Safari/537.36'，，，，，537.36'，，，，，，
'content-type'：'application/json'，
'sid'：sid
}
params.headers =标题;
request.post（参数，回调）
}`
最终目录结构如下：
因为我们已经使用了压缩，所以我们需要引入第三部分压缩图书馆档案库以在package.json中引入。
“依赖关系”：{
“ Archiver”：“^5.3.0”
}
}`
然后安装
将扩展目录的所有文件（包括）压缩为zip格式，并将扩展名称命名。
访问COCOS开发中心的注册帐户并登录
填写上述信息后，您可以单击“评论”页面的提交中的评论按钮。通常，在3个工作日内将有结果。
有关更多详细信息，请参阅：将插件-in提交到商店·Cocos Creator
好吧，以上是Cocos Creator 2.x的扩展和开发的相关内容。欢迎留言交换。
原始：https：//juejin.cn/post/7098282592696270862