Egret开发笔记(二)基础工程代码阅读

代码目录结构

在Egret Wing中打开上一节中我们创建的项目工程，查看代码目录结构，Forward在如下图中标记了各个目录的及关键文件的用途。

代码阅读理解

接下来我们从web入口一步一步阅读初始代码。首先打开index.html文件，我们看到index文件内容如下：

在上面的代码中我们看到，在index中首先加载了一个manifest.json文件。

xhr.open('GET', './manifest.json?v=' + Math.random(), true);

好的，我们打开这个文件看看里面的内容。

initial中的是egret库对应的js文件，也就是我们在《Egret开发笔记（一）》中创建项目时勾选引入的引擎库，如下图：

而game模块中定义的则是启动程序后要加载的src目录下ts文件经过编译生成的js文件。

我们可以看出，在加载完manifest文件之后，将manifest文件中initial和game拼接在一起作为一个list。然后通过loadScript开始加载list中所有文件。而每一个文件则是通过loadSingleScript来完成加载的。按照上面的定义首先加载的一定是egret.js，接下来是egret.web.js、game.js...

当所有预定义的文件加载进来之后，在加载完成的回调函数中，调用了egret的runEgret接口，这个接口做了什么呢？

断点调试可以看到，这个接口经过一系列参数设置后，通过document.querySelectorAll查找到一个egret-player并把它放在一个container中，这个egret-player就是在index.html中定义的body体，这个div中定义了data-entry-class一个Main类型，同时在这个div中定义了一系列这个body体显示的一系列参数列表。

通过这个container以及前面传递过来一个参数集options，然后创建了一个web.webPlayer，而这个web.webPlayer的start接口就调起了我们src目录下Main的一个对象。

这样我们就应该明白egret项目是如何从index.html到Main的调用的。

在进入Main之后，构造函数中首先注册了一个ADD_TO_STAGE事件，响应接口是onAddToStage，在这个接口中onPause、onResume，再执行runGame接口——

在这里先加载资源、创建游戏场景、使用加载description_json文件、启动动画、使用平台登录账号、并且获取平台账户信息、打印账户信息。

在loadResource中，首先创建了一个LoadingUI，就是一个加载页面，然后开始加载default.res.json文件，文件路径在resource目录。加载页面展示的进度则是default.res.json中preload分组的加载进度，当加载资源完成后，移除加载页面。我们打开这个文件可以看到，实际上这个文件里面的groups中定义了预定义的分组资源，而在resources中定义了各个资源的名称、类型和url。整个文件是一个json格式的资源配置文件，如下图所示。

在runGame中，当我们加载完预定义的资源后，就开始创建场景中的背景、对象、设置icon等，这些与具体想实现的功能有关，这里不做过多解释，涉及到要创建的各种控件对象我们后续专门一章来学习。

接下来，加载description_json文件，实际上是读取了对应文件中的文字信息，并将加载的结果传进startAnimation中启动一个循环动画

最后调用平台登录接口，获取平台账号信息并打印。至此，就完成Main对象中所有逻辑的处理。