現(xiàn)如今，很多Android APP都要與JS進(jìn)行交互，而WebView就是Android與JS交互的橋梁，日常中最常見Android和JS交互有：APP注冊協(xié)議，APP里的文章，APP里的活動頁，這都是嵌套的H5頁面。
Android與JS交互有以下邏輯步驟：
- 創(chuàng)建WebView
- 創(chuàng)建Html文件
- 創(chuàng)建JS文件
- WebView調(diào)用JS代碼
- JS代碼中調(diào)用Android代碼
1. 創(chuàng)建WebView
創(chuàng)建一個(gè)布局文件，布局文件中包含著一個(gè)WebView控件：在activity中獲得這個(gè)這個(gè)WebView控件的實(shí)例
mWebView = findViewById(getResources().getIdentifier("web_view", "id", getPackageName()));
2. 創(chuàng)建Html文件
在main文件夾下創(chuàng)建assets文件夾，在其中再創(chuàng)建一個(gè)js文件夾, js文件夾就是放js代碼，html文件可以直接放在assets文件夾下
創(chuàng)建一個(gè)test.html的文件，添加如下代碼：
<html>
<script src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
console.log(userAgent)
if(userAgent.match(/Android/i)) {
$.getScript("js/android.js")
}
</script>
Java-Javascript Interaction In Android
</html>
上面的html中做了兩件事情：
第一件事情就是：添加了一個(gè)jquery的插件，下載好：jquery-2.2.4.min.js放在assets/js目錄下
第二件事情就是：判斷當(dāng)前用戶所處的運(yùn)行環(huán)境是不是Android下，如果是Android下，去加載js目錄下的android.js文件
3. 創(chuàng)建JS文件
接下來我們就是創(chuàng)建android.js文件，代碼如下
$(function(){
document.body.style.webkitTouchCallout='none';
document_loaded();
});
function document_loaded() {
console.log("document loaded");
window.JsObject.documentLoaded();
}
function sayHello() {
alert("Hello")
}
function sumToJava(number1, number2){
window.JsObject.onSumResult(number1 + number2)
}
在android.js文件中，我們定義了兩個(gè)方法：
一個(gè)是sayHello方法，這個(gè)方法中，是在h5頁面中彈出一個(gè)對話框，并且系那是syaHello
一個(gè)是sumToJava方法，在這里進(jìn)行number1+number2運(yùn)算，并且通過：
window.JsObject.onSumResult(number1 + number2)調(diào)用Java代碼，這里很關(guān)鍵，后面會著重描述，
4. WebView調(diào)用JS代碼
在activity中調(diào)用loadwebView函數(shù)，在函數(shù)里面，首先是讓webView支持js, 再通過字符流的方式將html文件讀出來，利用loadDataWithBaseURL將其加載出來。
最后調(diào)用了testMethod函數(shù)中的webView.loadUrl（）函數(shù)
@SuppressLint("JavascriptInterface")
private void loadWebView(){
mWebView.getSettings().setJavaScriptEnabled(true);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){
mWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);
}
StringBuilder content = new StringBuilder();
InputStream stream;
try {
stream = this.getAssets().open("test.html");
BufferedReader reader = new BufferedReader(new InputStreamReader(stream));
String line;
while((line = reader.readLine()) != null)
{
content.append(line);
content.append('\n');
}
reader.close();
} catch (IOException e) {
e.printStackTrace();
}
String html = content.toString();
mWebView.addJavascriptInterface(new JsObject(), "JsObject");
mWebView.loadDataWithBaseURL("file:///android_asset/",html,"text/html","utf-8",null);
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
testMethod(mWebView);
}
});
}
private void testMethod(WebView webView){
String call = "javascript:sayHello()";
//call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);
}
Android調(diào)用JS的關(guān)鍵就是通過這兩行代碼實(shí)現(xiàn)的，就是調(diào)用了js代碼中的sayHello函數(shù)
String call = "javascript:sayHello()";
webView.loadUrl(call);
這樣子就是實(shí)現(xiàn)了Java代碼與Js代碼交互的邏輯，運(yùn)行就會出現(xiàn)一個(gè)彈框，上面寫著：Hello
如果是調(diào)用js代碼中的sumToJava（）函數(shù)，就直接把下面這行注釋給干掉：
call = "javascript:sumToJava(1,2)";
5. JS代碼調(diào)用Android代碼
創(chuàng)建一個(gè)Java類
public class JsObject {
private final static String TAG = "TAG_JsObject";
@JavascriptInterface
public void onSumResult(int result){
Log.d(TAG, "result = " + result);
}
}
上面在類中添加了一個(gè)onSumResult的函數(shù)，添加了JavascriptInterface注解, 這個(gè)onSumResult（）函數(shù)就是為js代碼提供調(diào)用Java代碼的接口，那它是怎么使用呢？
就是上面js文件中的sumToJava（）函數(shù)：
function sumToJava(number1, number2){
window.JsObject.onSumResult(number1 + number2)
}
這里的window后面的JsObject，是怎么來的呢，查看webView的配置，看到：
mWebView.addJavascriptInterface(new JsObject(), "JsObject");
對，就是后面的第二個(gè)字符串參數(shù)，這里是：JsObject，則調(diào)用就是：
window.JsObject.onSumResult(number1 + number2)
如果是：JsObject2， 調(diào)用就是：
window.JsObject2.onSumResult(number1 + number2)
好了，本文就到這里。
