最近的項目中，有用到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 ''

?

?

總結

以上是生活随笔為你收集整理的【Android】Crosswalk 开发浅析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。