Android——js与Java互调

来源：互联网发布：java web运行流程编辑：程序博客网时间：2024/06/16 21:17

啰嗦：
再怎么说我也是做个一段时间的前端开发工作的，做了一个类似京东的手机商城，入口是微信公众号，做完这个项目我还做了一个伪伪伪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.JavascriptInterfacepublic 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);

好啦，实现过程基本上就是这样的我在去学习学习相关的理论！

阅读全文

0 0