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 瞭解更多