Egret 学习之 从HelloWorld项目开始

Posted 2020-08-23 RitaLee

1，创建新项目HelloWorld ,可以在界面上点击文件->新建，也可以在命令行使用create；

2，src 目录，存放我们的代码。我们编写的代码都放在src目录下面。

     bin-debug 目录，项目编译和运行的debug目录，一般我们不要修改该目录下的内容。

     libs 目录，这里面存放我们的库文件，包括 Egret 核心库和其他扩展库。当然以后添加了第三方库的话也会放在这里。

     resource 目录，这里放置我们的资源文件，这里面有一个default.res.json 配置文件，用来配置资源。

     template 目录，这里是项目调试过程中所需的目录，一般我们不需要修改该目录下的内容。

     egretProperties.json 项目的配置文件，一般我们会用到里面的modules 字段来配置项目的模块。

     index.html 项目访问的入口文件，我们可以在这里面配置项目的旋转缩放模式背景颜色等。

     favicon.ico 一个ico。是Favorite icon的简写；

3，index.html文件，可以完成很多配置，如第15行，是设置舞台的背景色；

     接下来是对第三方库文件的引用标签，

从45行开始，是对项目的设置；一般不要修改，包括注释也不要改；

data-entry-class=”Main” 设置项目的入口文件，表示项目的入口类，默认为Main,如果需要自定义的话需要在项目中先创建类，然后在这里配置类的名字。

data-orientation=”auto” 设置旋转模式。

data-scale-mode=”showAll” 设置缩放模式。

data-frame-rate=”30” 这里是运行的帧率。

data-content-width=”480” 和 data-content-height=”800” 用来设置舞台的设计宽和高

data-show-paint-rect=”false” 设置显示脏矩形的重绘区域。

data-multi-fingered=”2” 设置多指触摸

data-show-fps=”false” data-show-log=”false” 这里设置显示帧率和log，只有在调试时会显示，发布的版本会去掉。

data-log-filter=”” 设置一个正则表达式过滤条件，日志文本匹配这个正则表达式的时候才显示这条日志。如data-log-filter="^egret" 表示仅显示以 egret 开头的日志。

data-show-fps-style=”x:0,y:0,size:30,textColor:0x00c200,bgAlpha:0.9” 这里设置fps面板的样式。目前支持默认的这几种设置，修改其值即可，比如修改面板位置可以设置x和y,改变大小可以设置size,改变文字颜色textColor，改变背景面板的透明度bgAlpha。

4，调试项目：

在新建好的HelloWorld项目中，函数里面（可以是开头）加一句console.log("HelloWorld");  然后ctrl+s 即可自动构建项目，也可以到菜单里将自动构建取消而手动点击构建项目按钮即可（命令行情况下，就是egret build），构建完成后点击调试按钮即可，会自动打开浏览器（浏览器最好有Chrome）；F12即开发者工具；在控制台即可看到 HelloWorld  ;