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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,270评论 25 707
  • 关于 android Webview 基本使用 加载html四种方式 简单使用 在AndroidManifest....
    小面包屑阅读 5,371评论 2 13
  • 广州被称为花都一点都不为过,一年四季的花儿路旁,阳台,办公桌上。宜木的气候使得花木特别容易生长,加上离昆明也近,消...
    府罗将相阅读 189评论 0 0
  • 程序员的入门规划 1.我该学习什么语言? 这个问题困扰了几乎所有的程序员,比如java应用广好就业,比如php入门...
    tommy123阅读 2,504评论 1 16
  • 说到Git,必须要先谈一下版本控制。什么是版本控制?我为什么要关心它呢?版本控制是一种记录一个或若干文件内容变化,...
    voQuan阅读 1,602评论 0 2