白鹭引擎EUI做H5活动 巩固篇

项目目录

上面这张图片是项目的目录结构，咋们一点一点来讲解：

• .wing：包括 Egret 项目的任务配置文件和启动配置文件。
• wingProperties.json：Egret Wing 项目配置文件。
• bin-debug：项目调试时，所产生的文件存放于此目录。
• libs：库文件，包括 Egret 核心库和其他扩展库存放于此目录。
• resource：项目资源文件存放于此目录。
• scripts：项目构建和发布时需要用到的脚本文件存放在此目录。
• src：项目代码文件存放于此目录。
• template：项目模板文件存放于此目录。
• egretProperties.json：项目的配置文件。具体的配置说明可以参考：EgretProperties说明
• index.html：入口文件。具体的配置说明可以参考：入口文件说明
• manifest.json：网页清单文件。
• tsconfig.json：typescript 编译配置文件

index.html 为项目的入口文件，下面是 body 标签里的默认配置，您可以根据项目需求修改。

<div style="margin: auto;width: 100%;height: 100%;" class="egret-player"
    data-entry-class="Main"
    data-orientation="auto"
    data-scale-mode="showAll"
    data-frame-rate=""
    data-content-width=""
    data-content-height=""
    data-multi-fingered=""
    data-show-fps="false" data-show-log="false"
    data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
</div>

• data-entry-class：文件类名称。
• data-orientation：旋转模式。
• data-scale-mode：适配模式。
• data-frame-rate：帧频数。
• data-content-width：游戏内舞台的宽。
• data-content-height：游戏内舞台的高。
• data-multi-fingered：多指最大数量。
• data-show-fps：是否显示 fps 帧频信息。
• data-show-log：是否显示 egret.log 的输出信息。
• data-show-fps-style：fps面板的样式。支持5种属性，x:0, y:0, size:30, textColor:0xffffff, bgAlpha:0.9

在 script 标签内，有项目的启动参数,如下图所示

egret.runEgret({ renderMode: "webgl", audioType: ,
calculateCanvasScaleFactor:function(context) {
  var backingStore = context.backingStorePixelRatio ||
  context.webkitBackingStorePixelRatio ||
  context.mozBackingStorePixelRatio ||
  context.msBackingStorePixelRatio ||
  context.oBackingStorePixelRatio ||
  context.backingStorePixelRatio || ;
  return (window.devicePixelRatio || ) / backingStore;
}});

参数是一个对象，包括以下3个可选属性：

• “renderMode”: 引擎渲染模式，”canvas” 或者 “webgl”
• “audioType”: 使用的音频类型，0:默认，2:web audio，3:audio 两者的区别，可以参考文档
• “calculateCanvasScaleFactor”：屏幕的物理像素适配方法，使用默认的即可

tsconfig 配置文件

tsconfig.json 是 Typescript 项目的配置文件，TypeScript 编译器编译代码之前，会首先读取这个配置文件，并根据其中的属性来设置 TypeScript 项目的编译参数。

使用方式

1 ) 在创建 egret 项目时，会自动在项目根目录下生成名为 “tsconfig.json” 的文本文件。

2 ) 下面为引擎默认的参数，可以根据您项目的需求，自己修改。：

{
  "compilerOptions": {
    "target": "es5",
    "outDir": "bin-debug",
    "experimentalDecorators": true,
    "lib": [
      "es5",
      "dom",
      "es2015.promise"
    ],
    "types": []
  },
  "include": [
    "src",
    "libs"
   ]
}

下面我们详细说明一下 compilerOptions 里的字段。

• target:编译之后生成的JavaScript文件需要遵循的标准，默认为 es5，兼容性比较好，不建议修改
• outDir:编译出来的js文件，放到哪个目录下，默认编译到 bin-debug 里，目前暂不支持修改
• experimentalDecorators:启用实验性质的语法装饰器，引擎里的部分库使用了最新的语法，需要开启这个配置
• lib: 编译需要的库文件，默认有3个，你可以根据需求自行添加
• 其他常用参数
  • "sourceMap": true:把.ts 文件编译成.js 文件时，生成对应的 .js.map 文件，该文件可以让用户直接在浏览器里调试 ts 文件
  • "removeComments": true: 编译 .js 时删除原本 .ts 文件中的注释。

3 ) 设置其他字段，比如与 compilerOptions 平级的还有一个 include 字段,表示哪些文件会参与编译。在引擎 4.x 之前的版本里，该字段为 exclude, 表示哪些文件不参与编译

4 ) 执行 egret build 命令，可以按照配置文件来编译 egret 项目。