【Android】Crosswalk 开发浅析
最近的項(xiàng)目中，有用到phonegap，并需要展示一些需要高效渲染的網(wǎng)頁，同情況下，IOS跑起來輕松無比，但是Webview。。。。（淚奔），在焦頭爛額的機(jī)型及版本適配中，發(fā)現(xiàn)了Crosswalk項(xiàng)目。
一、 在使用 Crosswalk框架之前，我們必須得了解 Crosswalk
1. Crosswalk是一款開源的Web引擎，其基于 Chromium/Blink 的應(yīng)用運(yùn)行環(huán)境，對(duì)于混合開發(fā)的輕量級(jí)應(yīng)用尤為受歡迎。
2. crosswalk官網(wǎng)https://crosswalk-project.org/index_zh.html,很貼心的中文選項(xiàng)
3. 同時(shí)在使用前的聲明，如果你不能承受APK激增 20M~ OR 40M~ 體積的話，你懂得。當(dāng)然如果大家有好的APK瘦身方法，希望能得到指點(diǎn)。
4. 最近搞項(xiàng)目有嘗試過許多框架，這里Tencent X5也非常棒，至于ChromiumView貌似不再維護(hù)了
?二、開始應(yīng)用到項(xiàng)目
題主現(xiàn)階段給出為嵌入模式XWalkView 的一些api使用介紹，crosswalk有支持phonegap的插件替換其中系統(tǒng)webview，以獲取更強(qiáng)大功能，這個(gè)后續(xù)有時(shí)間會(huì)再次分享
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我們有幾點(diǎn)注意的地方
1. 要求最低版本 minSdkVersion 14
2. 硬件加速：android:hardwareAccelerated="true"
3. 權(quán)限要求：
<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 文檔地址)
//添加對(duì)javascript支持
XWalkPreferences.setValue("enable-javascript", true);
//開啟調(diào)式,支持谷歌瀏覽器調(diào)式
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類似
//設(shè)置滑動(dòng)樣式。。。
Xwalkview mXwview.setHorizontalScrollBarEnabled(false);
mXwview.setVerticalScrollBarEnabled(false);
mXwview.setScrollBarStyle(XWalkView.SCROLLBARS_OUTSIDE_INSET);
mXwview.setScrollbarFadingEnabled(true);
//獲取setting
mMSettings = mXwview.getSettings();
//支持空間導(dǎo)航
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處理頁面開始加載及加載完畢
同時(shí)在頁面縮放onScaleChanged或調(diào)用JsAlert中進(jìn)行相應(yīng)操作
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()錯(cuò)誤回調(diào)及shouldOverrideUrlLoading()方法，同時(shí)相比webview增加的有shouldInterceptLoadRequest，可以對(duì)url進(jìn)行監(jiān)聽及攔截操作
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. 監(jiān)聽back按鈕點(diǎn)擊事件
//改寫物理按鍵——返回的邏輯
@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. 同時(shí)不忘XWalkView令人心動(dòng)的一點(diǎn)，與Activity生命周期的綁定，對(duì)資源的更好回收和處理
@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可直接執(zhí)行js
js調(diào)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 **
以上是其官網(wǎng)提示混淆規(guī)則，但打包時(shí)仍存在問題，添加下方后解決
-keep? class? junit.framework.**{*;}
?
喲喲喲，切克鬧
接下來會(huì)發(fā)現(xiàn)，apk大了40M~有木有，讓我們打開apk
?
?
Arm和X86多出來的兩個(gè).so動(dòng)態(tài)庫，每個(gè)大概占了20m大小，這邊官方推薦的是分別打包上傳到谷歌市場(chǎng)，不同用戶手機(jī)處理器下載不同版本，但是這邊項(xiàng)目非上線版的，故而沒有去選擇
當(dāng)然，還有官網(wǎng)共享模式可以選擇
分別打包時(shí)，在gradle中聲明即可
productFlavors {
? ? ? ? ? ? ?armv7 {
? ? ? ? ? ? ? ? ? ? ndk {
? ? ? ? ? ? ? ? ? ? ? ? ? ?abiFilters "armeabi-v7a"
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?}
? ? ? ? ? ? x86 {
? ? ? ? ? ? ? ? ?ndk {
? ? ? ? ? ? ? ? ? ? abiFilters "x86"
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
}
依賴中添加（可去官網(wǎng)下載不同版本庫導(dǎo)入即可）
X86Compile ?project ''
Armv7Compile project ''
?
?
總結(jié)
以上是生活随笔為你收集整理的【Android】Crosswalk 开发浅析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 戴尔7559 安装ubuntu16.04
- 下一篇： 面试注意事项与技巧