Crosswalk 开发浅析

最近的项目中,有用到phonegap,并需要展示一些需要高效渲染的网页,同情况下,IOS跑起来轻松无比,但是Webview。。。。(泪奔),在焦头烂额的机型及版本适配中,发现了Crosswalk项目。

一、 在使用 Crosswalk框架之前,我们必须得了解 Crosswalk


1. Crosswalk是一款开源的Web引擎,其基于 Chromium/Blink 的应用运行环境,对于混合开发的轻量级应用尤为受欢迎。

2. crosswalk官网https://crosswalk-project.org/index_zh.html,很贴心的中文选项

3. 同时在使用前的声明,如果你不能承受APK激增 20M~ OR 40M~ 体积的话,你懂得。当然如果大家有好的APK瘦身方法,希望能得到指点。

4. 最近搞项目有尝试过许多框架,这里Tencent X5也非常棒,至于ChromiumView貌似不再维护了

 二、开始应用到项目


题主现阶段给出为嵌入模式XWalkView 的一些api使用介绍,crosswalk有支持phonegap的插件替换其中系统webview,以获取更强大功能,这个后续有时间会再次分享

1.首先在greadle 中声明 maven仓库,并添加库的依赖

repositories {

        maven {

             url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'

         }

 }

compile 'org.xwalk:xwalk_core_library:18.48.477.13'

2 . 接下来使用的XwalkView我们有几点注意的地方

1. 要求最低版本 minSdkVersion 14

2. 硬件加速:android:hardwareAccelerated="true"

3. 权限要求:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>

<uses-permission android:name="android.permission.INTERNET"/>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

4.

<org.xwalk.core.XWalkView android:id="@+id/xw"

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

ndroid:layout_height="fill_parent">

</org.xwalk.core.XWalkView>

 三、API使用


1. XWalkPreferences配置(API 文档地址)

//添加对javascript支持

XWalkPreferences.setValue("enable-javascript", true);

//开启调式,支持谷歌浏览器调式

XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);

//置是否允许通过file url加载的Javascript可以访问其他的源,包括其他的文件和http,https等其他的源XWalkPreferences.setValue(XWalkPreferences.ALLOW_UNIVERSAL_ACCESS_FROM_FILE, true);

//JAVASCRIPT_CAN_OPEN_WINDOW

XWalkPreferences.setValue(XWalkPreferences.JAVASCRIPT_CAN_OPEN_WINDOW, true);

// enable multiple windows.

XWalkPreferences.setValue(XWalkPreferences.SUPPORT_MULTIPLE_WINDOWS, true);


2. 一些基本的api和webview类似

//设置滑动样式。。。

Xwalkview mXwview.setHorizontalScrollBarEnabled(false);

mXwview.setVerticalScrollBarEnabled(false);

mXwview.setScrollBarStyle(XWalkView.SCROLLBARS_OUTSIDE_INSET);

mXwview.setScrollbarFadingEnabled(true);

//获取setting

mMSettings = mXwview.getSettings();

//支持空间导航

mMSettings.setSupportSpatialNavigation(true);

mMSettings.setBuiltInZoomControls(true);

mMSettings.setSupportZoom(true);

3. 加载

mXwview.load(url, null);

mXwview.setDrawingCacheEnabled(false);//不使用缓存

mXwview.getNavigationHistory().clear();//清除历史记录

mXwview.clearCache(true);//清楚包括磁盘缓存

4. XWalkView没了webview的setwebviewclient api 增加了setUIClient 和setResourceClient

顾名思义,UI变化及资源加载

1 .我们可以在XWalkUIClient中覆盖方法onPageLoadStarted及onPageLoadStopped处理页面开始加载及加载完毕

同时在页面缩放onScaleChanged或调用JsAlert中进行相应操作

mXwview.setUIClient(new XWalkUIClient(mXwview) {

            @Override

             public void onPageLoadStarted(XWalkView view, String url) {

                   super.onPageLoadStarted(view, url);

             }

            @Override

            public boolean onJsAlert(XWalkView view, String url, String message, XWalkJavascriptResult result) {

                         return super.onJsAlert(view, url, message, result);

             }

             @Override

             public void onScaleChanged(XWalkView view, float oldScale, float newScale) {

                          if (view != null) {

                                 view.invalidate();

                          }

                        super.onScaleChanged(view, oldScale, newScale);

             }

               @Override

              public void onPageLoadStopped(XWalkView view, String url, LoadStatus status) {

                          super.onPageLoadStopped(view, url, status);

                }

});

