Crosswalk是一款開源的web引擎。目前Crosswalk正式支持的移動操做系統包括Android和Tizen，在Android 4.0及以上的系統中使用Crosswalk的Web應用程序在HTML5方面能夠有一致的體驗，同時和系統的整合交互方面（好比啓動畫面、權限管理、應用切換、社交分享等等）能夠作到相似原生應用。如今Crosswalk已經成爲衆多知名HTML5平臺和應用的推薦引擎，包括Google Mobile Chrome App、Intel XDK、Famo.us和Construct2等等，將來的Cordova 4.0也計劃集成Crosswalk。html
下載的時候有些小迷茫，不知道應該下載哪一個，入門的話，仍是使用下圖的穩定版本好了。
java
-
集成到應用中
1.下載zip包，而後參考 Android Studio如何Import Module 即項目依賴（針對非Gradle項目，以Crosswalk爲例） 中的介紹，創建Android Studio工程，而且導入到項目中。android
2.在AndroidManifest.xml中增長以下權限web
|
1
2
3
4
5
6
7
8
9
|
<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.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
|
使用XWalkView必須開啓硬件加速，修改AndroidManifest.xmljson
|
1
2
3
4
|
<application
android
:name="android.app.Application"
android
:label="XWalkUsers"
android
:hardwareAccelerated="true">
|
-
基本使用
Crosswalk中用來替代WebView的控件叫XWalkViewapi
1.layout文件寫法網絡
|
1
2
3
4
5
6
|
<org.xwalk.core.XWalkView
android:id="@+id/activity_main"
xmlns
:android="http://schemas.android.com/apk/res/android"
android
:layout_width="fill_parent"
android
:layout_height="fill_parent">
</org.xwalk.core.XWalkView>
|
2.代碼中使用
和其餘Android的控件不一樣，這個類須要監聽系統事件。例如：生命週期、intent、Activity result。
控件內置的Web引擎須要獲取並處理這些信息。而且當XWalkView 再也不須要使用的時候，在onDestroy方法中XWalkView必須顯式的調用destroy方法，不然容易形成Web引擎的內存泄漏。app
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
import android.content.Intent;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import org.xwalk.core.XWalkView;
public class MainActivity extends ActionBarActivity {
private XWalkView mXWalkView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mXWalkView = (XWalkView) findViewById(R.id.activity_main);
mXWalkView.load("http://crosswalk-project.org/", null);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
protected void onPause() {
super.onPause();
if (mXWalkView != null) {
mXWalkView.pauseTimers();
mXWalkView.onHide();
}
}
@Override
protected void onResume() {
super.onResume();
if (mXWalkView != null) {
mXWalkView.resumeTimers();
mXWalkView.onShow();
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mXWalkView != null) {
mXWalkView.onDestroy();
}
}
@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);
}
}
}
|
3.loadUrl去哪了？編輯器
上面的代碼中其實已經劇透了，使用load方法便可。
|
1
2
3
4
5
|
// url
mXWalkView.load("http://crosswalk-project.org/", null);
// this loads a file from the assets/ directory
mXWalkView.load("file:///android_asset/index.html", null);
|
4.WebViewClient？
對應WebView的WebViewClient，XWalkView中有XWalkResourceClient。
|
1
2
3
4
5
6
7
8
9
10
|
mXWalkView.setResourceClient(new XWalkResourceClient(mXWalkView){
@Override
public void onLoadFinished(XWalkView view, String url) {
super.onLoadFinished(view, url);
}
@Override
public void onLoadStarted(XWalkView view, String url) {
super.onLoadStarted(view, url);
}
});
|
-
調用JavaScript
不像WebView同樣獲取setting設置setJavaScriptEnabled爲true才能執行。
Crosswalk能夠直接執行js。
|
1
|
mXWalkView.load("javascript:document.body.contentEditable=true;", null);
|
固然，按照Kitkat引入的方式，使用evaluateJavascript方法也是能夠的。（大神們推薦）
-
JavaScript回調Java
- 定義js回調接口
12345678public class JsInterface {public JsInterface() {}@JavascriptInterfacepublic String sayHello() {return "Hello World!";}}
Caution: If you've set your targetSdkVersion to 17 or higher, you must add the @JavascriptInterface annotation to any method that you want available to your JavaScript (the method must also be public). If you do not provide the annotation, the method is not accessible by your web page when running on Android 4.2 or higher.
From developer.android.com備註：這裏的
1@JavaScriptInterface所在的包是
1import org.xwalk.core.JavascriptInterface; - XWalkView設置JavaScript可用且綁定對象 12//綁定mXWalkView.addJavascriptInterface(new JsInterface(), "NativeInterface");
- 調用html執行JavaScript或直接執行Javascript調用Java 1mXWalkView.load("file:///android_asset/index.html", null);
index.html源碼：
12345<a href="#" onclick="clicked()">Say Hello</a> <script>function clicked() {alert(NativeInterface.sayHello());}</script>
-
高級使用
調試
Kitkat開始，Android提供了和Chrome聯調功能。能夠很方便的在Chrome中調試WebView中的代碼。
Crosswalk使用Chromium內核固然也具有這個功能。
開啓調試的語句以下：
|
1
2
|
// turn on debugging
XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);
|
對於Crosswalk來講，這個設置是全局的。
使用動畫或者設置隱藏可見注意
默認XWalkView不能使用動畫，甚至setVisibility也不行。
XWalkView represents an Android view for web apps/pages. Thus most of attributes for Android view are valid for this class. Since it internally uses android.view.SurfaceView for rendering web pages by default, it can't be resized, rotated, transformed and animated due to the limitations of SurfaceView. Alternatively, if the preference key ANIMATABLE_XWALK_VIEW is set to True, XWalkView can be transformed and animated because TextureView is intentionally used to render web pages for animation support. Besides, XWalkView won't be rendered if it's invisible.
開啓動畫模式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// ANIMATABLE_XWALK_VIEW preference key MUST be set before XWalkView creation.
XWalkPreferences.setValue(XWalkPreferences.ANIMATABLE_XWALK_VIEW, true);
setContentView(R.layout.animatable_xwview_layout);
}
@Override
public void onDestroy() {
super.onDestroy();
// Reset the preference for animatable XWalkView.
XWalkPreferences.setValue(XWalkPreferences.ANIMATABLE_XWALK_VIEW, false);
}
|
因爲設置也像調試同樣是全局的，在onDestroy時記得關閉。
暫停JS timer
html代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<script>
var myVar = setInterval(function(){ myTimer(); }, 1000);
function myTimer()
{
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("demo").innerHTML = t;
}
</script>
</body>
</html>
|
XWalkView對應方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
mButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if (mXWalkView != null) {
if (!isPaused) {
// Pause JS timer
mXWalkView.pauseTimers();
isPaused = true;
mButton.setImageResource(android.R.drawable.ic_media_play);
} else {
// Resume JS timer
mXWalkView.resumeTimers();
isPaused = false;
mButton.setImageResource(android.R.drawable.ic_media_pause);
}
}
}
});
|
這也在防止內存泄漏，監聽系統事件示例代碼中提到過：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
@Override
protected void onPause() {
super.onPause();
if (mXWalkView != null) {
mXWalkView.pauseTimers();
mXWalkView.onHide();
}
}
@Override
protected void onResume() {
super.onResume();
if (mXWalkView != null) {
mXWalkView.resumeTimers();
mXWalkView.onShow();
}
}
|
歷史記錄
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
mPrevButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// Go backward
if (mXWalkView != null &&
mXWalkView.getNavigationHistory().canGoBack()) {
mXWalkView.getNavigationHistory().navigate(
XWalkNavigationHistory.Direction.BACKWARD, 1);
}
XWalkNavigationItem navigationItem = mXWalkView.getNavigationHistory().getCurrentItem();
showNavigationItemInfo(navigationItem);
}
});
mNextButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// Go forward
if (mXWalkView != null &&
mXWalkView.getNavigationHistory().canGoForward()) {
mXWalkView.getNavigationHistory().navigate(
XWalkNavigationHistory.Direction.FORWARD, 1);
}
XWalkNavigationItem navigationItem = mXWalkView.getNavigationHistory().getCurrentItem();
showNavigationItemInfo(navigationItem);
}
});
private void showNavigationItemInfo(XWalkNavigationItem navigationItem){
url = navigationItem.getUrl();// Get the url of current navigation item.
originalUrl = navigationItem.getOriginalUrl();// Get the original url of current navigation item
title = navigationItem.getTitle();
text1.setText(title);
text2.setText(url);
text3.setText(originalUrl);
}
|
自動視頻暫停
|
1
2
3
|
// The web page below will display a video.
// When home button is pressed, the activity will be in background, and the video will be paused.
mXWalkView.load("http://www.w3.org/2010/05/video/mediaevents.html", null);
|
loadAppFromManifest
|
1
|
mXWalkView.loadAppFromManifest("file:///android_asset/manifest.json", null);
|
manifest.json
|
1
2
3
4
5
6
|
{
"name": "ManifestTest",
"start_url": "index.html",
"description": "Manifest test",
"version": "1.0.0"
}
|
《Crosswalk入門》上有29條評論
您好，我在編寫這個例子的時候，Andriod設備上出現 XWalkUsers已中止運行，不知道是什麼緣由致使的？不知道你有沒有遇到相同的問題？
通常是因爲您指定的編譯android版本過高致使的，好比您手機是Android4.2的，那麼編譯的時候卻選擇了5.0的版本號，好比 原本應該是 android-19 ，卻使用了android-22
您好，我以前用的webview攔截html加載JS和CSS資源，webclient中有兩個方法@Override
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
return super.shouldInterceptRequest(view, request);
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return super.shouldOverrideUrlLoading(view, url);
}
下面那個已經被廢棄了 SDK20以上用上面的，我想判斷http的請求方式，只能用下面的那個，也就是說20以上才能判斷，請問XWalkView有沒有判斷請求方式的方法呢？
明天到公司查查資料，看看！
http://stackoverflow.com/questions/26180217/shouldoverrideurlloading-on-custom-cordova-cordovawebviewclient-not-working-anym不妨試試
你好,看你寫的貼幫助頗大, 請問xwalkview如何判斷網絡鏈接失敗?由於xwalkview在沒有網絡的狀況下會alert network lost,如何覆蓋這個事件?謝謝
暫時沒處理過這個方面的東西，實在搞不定的話，直接修改源代碼好了！
你好 官網的架包亂七八糟的 導入工程用不了
就不能像普通第三方架包那樣導入依賴嗎
呵呵，這個只能是慢慢搗鼓了，這個是全部開源軟件的通病的！
你好，使用crosswalk後，5.0以上的android手機會運行出錯，知道怎麼處理嗎？
補充一下：demo使用的是arm32bit包，在4.4可運行，5.0也能夠。可是挪到本身項目中，5.0系統報錯，log以下：
java.lang.UnsatisfiedLinkError: No implementation found for long com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create()
at com.baidu.platform.comapi.util.f.b(Unknown Source)
at com.baidu.platform.comapi.a.c(Unknown Source)
at com.baidu.platform.comapi.c.a(Unknown Source)
at com.baidu.mapapi.SDKInitializer.initialize(Unknown Source)
at com.baidu.mapapi.SDKInitializer.initialize(Unknown Source)
可是項目中沒有引入crosswalk能夠正常調用百度SDK的。
有沒有大神知道如何處理的？求教
沒有這麼用過的！
使用crosswalk 播放電視劇視頻時，點擊全屏橫屏播放（愛奇藝），而後播放完一集，在他播放廣告，點擊廣告時他去到廣告，但全部的視圖被撐大，回不來，返回也同樣，只能再點擊全屏，再點擊退出全屏才能正常顯示
那你的運行在5.0以上有問題嗎？
我當時處理這些問題的時候，5.0尚未普及到，基本上沒有測試過的。
有問題
請問視屏播放怎麼中止，調用pauseTimers()中止不了的
這個怎麼設置無圖模式？
最新的提供下載接口Xwalkview.setDownloadListener，但不是全部的點擊下載都進入這個方法，怎麼辦？
請問有源碼麼 求源碼...
這個就是開源的，直接去官網下載便可
CrossWalk的shouldInterceptLoadRequest不能攔截獲取js的window.location.href跳轉，請問有什麼辦法能夠解決嗎？
大神你好,我使用這個播放HTML中附帶的視頻,點擊全屏後沒有效果,請問怎麼處理,已經重寫那onFullscreenToggled()方法,debug發現點全屏的時候不會進來,求教.....
抱歉，已經好久不折騰相關的問題了
多謝小編的XWalkPreferences.setValue(XWalkPreferences.ANIMATABLE_XWALK_VIEW, true);解決了個人問題 多謝！ 感激感激！！！
java.lang.NoClassDefFoundError: org.xwalk.core.R$string
這是什麼緣由形成的，搞不定了，求大神指導
這種問題，通常都是clean而後從新rebuild的
couldn't get XW_Initialize function.在5.1的系統上使用出現的問題
怎麼解決
這個很久了，已經不搗鼓了，估計是代碼變動問題，試試其餘版本看看