(原)那些让开发变得不太顺利的厂商

题记) cocos2d-x似乎很好,然其不同版本的差异性,兼容性让人无奈,其在wp下webSocket的问题,Sqlite的问题似乎始终抹不去,U3D似乎看起来不错,开发帧-帧的调试确实不错,基于Mono的运行环境,然在中低端机器下,3D似乎运行总是那么不完美,2D看起来似乎总是那么差。然引擎而已,有高有低,所有的应用-游戏对于程序员来说,最终都是比的内功。

 

1)安卓的坑

  开发第一个项目的时候,需求是游戏+应用的结合,应用部分的图片量相当的大,整个页面几乎全是图片,连文字都是使用图片打上去,游戏部分为cocos2dx。

整个系统使用TabActivity,小雷音寺绕过ASM自行管理Activity诞生的选项卡切换是多么的优美,直到它的出现:OOM。

  在安卓系统中OOM一般分为总体OOM和单个OOM,单个OOM为一个资源加载后出现OOM,总体为内存中全部资源加载总和产生OOM,由于项目选项卡多达10余个,

在切换选项卡后,小雷音寺并没有及时的释放前一个选项卡资源所占用的内存,当快速多次切换选项卡后,出现OOM。

  经过多次折腾,决定使用Fragment替换小雷音,并且将所有的资源全部手动加载,手动GC,在不同的机型测试后,效果不错,感觉一切似乎都是那么完美,直到它的出现:

小米3,装在小米3后,多次切换后,毅然OOM,似乎手动GC对其并没有生效,调试之,果然,在其他手机上手动GC后内存被释放,然在小米上,手动GC后,资源依旧存在,当再次加载后直接内存取出,看来手动GC在小米上生效了,但是小米什么时候才真正的GC,它说了算。由于图片资源较大,于是一次加载背景大图后,OOM。

  不得已之,针对小米3使用程序切换,将资源切成小横条,逐个加载,减少进入大小,同时舍弃效果极度压缩图片。小米3成功带来了一天一夜的工作时间,为成长的道路添加了一点能量。

 

2)HTML5的坑

  由于微信小游戏发展不错,公司决定花点时间差不多一天开发2-3个类似神经病猫的东西,于是着手写了一点小东西,由于在移动端,浏览器内核导致双击放大,单击会有300毫秒的延迟,这300毫秒乃水果公司在移动设备刚起步的时候为了更好的在移动端展示页面设计,被各个移动浏览器复制,这里有一个问题,便是当点击了移动设备的超级链接,浏览器不知到是真的要跳转,还是双击放大,于是便诞生了300毫秒延迟,如果300毫秒产生了第二次点击,则双击放大,如果没有,则视为一次点击。

  今天,由于响应式布局的产生,双击放大的效果不再适用了,人们迫不及待的要去掉它,于是google率先产生了:

 

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

 

如此以来便可以禁止双击放大,然而这个解决方案看似完美,但也带来一个明显的缺陷 —— 你必须完全禁用缩放来达到目的,而从移动端站点的可用性和可访问性来看,缩放是相当关键的一环。你很可能已经遇到过这个问题,即你想要放大一张图片或者一段字体较小的文本,却发现无法完成操作。只能说 Android 平台上的 Chrome 和 Firefox 浏览器提供的禁用缩放优化,仅适用于 web 游戏等某些特定的场景,但多数网站并不能从中获益。

 

于是google又想出了一个办法:

<meta name="viewport" content="width=device-width">

这条代码告诉浏览器将视口大小设为设备本身的尺寸。这在 iPhone 上的效果就是把视口宽度从默认的 980 像素改为 320 像素。

这样可以解决屏幕显示问题,同时可以禁掉双击放大的效果,没有了双击放大,自然不存在300毫秒的延迟,本以为一切是这么的顺利,知道遇到了 它:

小米,当应用在小米上用微信打开后,双击放大效果消失,点击后依然存在300毫秒的延时,点击事件在延迟了300毫秒后才被成功执行。唯独在小米手机上。

移动浏览器上触发click事件与一个物理Tap(敲击)之间存在300毫秒的物理延迟,一切似乎都那么说不通却又摆在面前不得不解决。

既然移动浏览器的事件存在延迟,那么如果接收并且处理浏览器事件并不是浏览器,而是由我们自己的代码去接收并且处理呢,这样似乎可以彻底解决这个问题。

 

大概google之后发现一个东西:FastClick,看了大概,其便是模仿浏览器处理事件,代替浏览器自带触屏事件,同时发送消息,响应用户:

var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'];
    var context = this;
    for (var i = 0, l = methods.length; i < l; i++) {
        context[methods[i]] = bind(context[methods[i]], context);
    }

可以设置哪几种事件被接收,同时模拟事件处理:

FastClick.prototype.sendClick = function(targetElement, event) {
    'use strict';
    var clickEvent, touch;

    // On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)
    if (document.activeElement && document.activeElement !== targetElement) {
        document.activeElement.blur();
    }

    touch = event.changedTouches[0];

    // Synthesise a click event, with an extra attribute so it can be tracked
    clickEvent = document.createEvent('MouseEvents');
    clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
    clickEvent.forwardedTouchEvent = true;
    targetElement.dispatchEvent(clickEvent);
};

FastClick.prototype.determineEventType = function(targetElement) {
    'use strict';

    //Issue #159: Android Chrome Select Box does not open with a synthetic click event
    if (deviceIsAndroid && targetElement.tagName.toLowerCase() === 'select') {
        return 'mousedown';
    }

    return 'click';
};

 

申明我们的系统使用FastClick只需要:

FastClick.attach(document.body);
        Array.prototype.forEach.call(document.getElementsByClassName('test'), function(testEl) {
            testEl.addEventListener('click', function() {
                textInput.focus();
            }, false)
        });
    }, false);

 

在小米上,终于没了300毫秒的黑色延迟。

后记)

  开发的道路上,越行越远。。

posted @ 2014-08-13 22:37  衍悔  阅读(1442)  评论(2编辑  收藏  举报