本文共 2130 字，大约阅读时间需要 7 分钟。
由于Egret引擎的EUI扩展库的官方文档写得十分复杂，让很多开发者短时间内难以入手并且走了不少坑，在这里我将教你Egret引擎的扩展库EUI的基本使用方法。废话不多说，一起开始吧!
一、我们要新建一个项目；
二、打开项目后，需要在资源管理器里，在resource文件夹下新建一个名为eui_image的文件夹（当然文件夹名可自定义）；
三、我准备了一张笑脸图片，把笑脸放进eui_image文件夹里面；
四、点击wing资源管理里面的default.res.json文件，确保preload预加载组里面有face_png笑脸资源；
五、右键新建一个EUI组件，其实我是按错了，但又要重新截图嫌麻烦只好将错就错，直接新建EXML文件就可以了，我建议你直接新建一个EXML文件，直接新建一个EXML文件，直接新建一个EXML文件，说三遍；
六、我将EXML文件命名为Wait，这个你喜欢命名为什么就什么。新建好Wait.exml文件后，打开，点击很多格子的画布，然后在右方属性面板上修改一下宽度和高度；
七、接着，我们点击左边的资源按钮，找到笑脸图片，鼠标点住拉到画布那里，笑脸就自动显示在画布上了；
八、我们修改一下笑脸的属性，也是在右边属性面板中找到X锚点和Y锚点，设置数值为宽度和高度的一半，然后Ctrl+s保存一下。有人问，为什么我要把锚点设置为笑脸的中间呢？因为我想接下来用代码来控制笑脸不停在旋转；
九、修改了锚点属性还不够，我的代码还识别不了我的笑脸，因为如果当我添加了十个笑脸进去却只想控制其中一个笑脸旋转时，我怎么知道哪个笑脸是需要控制的，所以我们需要给笑脸一个编号，这个编号是ID，同理，在属性面板上设置笑脸的ID值为face，接着保存一下； 
十、好了，Wait.exml文件做好了，检查一下，没什么问题就下一步了，当然你可以把界面做得尤为复杂，我喜欢把EXML文件称为界面；
十一、现在我们的任务是：用代码来控制界面上的笑脸。首先新建一个ts文件，由于我之前第五条时说过，我按错建了EUI组件，所以Wait.ts这个文件自动生成在Wait.exml的同级目录，所以我就不需新建了。但是你要在src文件夹下新建一个ts文件写代码来加载我们的Wait界面，下图的代码由于我在EUI组件基础上写的，所以可能与你的不太一样，不过文章的最后我稍微解释一下代码的意思；
十二、加载界面的Wait类完成后，打开src下的Main.ts文件，把onButtonClick函数删掉，把startCreateScene函数里面的内容删掉，我们重写startCreateScene函数体；
十三、好了，代码写好了，我们按F5来运行一下看下效果，发现笑脸很开心地在旋转。
在文章结束之前，我来解释一下原理：
1、EXML文件本来是纯代码构成的，但是Egret团队将EXML的图形化编辑整合到wing里面，所以我们才能方便地、愉快地直接拖图像等控件到画布里改下属性实时预览效果；
2、单纯EXML文件虽然能做界面，但是是静态的，我们需要通过代码来自由地控制界面的变化，所以我们需要继承eui组件类自定义一个类来加载并操作界面，其中EXML文件的ID值就对应了自定义类里面的public同名变量；
3、自定义的eui继承类也是显示对象，所以需要在Main主逻辑类里面addChild函数将界面显示到游戏舞台上。
最后，我贴一下相关代码：
Wait.ts全部代码:
class Wait extends eui.Component{ public constructor() { super(); /**加载皮肤 */ this.skinName = "resource/eui_skins/Wait.exml"; } protected childrenCreated():void { super.childrenCreated(); this.faceTween(); /**调用face缓动函数 */ } public face:eui.Image; /**对应Wait.exml文件中对应的id值对象(笑脸) */ private faceTween():void /**face对象的缓动动画 */ { var tw = egret.Tween.get( this.face, { loop:true}); tw.to({rotation:360},4000,egret.Ease.circIn).to({rotation:0},0).wait(500); }} Main.ts中的startCreateScene函数体代码：
var face:Wait = new Wait(); /**实例化皮肤对象 */this.addChild(face); /**将face显示对象添加到舞台 */