Android WebView JS互调案例

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

 








		

		
posted @ 
2017-02-14 15:06 
冒泡的章鱼 
阅读(2657) 
评论(0) 
 
收藏 
举报