Cocos 3.x 扩展开发教程

本文接上篇：Cocos 2.x 扩展开发教程_I_m_Joy的博客-CSDN博客

但为了让本文也可以单独阅读，仍保留必要信息。

一、Cocos扩展介绍

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

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

需要注意的是，Cocos Creator 2.x 系列和 Cocos Creator 3.x 系列的扩展不兼容，位置也不同，所以开发教程也不同。本文讲的是 Cocos Creator 3.x 系列扩展开发教程，Cocos Creator 2.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的使用
• 扩展数据交互
• 文件上传
• 扩展打包上架

三、创建基本结构

在菜单上选择 扩展->创建扩展：

即可打开扩展模板面板：

 

 这里我们选择 HTML面板，扩展名叫smartad_demo，创建位置选全局：

 操作完成后，即可在扩展管理器（也可以在菜单中通过 扩展 -> 扩展管理器 打开）中看到我们创建的扩展：

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

 

这几个文件作用如下：

1.@types

扩展环境，不用关注，也用不到

2.dist

因为src中是用ts编写的，在发布时需要编译为js文件，ts编译为js后，就存在这个目录中。

3.i18n

多语言文件

4.src

扩展源码，是ts语言，这里面比较关键的有两个文件，分别是：

（1）src/main.ts

src/main.ts 是扩展入口文件，在package.j