论egret的坑
1. Tween坑
功能：实现点击播放动画，播放动画后跳转到新标签页面
this.addEventListener(egret.TouchEvent.TOUCH,()=>{
var tw = egret.Tween.get(...
tw.to({...},150)
.call(()=>{
window.open("http://www.xx/xxx.html", '_blank');
});
} , this);这样是会被认为不是用户手动触发的，是会被浏览器默认拦截的,不要写在call里边，但是可以写在settimeout里边
setTimeout(function () {
window.open("http://www.xx/xxx.html", '_blank');
})扩展，像这类需要用户手动触发的，不要写在事件分发里边，比如
let handler: egret.EventDispatcher = new egret.EventDispatcher();
handler.addEventListener(type,()=>{
...
}, this);同样，声音播放也是需要用户手动触发的，如果是游戏的话，可以加一个开始按钮，然用户点击开始按钮再加入游戏，其他情况也一样，可以搞个什么弹窗或者提示之类的诱导用户点击，然后在点击事件里边加上声音播放
2. default.res.json坑
比如要实现多语言功能，可以实现配置多个res文件，然后根据不同的语言选择导入不同的res文件。
看上去很正常，可是如果要实现语言动态切换，那效果真的是相当的不理想。
比如：
多语言的图片，代码如下：
var parant = this.parent;
await RES.loadGroup("loading");
const loadingView = new LoadingUI();
parant.stage.addChild(loadingView);
this.removeSelf();
RES.destroyRes(ResMap[oldLan], true);
RES.destroyRes("ui_t_bin", true);
RES.destroyRes("btn_lang_json", true);
await RES.loadConfig(ResMap[language], "resource/");
await RES.loadGroup("lang_text", 0, loadingView);
//初始化多语言文本
var game = initGame();
parant && parant.addChild(game);
loadingView.parent && loadingView.parent.removeChild(loadingView);
RES.destroyRes("loading");本地测试加载还好，能够正常使用，可是在线的情况并不怎么好用，切换一次还行，再切换就不行了
解决方法：
第一种：暴力解决，直接刷新页面，同时加上多语言参数
这种方法不推荐，也就不多讲了
第二种：秒切换，但是费时费力
首先：所有资源共用一个资源配置文件：default.res.json，但这时候存在相同键值对就会有警告，其实不碍事
其次，界面配置多状态：
可以根据不同语言定制不同界面，但是这种方法比较费时费力，扩展相对不易，但是呈现的效果确是最好的
同时，之前一些禁忌的东西就要使用了，代码如下：
<e:Button name="btn_1" label="" x="105" y="14" includeIn="en">
<e:skinName>
<e:Skin states="up,down,disabled">
<e:Image width="100%" height="100%" source="btn_en_json.btn_1_png" source.down="btn_en_json.btn_1_png"
source.disabled="btn_en_json.btn_1_png" />
<e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0" />
</e:Skin>
</e:skinName>
</e:Button>这里加了btn_en_json前缀，这是精灵图片的方式，开发的时候最好不要用这种方式，但是有时候确是比较好的方式，includeIn可以保证不同状态下显示不同的按钮
由于不同界面的按钮不能够共用，这时候就会涉及到多个id的问题，由于id不能重复，所以只能用name。
获取组件的方式：
this.btn_1 = <eui.Button>this.grp_1.getChildByName("btn_1");可以看出来，必须在button外边包一层group,这也是比较坑的地方
扩展：其实多状态还有很多用途，涉及到不同条件需要展示不同效果的，都可以用多状态来实现
3. 多状态的坑
多状态界面设计本省就很坑了，比如某些不熟悉的人，喜欢这样定义状态:
··· states="[zh],[en],[zh-Hant]">那么坑就很明显了，如[zh].visible="true"是会有问题的
还有设计的时候所有状态下最好所有组件都到位，不然容易出现什么时候界面上的某个东东就不见了的诡异情况
但是，但是这样就是坑吗？
最最最坑的是：
与eui.ItemRenderer的重用的情况：
export class Screen extends eui.ItemRenderer {
...
public constructor(skinName?: string) {
super();
this.skinName = skinName;
}
protected dataChanged(): void {}
...
}看上去，代码好好的。。。可是可是！！！！
鼠标点击之后会还原到默认状态！！！！坑！！！
这时候只能在外面再嵌套一层，也就是写两个界面，其中多状态的那个界面以控件的方式引入到第二个界面，同时eui.ItemRenderer也由第二个界面继承，这个坑让我心情糟透了，就不在这里举例代码了
4. http重连坑
服务器用的golang，可是每次请求都会发送两篇，实在是坑爹至极，可是这个问题居然没有能够解决，失落。。。
为了弥补小小的失落，还是决定自己写一套吧(代码放在最底部)，下面的就是摘自网上的，然后又js改成的ts版ajax：
//使用
ajax({
url: url,
method: "GET",
type: "text",
async: true,
timeout: 1000,
onSuccess: function (data) {
//请求成功
},
onError: function (_error) {}
}).getText();有点是比egret稳定，脱离egret环境也可以使用哦
5. removeChild坑
提供的 DisplayObject 必须是调用者的子级看了这句话，其实内心是崩溃的。。。因为很多时候，你根本不知道哪里错了，这时候还得一个个去查找用了removeChild的地方
解决方法：
/**
* 移除自身
*/
public removeSelf() {
this.parent && this.parent.removeChild(this);
}这样貌似就可以了。。。但是最好不要写在方法的局部函数里边，这样很容易出问题，比如异步执行、事件调用这些，即使你用了parent可能也防不住错误，然后只能让崩溃来得更加猛烈些了。。。
6. exml坑
复制粘贴：id自增不算坑，但是带字符串的控件复制粘贴组件后字符串里边的\n就没了
list:由于list所有项都是等宽高的，所以如果需要设置不同高度的列表，就需要用DataGroup
点击事件被拦截：设置group的touchThrough为true
如果希望group超出部分被遮挡，就应该设置scrollEnable为true
最坑的是，自定义控件设置宽高为100%,编译后可能报错，这时候应该用left="0" right="0" top=0" bottom="0"替代
自定义控件属性警告，虽然能成功但是很不爽：
[warning]
EXML解析错误 ScreenSkin: 节点上不存在名为'preview'的属性，或者该属性没有初始值:...
[warning]
EXML解析错误 ScreenSkin: 无法将'string'类型的值赋给属性:'preview:undefined'在exml是这样写的:
<e:Skin class="ScreenSkin" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" xmlns:game="ex.*">
<ex:BaseScreen preview="true" />
</e:Skin>在BaseScreen中如下定义:
export class BaseScreen{
private preview:boolean = false;
}7. Tween坑(背锅)
这个坑呢是在10.13日发现的，移动端的动画在手机上抖动得非常厉害，具体原因请看文章： 为何 Canvas 内元素动画总是在颤抖？
所以这其实不是Tween的坑，不过解决方案上诉文章已经给出来了，不过呢。。。
并不是所有场景都适合上诉方法，今天我发现了一种新的方法（很简单）：只要将图片缩小的足够小就行了，具体原因嘛，读者可以自己思考一下
还有一点，就是计算动画轨迹的问题，尤其是用到除法还有三角函数的时候，最好每一步都要保留精度，以确保最后的结果不会有偏差，这个很重要，如果公式出现问题，图片再怎么缩放也于事无补，具体计算精度方法如下：
var a = Math.floor(a*1000)/1000同时，能够是整数的值最好取整一下，比如，时间取整：
var b = Math.floor(new Date().getTime() / 1000);这个问题这几天一直困扰这我，特此记录一下
- 第三方库引入
浪费了我整整一天，刚创建的项目无法引入第三方库，即使你把egretProperties.json删掉也没有报错，瞬间就懵了。用什么egret build也没有用。 最后用egret clean才起作用，这个答案在网上根本找不到答案，不过现在有了，呵呵
- 资源加载坑
资源加载本身是没有坑的，但是游戏或者网站升级有有坑了，因此有必要在资源路径后面加个随机数参数：
main.js
let theme = new eui.Theme("resource/default.thm.json?r=" + 随机数, this.stage);default.res.json（这个是发不得时候再加）
{
...
"resources": [
{
"url": "assets/CheckBox/checkbox_select_disabled.png?r=随机数",
"type": "image",
"name": "checkbox_select_disabled_png"
},
...使用脚本的形式加参数：
BIN_RES_DIR="bin-release/web/${file}/resource/"
list=`ls ${BIN_RES_DIR}/*.res.json`
for l in ${list}; do
resfile=${l}
tm=$(date "+%Y%m%d%H%M%S")
sed -i "" "s/^\(.*\"url\": \".*\)\"/\1?v=${tm}\"/g" ${resfile}
done结束
以下是Ajax.ts的代码：
namespace http {
const doc = window.document;
const OBJ: string = "OBJ";
const STR: string = "string";
class AjaxError {
private name: string;
private msg: string | null;
public constructor(msg: string | null) {
this.name = "Ajax错误";
this.msg = msg;
}
public getName(): string {
return this.name;
}
public getMsg(): string | null {
return this.msg;
}
}
export class Ajax {
private option;
private request;
private to: any[];
public constructor(option) {
this.option = {
url: option.url || "",//数据源地址
method: option.method || "GET",//请求方法[POST、HEAD...]
data: option.data || null,//要发送给服务器的数据
async: option.async || true,//是否是异步请求
type: option.type || "text",//返回数据后，将数据转换为指定的类型.(text,js,xml,html)
timeout: option.timeout || 10000,//请求超时，默认为十秒
cache: option.cache || false,//是否从缓存中取数据(如果浏览器已缓存)
onSuccess: option.onSuccess || function (result) { },//请求成功后执行的函数(处理返回结果)
onError: option.onError || function () { },//请求出错调用的函数
onComplete: option.onComplete || function () { },//请求完成后(无论成功与否)都执行的函数
showStatus: option.showStatus || function () { }//显示请求状态
};
this.to = [];
this.request = this.create();
this.fix(this.option);
}
private create() {
return new XMLHttpRequest();
}
private parseToQueryString(obj) {//将数组或对象序列化
if (typeof obj === STR) return obj;
var s: Array<any> = [];
if (obj instanceof Array) {//假定为数组
let arr: Array<any> = <Array<any>>obj;
for (var i = 0; i < obj.length; i++)
s.push(arr[i].name || i + "=" + arr[i]);
}
else {
for (var j in obj) s.push(j + "=" + obj[j]);
}
return s.join("&");
};
private parseToObject(str: string) {//将查询字符串转化成对象
if (typeof str == OBJ) return str;
var set = {};
var strArr: string[] = str.split("&");
var item: string[];
for (var i = 0; i < strArr.length; i++) {
if (strArr[i].indexOf("=") > 0) {
item = strArr[i].split("=");
set[item[0]] = item[1];
}
}
return set;
};
private append(url: string, param: string): string {
if (url.indexOf("?") < 0) { return url + "?" + param; }
else {
if (/\?$/.test(url)) { return url + param; }
else { return url + "&" + param; }
}
}
private fix(p) {
if (p.data) { p.data = this.parseToQueryString(p.data); }
if (p.method.toUpperCase() == "GET" && p.data) { p.url = this.append(p.url, p.data); }
if (!p.cache) {
p.url = this.append(p.url, "abkjfjk=" + (new Date().getTime()) + "jrejhjdd");
}
}
private isOK(r) {
try {
return !r.status && location.protocol == "file:"
|| (r.status >= 200 && r.status < 300)
|| r.status == 304
|| navigator.userAgent.indexOf("Safari") >= 0 && r.status == undefined;
} catch (e) { }
return false;
}
private httpData(r, type: string) {
var res = type;
if (!res) {
var ct = r.getResponseHeader("Content-Type");
if (/xml/i.test(ct)) res = "xml";
else if (/JavaScript/i.test(ct)) res = "js";
else res = "";
}
switch (res) {
case "xml": return r.responseXML.documentElement;
case "js": return eval("(" + r.responseText + ")");
default: return r.responseText;
}
}
private getObj(id) {
return typeof id === OBJ ? id : doc.getElementById(id);
}
public appendTo(target) {//将返回的结果加到指定的目标[id或DOM对象]
if (!this.to) this.to = [];
this.to.push({ "target": this.getObj(target), "type": this.option.type });
return this;
}
public open() {
try {
this.request["open"](this.option.method, this.option.url, this.option.async);
if (/POST/i.test(this.option.method)) {
this.request["setRequestHeader"]("Content-Type", "application/x-www-form-urlencoded");
if (this.request["overrideMimeType"]) this.request["setRequestHeader"]("Connection", "close");
}
} catch (e) { throw new AjaxError(e.message) }
return this;
}
public send() {
try { this.request["send"](this.option.data); } catch (e) { throw new AjaxError(e.message); }
return this;
}
public stop() {
try { this.request["abort"](); } catch (e) { throw new AjaxError(e.message) }
return this;
}
public getText(fn?) { return this.exe({ "onSuccess": fn, "type": "text" }); }//fn可选
public getXML(fn?) { return this.exe({ "onSuccess": fn, "type": "xml" }); }
public getScript(fn?) { return this.exe({ "onSuccess": fn, "type": "js" }); }
public getHTML(fn?) { return this.exe({ "onSuccess": fn, "type": "html" }); }
public exe(options) {
if (options.onSuccess) this.option.onSuccess = options.onSuccess;
if (options.onError) this.option.onError = options.onError;
if (options.onComplete) this.option.onComplete = options.onComplete;
if (options.showStatus) this.option.showStatus = options.showStatus;
if (options.type) this.option.type = options.type;
try {
var isTimeout = false, cur = this.open();
var timer = setTimeout(function () {
isTimeout = true;
cur.stop();
cur.option.onError(new AjaxError("请求超时"));
}, cur.option.timeout);
var self = this;
this.request["onreadystatechange"] = function () {
cur.option.showStatus(cur.request["readyState"]);
if (cur.request["readyState"] == 4 && !isTimeout) {
try {
if (self.isOK(cur.request)) {//成功完成
var t = self.httpData(cur.request, cur.option.type);
if (cur.to && cur.to.length > 0) {
for (var i = 0; i < cur.to.length; i++) {
if (cur.to[i].type && cur.to[i].type == "html")
cur.to[i].target.innerHTML += t;
else cur.to[i].target.appendChild(doc.createTextNode(t));
}
}
cur.option.onSuccess(t);
}
else { cur.option.onError(new AjaxError("请求未成功完成")); }
} catch (et) {
cur.option.onError(new AjaxError(et.message));
} finally {
cur.option.onComplete();
// cur.request = null;
clearTimeout(timer);
}
}
};
this.send();
} catch (e) {
console.error(e);
this.option.onError(new AjaxError(e.message));
} finally {
return this;
}
}
}
}
function ajax(option) {
return new http.Ajax(option);
}