JS和app之间的数据交互

Leonban

已于 2022-02-22 09:43:18 修改

阅读量2.2k

点赞数

分类专栏：《Android系统及应用开发》文章标签： javascript 交互 android

于 2018-11-25 20:56:37 首次发布

本文链接：https://blog.csdn.net/Hearbeat/article/details/84502440

版权

《Android系统及应用开发》专栏收录该内容

25 篇文章 4 订阅

订阅专栏

一、网页Html端代码

<!DOCTYPE html>
<html>
<head>
    <meta chatset="utf-8" />
    <title>This is a test</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    a{
        display: block;
        width: 100px;
        padding: 1em;
        margin: 0 auto;
        font-size: 1em;
        color: #FFF;
        background-color: highlight;
        text-decoration: none;
    }
    </style>
</head>

<body>
    <a>js中调用本地方法</a>
    <script>

    function funFromjs(){
    	document.getElementById("helloweb").innerHTML="HelloWebView,i'm from js";
    }
    var aTag = document.getElementsByTagName('a')[0];
    aTag.addEventListener('click', function(){
        //调用android本地方法
        document.getElementById("helloweb").innerHTML="HelloWebView,i'm from android";
        //justTest.hello('js调用安卓方法！');
        justTest.print_report("要传的数据");
        return false;
    }, false);
    </script>
    <p></p>
    <div id="helloweb"> 

	</div>
</body>
</html>

二、Android端代码

1.如果Html在服务器，需要添加网络权限

<uses-permission android:name="android.permission.INTERNET" />

2. 主要逻辑代码

	@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.scan_layout1);

		webView = (WebView) findViewById(R.id.web);
		webView.setWebViewClient(new WebViewClient(){
			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String request) {
				view.loadUrl(request);
				return true;
			}
		});

		//设置编码
		webView.getSettings().setDefaultTextEncodingName("utf-8");
		//设置本地调用对象及其接口
		webView.addJavascriptInterface(this, "justTest");
		webView.getSettings().setJavaScriptEnabled(true);设置WebView属性,运行执行js脚本
		webView.loadUrl("http://50.0.0.32:8080/html/jn-phone-sjbdcj.html");//加载url地址

		//设置true,才能让Webivew支持<meta>标签的viewport属性
		webView.getSettings().setUseWideViewPort(true);
		//设置可以支持缩放
		webView.getSettings().setSupportZoom(true);
		//设置出现缩放工具
		webView.getSettings().setBuiltInZoomControls(true);


	}


	@JavascriptInterface
	public void print_report(String msg) {
		Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
		str_massage = msg;
		printeText();
	}

3.App调用JS代码

webView.loadUrl("javascript:funFromjs("App调用JS代码")");

4.JS调用Android的类

justTest.print_report("JS调用Android的类");

三、解释
1.Android调用JS
通过Android代码中webView.loadUrl("javascript:funFromjs()");中javascript:funFromjs()与js中的function funFromjs()方法名称一致，必须相同名称；同理有参数的调用的是function funFromjs(msg)

2.JS调用Android
通过JS中window.AndroidWebView关联到Android中WebView的name是AndroidWebView,Android端webView.addJavascriptInterface(this, "justTest");方法关联到JS，这样JS就可以通过justTest.print_report()中关联到Android中#funFromjs()

3.两者互调主要是名称要一致，否则无法关联上去