XWalkView+html 開發Android應用

在Android開發中有時候為了開發簡潔和方便移植，采用了Html+WebView的開發模式，然而Android自帶的WebView控件是調用的本機的瀏覽器內核，有些版本較老的手機瀏覽器和手機性能都不能滿足需求(表現在html5不兼容、體驗不流暢等地方)。

XWalkView是一個基於Chrome內核的移動端瀏覽器控件，官方介紹是為了保證在所有機器上Html體驗一致(官方網站：https://crosswalk-project.org/)。

下面說說集成的方法，開發過程中遇到過很多坑，記錄下來希望對同樣使用這款控件的人有用，也給自己留個筆記。

首先，去下載需要的控件版本，地址：https://crosswalk-project.org/documentation/downloads.html，有很多選項可以選，這里我使用Android webview(x86) 32位的(模擬器使用，實體機請下載ARM，如圖1)。

圖1

下載下來后是一個Android工程，打開eclipse，導入這個工程(見圖2)。

圖2

自己新建一個Android項目，加入以下幾個權限。

/*網絡訪問權限*/
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    
/*磁盤訪問權限*/
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

再將activity_main.xml中的控件先移除，加入XWalkView控件布局。

<org.xwalk.core.XWalkView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/xwalk"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
</org.xwalk.core.XWalkView>

對應的MainActivity.java的OnCreate方法中加入初始化代碼。

//設置允許訪問瀏覽器頁面的js方法
XWalkPreferences.setValue("enable-javascript", true);
XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);

//獲取XWalkView 控件，並讓它訪問百度
XWalkView xWalkView = (XWalkView) findViewById(R.id.activity_main);				
xWalkView.load("http://www.baidu.com", null);

此時系統是找不到XWalkView 引用的，需要將下載的crosswalk-webview工程作為library引用(見圖3)。

圖3

 

到此，運行工程，一般來說應該能看到主頁加載了百度首頁，這里只是一個測試，表明我們已經集成了XWalkView控件。

 

下面寫下如何實現自定義的Html JS和Java后台互操作。這個和WebView提供的Java和JS互操作寫法基本一致，不同點在於引用部分。

第一部分，JS調用Java

創建一個類JSServer，代碼如下。

package com.example.Service;

import org.xwalk.core.JavascriptInterface;
import org.xwalk.core.XWalkView;

import com.example.webview.R;

import android.app.Activity;
import android.content.Context;

public class JSService {
	Context context;

	public JSService(Context c) {
		context = c;
	}
	
	/**
	 * 跳轉到指定的url
	 * @param url
	 */
	@org.xwalk.core.JavascriptInterface
	public void GoToUrl(String url) {
		Activity activity = (Activity) context;
		final XWalkView walkView = (XWalkView)activity.findViewById(R.id.activity_main);
		final String httpUrl=url;
		
		walkView.post(new Runnable() {
			@Override
			public void run() {
				walkView.load(httpUrl, null);
			}
		});		
	}
}

需要注意的就是引用的是上述兩處標黃的地方。然后在MainActivity.java的OnCreate方法中加上初始化方法。

xWalkView.addJavascriptInterface(new JSService(MainActivity.this),
				"AndroidJS");

"AndroidJS"就表示Html中js調用時候的方法名，js可以這么寫。

<script>
	function goto(url){
		AndroidJS.GoToUrl(url);
	}
</script>

 

第二部分，Java調用Html中JS方法

假設js中有這么一個方法。

<script>
	function showMsg(name,msg){
		alert(name+"說："+msg);
	}
</script>

Java需要調用這個方法，直接這么寫。

xWalkView.load("javascript:compare('張三','能看到xWalkView彈出的消息嗎？')",null);

 

至此，xWalkView的基本使用方法記錄完畢，希望對看到這篇博客的人有所幫助。這應該是在現在公司寫下的最后一篇博客了，明天即將離職，願自己能在新的公司過的更開心一些。

更多個人工作中的項目請訪問我的個人網站：www.88gis.cn