Cordova 3集成Crosswalk

Crosswalk各版本下载地址
Language BUG
Galaxy Note 2闪屏
GapDebug Windows百度网盘

由于Android系统的碎片化严重，各种老旧webview对HTML5/CSS3支持的不好。在android各版本调试CSS兼容性简直就是噩梦，还要舍弃各种新的语法。
Crosswalk很好的解决了这个问题，他基于Chromium开发了强大的WebView，不仅解决了android webview碎片化问题，还支持各种HTML5/CSS3新语法。

缺点：

集成Crosswalk后，应用体积增加20M左右
只支持Android 4.0之后的系统(目前，4.0之前的市场占有率已经不足10%，Android Studio默认推荐的最低版本是API Level 15)

Cordova 4.0可以直接添加Crosswalk为插件，但是之前版本不支持，需要手动集成。如果是新建的项目，直接根据官网添加就可以了。

选择Crosswalk

项目使用的是Cordova 3.6，Android 编译版本是4.4.2。

当初要集成Crosswalk时，项目已接近尾声，升级Cordova不现实，下载了多个Crosswalk版本，发现Android编译环境是4.4.2的最新版本是10.39.235.16，所以选择了此版本集成。

下载地址

集成Crosswalk

解压Crosswalk，可以看到如下目录结构，

在Eclipse中导入framework，以及framework下的xwalk_core_library.
File-->Import-->Existing Android Code Into Workspace

右键你的项目-->Properties-->Android，在Library中添加crosswalk依赖，并且移除对CordovaLib的依赖，如下图

语言BUG

集成Crosswalk后，JS中调用 navigator.language 总是返回en-US，这是Crosswalk的BUG。

解决办法: 调用原生方法，在插件中加个方法调原生就可以了。

    /**
     * 获取系统语言
     * @param args
     * @param callbackContext
     * @throws JSONException
     */
    private void getLanguage(JSONArray args, final CallbackContext callbackContext) throws JSONException{
        String language = Locale.getDefault().getLanguage();
        callbackContext.success(language);
    }

三星Galaxy Note 2显示异常

在三星Galaxy Note 2上闪屏，这也是Crosswalk的BUG，通过关闭GPU Reasterization解决。

创建 assets/xwalk-command-line文件，文件内容只有一句话

xwalk --disable-gpu-rasterization

这个文件放在哪个project下？如果只放到你的主项目下，不起作用，framework和xwalk_core_library都添加此文件，肯定解决此问题。
不过，可能只放到fraemwork项目下就行，没有做测试，如果你有Galaxy Note 2可以做下测试。

以上就是项目集成Crosswalk的方法及问题处理，下面简单介绍下Debug工具。

GapDebug

GapDebug是免费的Crodova APP Debug工具，官网不翻墙可以打开，但下载需要翻墙，我在百度网盘上分享了Windows版本的，下载地址。

打开GapDebug，连接手机，运行Cordova App，就能看到下图，左侧是连接的设备和APP，右侧就是Chrome的调试窗口，就不多说了。

Crosswalk调试

如果你的项目集成了Crosswalk，不需要GapDebug，也可以调试。

在Chrome中打开 chrome://inspect，如下图：

点击inspect

不过有点杯具的是，在第一次打开调试窗口时，要翻墙，这两种方式都是这样。