啰嗦：
再怎麼說我也是做個一段時間的前端開發工作的，做了一個類似京東的手機商城，入口是微信公衆号，做完這個項目我還做了一個僞僞僞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);
好啦，實作過程基本上就是這樣的 我在去學習學習相關的理論！
![與專家面對面：Android開發入門問與答[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)