研究JS的目的，項目開發過程中由於需要繪制中國地圖及其個個省份，地圖的繪制工作也算是很簡單，但是由於Android上對這快的繪制並不支持，所以這里調研了下關於JS這塊的繪制處理，JQuery這塊支持繪制SVG繪制方式，當然Android也是支持SVG繪制，這里由於兼容問題，SVG的支持Android的支持版本最低是5.0，故而這個思路不可循。這里Android對能和JS交互就想到了WebView，這也是這篇博客研究的由來。
先前對這塊僅僅是坐着了解的態度，現在也算是現學現用吧。
咱們直接看代碼，現看XML文件，界面布局，WebView + Button
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.jquerymap.MainActivity" >
<WebView
android:id="@+id/webview_map"
android:layout_width="match_parent"
android:layout_height="200dp" />
<Button
android:id="@+id/btnJava2Js"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/webview_map"
android:text="java2js"
/>
</RelativeLayout>
上邊說到了WebView，這里咱們簡單的寫個本地的Html界面，處理相應的java2js已經js2java的邏輯.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script type="text/javascript">
function javacalljswithargs(arg){
document.getElementById("content").innerHTML +=
("<br\>"+arg);
}
</script>
</head>
<body>
this is my html <br/>
<!-- window.android.startFunction()
window:窗體對象
android:是該出傳入的字段 mWebViewMap.addJavascriptInterface(this, "android");
startFunction(): 是該出傳入的this對象中的方法 mWebViewMap.addJavascriptInterface(this, "android");
-->
<a onClick="window.android.startFunction()">點擊調用java代碼</a><br/>
<a onClick="window.android.startFunction('hello java')" >點擊調用java代碼並傳遞參數</a>
<br/>
<div id="content">內容顯示</div>
</body>
</html>
window:窗體對象
android:是該出傳入的字段 mWebViewMap.addJavascriptInterface(this, "android");
startFunction(): 是該出傳入的this對象中的方法 mWebViewMap.addJavascriptInterface(this, "android");
下面是關於交互界面的代碼邏輯MainActivity，這里說明下，@JavascriptInterface注解必須在當前js回調方法下加以標准，否則會報如下錯誤
02-14 14:56:13.704: I/chromium(8820): [INFO:CONSOLE(19)] "Uncaught Error: Method not found", source: file:///android_asset/index.html (19)
package com.example.jquerymap;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;
@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {
private WebView mWebViewMap;
@SuppressLint("JavascriptInterface")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebViewMap = (WebView) this.findViewById(R.id.webview_map);
WebSettings webSettings = mWebViewMap.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebViewMap.loadUrl("file:///android_asset/index.html");
mWebViewMap.addJavascriptInterface(this, "android");
this.findViewById(R.id.btnJava2Js).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
//--java調用js 格式：javascript:方法名字(參數)
mWebViewMap.loadUrl("javascript:javacalljswithargs("+ "'java2js'" +")");
}
});
}
@JavascriptInterface
public void startFunction() {
Toast.makeText(this, "startFunction ", Toast.LENGTH_SHORT).show();
}
@JavascriptInterface
public void startFunction(String s){
Toast.makeText(this, "startFunction " + s, Toast.LENGTH_SHORT).show();
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.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();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}