Android WebView 與JS的資料互動
關於WebView
我們知道目前android市場上的一些應用採用的開發方式大致分為三種：Native App、Web App、Hybrid App。本文主要是Hybrid App中實現的主要技術native元件與js的資料互動的理解以及實現。
Android API中提供了WebView元件來實現對html的渲染。所謂的HybridApp開發方式即是彙集了HTML5、CSS3、jS的相關開發技術，以及資料交換格式json/XML。這顯然是Web開發工程師的技能。正是因為如此，眾多中小企業選擇了這種開發方式來減少對android開發工程師的過度依賴，至於這三種開發方式的比較與優劣不在本文考慮之列。
有了WebView這個元件，Android應用開發技術也就轉嫁到html與java資料互動上來。說白了就是js與WebView的資料互動，這就是本文所要討論的。
WebView與js的資料互動
1. WebView中載入靜態頁面
將WebView新增到應用中。和原生控制元件一樣，在layout引入WebView控制元件。程式碼片段如下：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/linearLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#000" android:orientation="horizontal" > <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
載入頁面：
webView = (WebView) findViewById(R.id.webview);
webView.loadUrl("file:///file:///android_asset/page.html");
page.html儲存在工程檔案的assets根目錄下。
2. 引入jquery mobile
引入js框架讓我們編寫的html頁面更接近於原生控制元件的顯示效果。目前主流的移動應用js框架有：jquery mobile和sencha
touch（jquery mobile與sencha touch的選型不在本文討論範圍）。本文選擇使用jquery mobile
首先，在webview新增對js的支援：
WebSettings setting = webView.getSettings();
setting.setJavaScriptEnabled(true);//支援js
增加對中文的支援:
WebSettings setting = webView.getSettings();
setting.setDefaultTextEncodingName("GBK");//設定字元編碼
設定頁面滾動條風格：
webView.setScrollBarStyle(0);//滾動條風格，為0指滾動條不佔用空間，直接覆蓋在網頁上jquery mobile提供的標準頁面模板TemplateForJQuery.html：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
頁面依賴的js庫、css等均放在assets目錄下,目錄組織結構如下：
執行應用後的截圖：
下面是button 的截圖，與原生控制元件沒什麼明顯區別，有種以假亂真的感覺：
3. 良好的使用者體驗
執行我們的應用發現，在擁有大量js的頁面被載入時，一直處於等待中，這是很糟糕的使用者體驗。可以加入進度條解決。注意到webview提供的兩個方法：setWebViewClient和setWebChromeClient。其中setWebChromeClient方法正是可以處理progress的載入，此外，還可以處理js對話方塊，在webview中顯示icon圖示等。對於處理progress的程式碼片段如下：
webView.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {// 載入進度改變而觸發
if (progress == 100) {
handler.sendEmptyMessage(1);// 如果全部載入,隱藏進度對話方塊
}
super.onProgressChanged(view, progress);
}
});
其中通過handler 訊息機制來處理UI執行緒的更新：
handler = new Handler() {
public void handleMessage(Message msg) {// 定義一個Handler，用於處理下載執行緒與UI間通訊
if (!Thread.currentThread().isInterrupted()){
switch (msg.what) {
case 0:
pd.show();// 顯示進度對話方塊
break;
case 1:
pd.hide();// 隱藏進度對話方塊，不可使用dismiss()、cancel(),否則再次呼叫show()時，顯示的對話方塊小圓圈不會動。
break;
}
}
super.handleMessage(msg);
}
};
對於setWebViewClient方法，一般用來處理html的載入（需要過載onPageStarted(WebView view, String url, Bitmap favicon)）、關閉（需要過載onPageFinished（WebViewview, String url）方法）。
setWebViewClient和setWebChromeClient的作用：前者主要用於處理webView的控制問題，如載入、關閉、錯誤處理等；後者主要處理js對話方塊、圖示、頁面標題等。
4. 獲取java中的資料
單獨構建一個介面，作為處理js與java的資料互動的橋樑，本文封裝的程式碼AndroidToastForJs.java如下:
public class AndroidToastForJs {
private Context mContext;
public AndroidToastForJs(Context context){
this.mContext = context;
}
//webview中呼叫toast原生元件
public void showToast(String toast) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
}
//webview中求和
public int sum(int a,int b){
return a+b;
}
//以json實現webview與js之間的資料互動
public String jsontohtml(){
JSONObject map;
JSONArray array = new JSONArray();
try {
map = new JSONObject();
map.put("name","aaron");
map.put("age", 25);
map.put("address", "中國上海");
array.put(map);
map = new JSONObject();
map.put("name","jacky");
map.put("age", 22);
map.put("address", "中國北京");
array.put(map);
map = new JSONObject();
map.put("name","vans");
map.put("age", 26);
map.put("address", "中國深圳");
map.put("phone","13888888888");
array.put(map);
} catch (JSONException e) {
e.printStackTrace();
}
return array.toString();
}
}
Webview提供的傳入js的方法：
webView.addJavascriptInterface(new AndroidToastForJs(mContext), "JavaScriptInterface");Html頁面jsonData.html設計的部分程式碼如下：
<script type="text/javascript">
var result = JavaScriptInterface.jsontohtml();
var obj = eval("("+result+")");//解析json字串
function showAndroidToast(toast)
{
JavaScriptInterface.showToast(toast);
}
function getjsonData(){
var result = JavaScriptInterface.jsontohtml();
var obj = eval("("+result+")");//解析json字串
for(i=0;i<obj.length;i++){
var user=obj[i];
document.write("<p>姓名:"+user.name+"</p>");
document.write("<p>年齡:"+user.age+"</p>");
document.write("<p>地址:"+user.address+"</p>");
if(user.phone!=null){
document.write("<p>手機號碼:"+user.address+"</p>");
}
}
}
function list(){
document.write("<div data-role='header'><p>another</p></div>");
}
</script>
</head>
<body>
<div data-role="page" >
<div data-role="header" data-theme="c">
<h1>Android via Interface</h1>
</div><!-- /header -->
<div data-role="content">
<button value="say hello" onclick="showAndroidToast('Hello,Android!')" data-theme="e"></button>
<button value="get json data" onclick="getjsonData()" data-theme="e"></button>
</div><!-- /content -->
<div data-role="collapsible" data-theme="c" data-content-theme="f">
<h3>I'm <script>document.write(obj[0].name);</script>,click to see my info</h3>
<p><script>document.write("<p>姓名："+obj[0].name+"</p>");</script></p>
<p><script>document.write("<p>年齡："+obj[0].age+"</p>");</script></p>
<p><script>document.write("<p>地址："+obj[0].address+"</p>");</script></p>
</div>
<div data-role="footer" data-theme="c">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
點選say hello按鈕執行的截圖如下：
