研究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);
}
}