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代码并正确运行，可是编译和编辑器大量的报错会让排查关键错误变得更加艰难。

• 做者简介：叶茂，芦苇科技web前端开发工程师，表明做品：口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专一于前端领域框架、交互设计、图像绘制、数据分析等研究。 一块儿并肩做战： yemao@talkmoney.cn 访问 www.talkmoney.cn 了解更多