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
不过有点杯具的是,在第一次打开调试窗口时,要翻墙,这两种方式都是这样。