Cocos 2.x 扩展开发教程

一、Cocos扩展介绍

Cocos扩展可以让Cocos Creator用户定制和扩展编辑器的功能。这些扩展以包（package）的形式进行加载。

Cocos Creator 的扩展包沿用了 Node.js 社区的包设计方式，通过 package.json 描述文件来定义扩展包的内容和注册信息。

需要注意的是，Cocos Creator 2.x 系列和 Cocos Creator 3.x 系列的扩展不兼容，位置也不同，所以开发教程也不同。本文讲的是 Cocos Creator 2.x 系列扩展开发教程，Cocos Creator 3.x 系列放在下一篇。

官方开发教程在：扩展编辑器 · Cocos Creator

Cocos扩展的商店页面是 https://store.cocos.com/app ，可以在Cocos Creator IDE中直接打开。

 注：图二中的SmartAd试玩打包工具就是本文要讲的案例。

二、教程案例介绍

1.案例背景

本案例介绍的扩展名叫SmartAd试玩打包工具，是一个Cocos打包试玩广告的扩展。

试玩广告是一种新兴广告类型，在近几年开始兴起。与传统广告格式（如图片和视频）不同，试玩广告对用户具有高度互动性，在广告展示时，可以与用户进行交互，使广告变得更丰富有趣。

这些广告能在 30 秒内吸引观众的注意力、展示游戏玩法并转化用户。即使在竞争激烈的市场中，它们也能提供低用户获取成本（CPI）、高转化率 (CVR) 和点击率 (CTR)。

试玩广告本质上是一个HTML网页，通过JS等技术响应用户操作，与用户产生互动。由于带宽和加载速度的原因，试玩广告一般对文件大小都有严格要求，大多数投放渠道的要求是不超过5M，且要求单文件，即所有资源都要在一个HTML中加载展示。

Cocos因为引擎的特性，非常适合用来制作试玩广告，但Cocos导出的工程是一个多文件目录，需要用专门的工具进行单文件打包，并接入各渠道的SDK，这是一个耗时耗力的过程。SmartAd平台开发了一个工具，可以一键完成Cocos工程导出试玩广告，为了更方便用户使用，因此需要开发一个Cocos Creator扩展，方便用户的使用。

关于试玩广告，如果你想了解更多可以阅读这篇文章：应用、游戏和品牌的新营销方式-试玩广告-帮助中心-SmartAd试玩广告制作平台

2.扩展流程

本扩展的流程是：

 3.涉及到的知识点

• 扩展基本结构
• 多语言
• 扩展菜单添加
• 扩展面板UI编写
• UIKit的使用
• 扩展数据交互
• 文件上传
• 扩展打包上架

三、创建基本结构

在菜单上选择扩展->创建新扩展插件 -> 全局扩展（安装在用户目录下）即可创建一个扩展，这里名字用SartAdDemo

 上面的操作，会在用户目录生成一个目录，结构如下：

 这几个文件作用如下：

1.package.json

package.json是扩展定义，文件内容如下：

{
  "name": "SmartAdDemo",
  "version": "0.0.1",
  "description": "The package template for getting started.",
  "author": "Cocos Creator",
  "main": "main.js",
  "main-menu": {
    "i18n:MAIN_MENU.package.title/SmartAdDemo