egret使用技巧及减少报错

---

标签: egret,typescript

---

知识点

tween动画循环

• egret wing为我们提供了可视化界面创建和编辑exml，编辑Tween动画也相当方便，但是在可视化操作中没有提供相应选项实现动画循环。

使用egret wing可视化界面创建的一个简单动画的后自动生成的.exml代码如下

<?xml version="1.0" encoding="utf-8"?>

<e:Skin width="400" height="300" xmlns:e="http://ns.egret.com/eui" xmlns:ns1="*" xmlns:w="http://ns.egret.com/wing" xmlns:tween="egret.tween.*">
    <w:Declarations>
        <tween:TweenGroup id="demo">
            <tween:TweenItem target="{label}">
                <tween:Set/>
                <tween:To duration="500">
                    <tween:props>
                        <e:Object scaleX="{2}" scaleY="{2}"/>
                    </tween:props>
                </tween:To>
                <tween:To duration="500">
                    <tween:props>
                        <e:Object scaleX="{1}" scaleY="{1}"/>
                    </tween:props>
                </tween:To>
            </tween:TweenItem>
        </tween:TweenGroup>
    </w:Declarations>
    <e:Label id="label" text="Demo" x="154" y="123"/>
</e:Skin>

实现动画循环的方法

• 以下均省略Demo.ts中引入该皮肤的代码

1. 不改动exml

// ...省略其他代码 
this.demo.items[0].props={loop:true}

2. 减少多层引用，在TweenItem上加上id属性

<tween:TweenItem id="item" target="{label}">
<!-- 其他代码 -->
</tween:TweenItem>

this.item.props={loop:true}

3. 不写ts代码

<tween:TweenItem target="{label}">
    <tween:props>
        <e:Object loop="{true}" />
    </tween:props>
<!-- 其他代码 -->
</tween:TweenItem>

MovieClip序列帧动画

实现循环动画不仅可以使用Tween缓动动画，还可以使用MovieClip帧动画，两者适用范围各不相同，但都可以实现循环动画。

• 需要引入game库，创建eui项目时默认是不勾选的

// 官方库引入非常方便
// egretProperties.json
{
    "name": "game"
}

• 创建并开始动画
  使用TextureMerger创建动画非常方便，导出json和png文件用于创建动画

// 加载配置文件和资源
var data = RES.getRes("countdown_json")
var png = RES.getRes("countdown_png")

// 创建movieclip
var mcFactory:egret.MovieClipDataFactory = new egret.MovieClipDataFactory( data, png );

// 创建指定动画
var mc1:egret.MovieClip = new egret.MovieClip( mcFactory.generateMovieClipData( "countdown" ) );

// 将动画加入舞台
this.addChild(mc1)

// 动画需要加入舞台后才可以开始

// "start"需要在json配置文件labels字段中指定并配置，-1表示循环无限次
mc1.gotoAndPlay("start", -1)

egret中的一些常见代码问题

1. 皮肤文件的class属性

.exml文件中定义的class属性表示皮肤类eui.Skin的一个子类名，所以不能与其他Class重名

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="Demo" xmlns:e="http://ns.egret.com/eui">
</e:Skin>

以上代码相当于

declare class Demo extends eui.Skin {
}

可使用模块化避免命名冲突

<?xml version="1.0" encoding="utf-8"?>

<e:Skin class="myskin.Demo" xmlns:e="http://ns.egret.com/eui">
</e:Skin>

相当于

declare module myskin{
    class Demo extends eui.Skin{
    }
}

2. 类型声明减少报错，增加代码提示

• 类型声明帮助减少逻辑错误

// 指定num类型后，赋值错误的类型会报错
var num:number | string = 123;
num = ''
num = true // 报错

• 类型声明增加代码提示

class Shop {
    private farm:Farm // 有代码提示
    private farm2; // 没有代码提示

    public yourFun() {
        this.farm.something // 声明了this.farm的来源，在引用时可以得到很好的代码提示
    }

}

• 函数形参声明
  正确的声明函数的参数个数和类型，以及是否必选，可以得到很好的代码提示，并且防止编辑器报错

// ?: 表示可选参数的类型
function demo (arg1:string, arg2?:number):viod {}

// es6语法和类型声明的配合使用

function demo2 ({
    arg1 = '',
    arg2 = null,
    arg3 = 123
}) {}
// 以上代码在egret wing目前支持的typescript中，arg2会被认为是null类型，当调用这个函数时arg2的类型很容易报错，因为在需要给arg2传参时，大部分情况下不会传null或undefined

// 正确的解决方法是自行指定正确的arg2类型，最新版typescript在vscode上也是这样翻译的
function demo2 ({
    arg1 = '',
    arg2 = null,
    arg3 = 123
}:{
    arg1?:string,
    arg2?:any, // arg2应该是any类型
    arg3?:number
}):viod {}

• any可以解决很多编辑器报错，但失去了很多代码提示，并且你需要对类型有充足的判断。

// 类型断言，在window对象上添加属性
(<any>window).test = function () {

}

// any解决属性访问报错
// 前提是你清楚你的访问和修改是没有问题的
// 并且你在输入'demo.'后本应该有的代码提示也不会再出现了
let demo:any = new Demo()
demo.anything = 'you want' //这样即使你访问Demo中没有声明的属性也不会报编译错误了

3. 类的属性设置正确的访问控制，避免编辑器报错，正确的代码提示

// 正确使用private protected public
class Demo {
    protected test () {}
}
new Demo().test() // error

// 重写方法时访问控制不能比父类严格
class Demo2 extends Demo {
    private test( ){} // error
}

// 代码提示
new Demo().      // 这里会出现public的属性代码提示，不会出现private和protected属性的代码提示

• 虽然以上错误都能编译成js代码并正确运行，但是编译和编辑器大量的报错会让排查关键错误变得更加艰难。

往期精彩回顾

• Ant Design 组件 —— Form表单（一)
• Ant Design 组件 —— Form表单（二)
• CMS管理后台入门指南 (Ant Design Pro v2.0)
• 实现点击下载文件的几种方法
• 在https中引入http资源所导致的问题

---

叶茂 广州芦苇科技web前端工程师