2 .在XWalkResourceClient中同样有我们熟悉的onReceivedLoadError()错误回调及shouldOverrideUrlLoading()方法,同时相比webview增加的有shouldInterceptLoadRequest,可以对url进行监听及拦截操作

mXwview.setResourceClient(new XWalkResourceClient(mXwview) {

         @Override

         public void onReceivedLoadError(XWalkView view, int errorCode, String description, String failingUrl) {

                       super.onReceivedLoadError(view, errorCode, description, failingUrl);

}

            @Override

            public WebResourceResponse shouldInterceptLoadRequest(XWalkView view, String url) {

                LogUtils.d("http", "shouldOverrideUrlLoading-url=" + url);

                return super.shouldInterceptLoadRequest(view, url);

}

           @Override

           public boolean shouldOverrideUrlLoading(XWalkView view, String url) {

                      odlurl= url;

                      return super.shouldOverrideUrlLoading(view, url);

             }

});

5. 监听back按钮点击事件

//改写物理按键——返回的逻辑

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

            if (keyCode == KeyEvent.KEYCODE_BACK) {

                      if (mXwview.getNavigationHistory().canGoBack()) {

                                                                                              mXwview.getNavigationHistory().navigate(XWalkNavigationHistory.Direction.BACKWARD, 1); //返回上一页面

                      } else {

                       /*finish();*/

                      }

                      return true;

          }

           return super.onKeyDown(keyCode, event);

}

6. 同时不忘XWalkView令人心动的一点,与Activity生命周期的绑定,对资源的更好回收和处理

@Override

protected void onDestroy() {

            super.onDestroy();

             if (mXwview != null) {

               mXwview.onDestroy();

             }

              android.os.Process.killProcess(android.os.Process.myPid());

}

@Override

protected void onPause() {

                super.onPause();

               if (mXwview != null) {

                mXwview.pauseTimers();

                mXwview.onHide();

              }

}

@Override

protected void onResume() {

               super.onResume();

               if (mXwview != null) {

                      mXwview.resumeTimers();

                       mXwview.onShow();

                }

}

@Override

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

         if (mXwalkView != null) {

                 mXwalkView.onActivityResult(requestCode, resultCode, data);

          }

}

@Override

protected void onNewIntent(Intent intent) {

         if (mXwalkView != null) {

                mXwalkView.onNewIntent(intent);

          }

}

7.XWalkView可直接执行js

js调java用@JavascriptInterface注解声明即可

public class FromJs{

        public   FromJs(){}

        @JavascriptInterface

         public String fromJsMethod() {

                   return "js-------------";

          }

}

mXWalkView.addJavascriptInterface(new FromJs(),"NativeInterface");


8. cookies使用

XWalkCookieManager xm = new XWalkCookieManager();

xm.setAcceptCookie(true);

xm.setCookie(url, cookie);



四、好的,做好这一步,让我们来混淆打包吧

混淆:

-keep class org.xwalk.core.** { *;}

-keep class org.chromium.** { *;}

-keepattributes **

以上是其官网提示混淆规则,但打包时仍存在问题,添加下方后解决

-keep  class  junit.framework.**{*;}


哟哟哟,切克闹

接下来会发现,apk大了40M~有木有,让我们打开apk



Arm和X86多出来的两个.so动态库,每个大概占了20m大小,这边官方推荐的是分别打包上传到谷歌市场,不同用户手机处理器下载不同版本,但是这边项目非上线版的,故而没有去选择

当然,还有官网共享模式可以选择

分别打包时,在gradle中声明即可

productFlavors {

             armv7 {

                    ndk {

                           abiFilters "armeabi-v7a"

                    }

               }

            x86 {

                 ndk {

                    abiFilters "x86"

                 }

           }

}

依赖中添加(可去官网下载不同版本库导入即可)

X86Compile  project ''

Armv7Compile project ''



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

推荐阅读更多精彩内容