Android——js与Java互调_android js与java数据交互-优快云博客

本文链接：https://blog.youkuaiyun.com/iliupp/article/details/72391517

啰嗦：
再怎么说我也是做个一段时间的前端开发工作的，做了一个类似京东的手机商城，入口是微信公众号，做完这个项目我还做了一个伪伪伪APP使用一个webView将首页的URL加载进去，就是一个商城的APP了，我的内心是拒绝的做这种APP!!!!

现在有这么个项目：
要求：

APP中用WebView显示一个URL网址内容；
在URL里面有一个button键，需要调我Android程序中的Java方法；
Java方法调用结束后返回数据，更改URL中的内容；

好嘞，问题描述结束；接下来就看咋实现吧！

前提知识：
在Android上怎样实现JAVA和JS交互呢？

Android的webview是基于webkit内核的,webview中集成了js与java互调的接口函数
通过addJavascriptInterface方法
将Java的类注册进webkit,给网页上的js进行调用

要想运行网页上的js脚本,webview必须设置支持Javas cript

// 启用javascript  
webView.getSettings().setJavaScriptEnabled(true);

设置webView要加载的网页：

//web的网页
webView.loadUrl("http://www.baidu.com");

//本地的网页
webView.loadUrl("file:///android_asset/test.html"); 
//本地的存放在:assets文件夹中

Java设置WebView

private void initWebView() {
        webView = (WebView) findViewById(R.id.webView);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/test.html");

        // 添加一个对象, 让JS可以访问该对象的方法, 该对象中可以调用JS中的方法  
        webView.addJavascriptInterface(this, "jswritecard");  
    }

我的学习过程是先用本地网页测试通过后再加入web网页中。
至此webview做完基本的初始化。

先贴HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>处理写卡结果</title>
<meta content="width=320,minimum-scale=1,maximum-scale=5,user-scalable=yes" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="telephone=no" name="format-detection">


<script type="text/javascript">
    //Java调用js方法
    function setICCID(iccid){
            document.getElementById("ICCID").innerHTML = iccid;
    }
    function set2F99(r2f99){
        document.getElementById("2F99").innerHTML = r2f99;
    }
    function writeCard(){
        var x1 = document.getElementById("writeData").innerText;  
        alert("x1="+x1);
        //js调用Java函数并传入参数 
        javascript:jswritecard.writeCard(x1);
    }
    function showWriteResult(result){
        document.getElementById("writeResult").innerHTML = result;
    }
</script>
</head>
<body>
    <div class="phoneinformation">
            <div class="info">
                <span class="lefttag">ICCID：</span>
                <span class="rightinfo" id="ICCID"></span>
            </div>
            <div class="info">
                <span class="lefttag">2F99：</span>
                <span class="rightinfo" id="2F99"></span>
            </div>
            <div class="info">
                <span class="lefttag">写卡数据：</span>
                <span class="rightinfo" id="writeData">80835783475834572394893284</span>
            </div>
            <div class="info">
                <span class="lefttag">写卡结果:</span>
                <span class="rightinfo" id="writeResult"></span>
            </div>
            <!-- onClick 是js调用Java函数 无参 "jswritecard"js回调的接口别名 -->
            <input type="button" value="获取ICCID" onclick="javascript:jswritecard.getICCID()">
            <input type="button" value="获取2F99" onclick="javascript:jswritecard.get2F99()"> 
            <input type="button" value="写卡" onclick="writeCard()"> 
    </div>
</body>
</html>

接下来：

addJavascriptInterface
js调用Java函数

webView.addJavascriptInterface(this, "jswritecard");
//相当于添加一个js回调接口，然后给这个起一个别名，
//我这里起的名字jswritecard（js写卡）。

//@android.webkit.JavascriptInterface为了解
//决addJavascriptInterface漏洞的，在4.2以后才有的。
@android.webkit.JavascriptInterface
public void getICCID(){
        //js 调用Java 方法  无参
        Log.e(TAG, "js 调用 Java de getICCID！！");
        //js若想更改Activity 需要使其运行在主线程
        runOnUiThread(new Runnable() {

            @Override
            public void run() {
                getCardICCID();
            }
        });

    }
    @android.webkit.JavascriptInterface
    public void get2F99(){
        Log.e(TAG, "js 调用 Java de get2F99！！");
        runOnUiThread(new Runnable() {

            @Override
            public void run() {
                getCard2F99();
            }
        });
    }
    @android.webkit.JavascriptInterface
    public void writeCard(final String indata){
    //js调用Java 有参
        Log.e(TAG, "js 调用 Java de writeCard ,indata : "+indata);
        runOnUiThread(new Runnable() {

            @Override
            public void run() {
                writeJavaCrad(indata);
            }
        });
    }

Java调用js函数,有参

String iccid = (String) msg.obj;
//              tv_ICCID.setText(iccid);
                String showICCID = "javascript:setICCID('"+iccid+"')";
                Log.e(TAG, showICCID);
                webView.loadUrl(showICCID);