在egret中插入ajax,论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，但这时候存在相同键值对就会有警告，其实不碍事

其次，界面配置多状态：

多状态

可以根据不同语言定制不同界面，但是这种方法比较费时费力，扩展相对不易，但是呈现的效果确是最好的

同时，之前一些禁忌的东西就要使用了，代码如下：

source.disabled="btn_en_json.btn_1_png" />

这里加了btn_en_json前缀，这是精灵图片的方式，开发的时候最好不要用这种方式，但是有时候确是比较好的方式，includeIn可以保证不同状态下显示不同的按钮

由于不同界面的按钮不能够共用，这时候就会涉及到多个id的问题，由于id不能重复，所以只能用name。

获取组件的方式：

this.btn_1 = 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是这样写的:

在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);

这个问题这几天一直困扰这我，特此记录一下

8. 第三方库引入

浪费了我整整一天，刚创建的项目无法引入第三方库，即使你把egretProperties.json删掉也没有报错，瞬间就懵了。用什么egret build也没有用。

最后用egret clean才起作用，这个答案在网上根本找不到答案，不过现在有了，呵呵

9. 资源加载坑

资源加载本身是没有坑的，但是游戏或者网站升级有有坑了，因此有必要在资源路径后面加个随机数参数：

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

同时可以再次优化，随机数可以替换为md5,这样就不是每次加载都要刷新了，只有文件发生变化是才会重新请求资源，md5命令:

tm=$(md5 | awk -F " " '{print $4}')

10. 黑屏坑

在手机上部分手机部分会出现黑块、黑色背景

原因：

不支持eui.Rect设置透明度，若用其当做背景，如果透明度设置不为1，背景颜色设置为黑色，可能显示为完全黑色。解决方法：用半透明的图片替代eui.Rect作为背景

滚动文章背景全黑，原因：eui.Label文字长度超过1024。解决方法：用多个eui.Label切分字符串

11. 缩放坑

先看代码：

protected createChildren() {

super.createChildren();

this.button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.handleTouch, this);

...

}

public handleTouch(e: egret.TouchEvent) {

var x = e.stageX;

var y = e.stageY;

console.log(e.stageX, e.stageY);

...

}

关于点击事件，貌似这样没有什么问题。但是如果你在this.button的父节点或者当前界面设置了scale，那么要小心了，因为或许你获得的stageX和stageY会发生严重偏移，这时候怎么样才能得到真正的点击位置呢。

var x = e.stageX / scaleX;

var y = e.stageY / scaleY;

这里的scaleX和scaleY就是this.button的父节点或者当前界面设置得缩放值。

结束

以下是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 = [];

if (obj instanceof Array) {//假定为数组

let arr: Array = >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);

}