android通过webview组件实现与js相互调用

最新推荐文章于 2021-05-25 23:48:58 发布

飘狐

最新推荐文章于 2021-05-25 23:48:58 发布

阅读量813

点赞数

分类专栏： js android webview

本文链接：https://blog.csdn.net/hamster204/article/details/18042551

版权

js 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

android

1 篇文章 0 订阅

订阅专栏

webview

1 篇文章 0 订阅

订阅专栏

前言

由于本人也是刚刚接触android水平有限但本着分享精神写了此篇文章，所以本文侧重实用内容涉及到的相关知识这里不做过多解释。（有个鸟人说得好，当一个程序员解决了一个问题的时候在地球的某一个角落一定还有某个程序员正为此问题而苦恼）

内容

最近先来闲来无事想做一款带有统计功能的app，经过综合考虑决定采用基于html5的js统计图表组件（ichartjs）来实现，所以研究了下android 与js互调实现。发现android提供了一个webView控件专门用来浏览网页。于是动手写了一个代码极简但脉络清晰的demo，主要实现功能：1、点击内嵌html页面中call android 按钮，实现js调用android方法动态变更html页面显示文字；2、点击应用界面中call js 按钮，实现android方法调用js方法动态变更html页面显示文字；好，废话不多说见代码！

首先创建Activity类

public class MainActivity extends Activity {
	
	private WebView webView;
	
	private Button btn;

	@Override
	@SuppressLint("JavascriptInterface")
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
        webView = (WebView)this.findViewById(R.id.webView);
        webView.getSettings().setDefaultTextEncodingName("UTF-8");
        
        webView.getSettings().setJavaScriptEnabled(true); // 设置WebView支持JS
        /**
         *  设置JS中可调用的java类
         *  第一个参数为：调用的类；
         * 	第二个参数为：设置调用类的别名，在JS中应用时用别名来代替类名使用；
        */
        webView.addJavascriptInterface(new Datasource(this), "android"); 
        
        String url = "file:///android_asset/index.html"; // 设置显示页面
        
        webView.loadUrl(url);
        
        
        btn = (Button)this.findViewById(R.id.btn);
        //为按钮注册一个点击事件用于调用JS中方法
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
            	String data = "android call js method";
            	webView.loadUrl("javascript:callJavaScript('"+data+"')"); // 调用JS中callJavaScript方法
            }
        });
		
	}

}

需主要：android 4.2 版本后承载webView.addJavascriptInterface(new Datasource(this), "android")代码的方法需要加入@SuppressLint("JavascriptInterface")注解，否则编译不通过；

布局文件

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity" >
    
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="300px" />

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="call js" />

</LinearLayout>

AndroidManifest.xml

如果只是调用本地页面文件则无需在AndroidManifest.xml中加入<uses-permission android:name="android.permission.INTERNET" />权限说明。

创建被js调用的类

public class Datasource {
	
    @JavascriptInterface
    public String jsCallAndroid() {
    	/**
    	 * TO-DO 此方法用于返回业务
    	 */
    	return "js call android method";
    }
    
}

创建HTML页面

html页面存储位置为工程assets目录下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

   <script>
   		
   		function callAndroid(){
   			var data = window.android.jsCallAndroid(); 
   			document.getElementById("disp").innerHTML=data; 
   		}
   		
   		function callJavaScript(data){
   			document.getElementById("disp").innerHTML=data; 
   		}
   </script>
   
</head>
<body>
	<div>
		<button id="dv" οnclick="callAndroid()">call android</div>
		<div style="text-align:center;" id="disp" >hello world!</div>
	</div>
</body>
</html>

飘狐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android通过webview组件实现与js相互调用

前言由于本人也是刚刚接触android水平有限但本着分享精神写了此篇文章，所以本文侧重实用内容涉及到的相关知识这里不做过多解释。（有个鸟人说得好，当一个程序员解决了一个问题的时候在地球的某一个角落一定还有某个程序员正为此问题而苦恼）内容最近先来闲来无事想做一款带有统计功能的app，经过综合考虑决定采用基于html5的js统计图表组件（ichartjs）来实现，
复制链接

扫一扫

专栏目录