一、首先是網頁端，這個就是一些簡單的标簽語言和JS函數：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>H5 And Android</title>
<script>
//定義本地方法 效果提供給Android端調用 被調用後将獲得參數值
function callH5(data){
document.getElementById("result").innerHTML="result success for Android to:"+data;
}
//定義本地點選事件 效果調用Android方法 傳遞參數給Android客服端
function myOnclick(){
document.getElementById("result").innerHTML="按鈕被點選了"
//調用android本地方法 調用對象由Android定義執行個體化，調用方法由Android提供 (具體對象名和方法待定，可變更)
myObj.callAndroid("彈窗顯示回調成功了～～～");
}
js調用android
注冊js對象名稱為control，方法為toNews，傳的是新聞id和新聞類型
WebSettings webSettings = webView.getSettings();
// 設定WebView屬性，能夠執行Javascript腳本
webSettings.setJavaScriptEnabled(true);
// 設定可以通路檔案
webSettings.setAllowFileAccess(true);
// 設定支援縮放
webSettings.setBuiltInZoomControls(true);
webView.addJavascriptInterface(new JavaScriptInterfaces(), "control");
// 加載需要顯示的網頁
webView.loadUrl(url + "?newsId=" + newsId + "&newsType=" + newsType + "&subjectImg=" + imageUrl);
String str = url + "?newsId=" + newsId + "&newsType=" + newsType + "&subjectImg=" + imageUrl;
LogUtils.e(url + "?newsId=" + newsId + "&newsType=" + newsType + "&subjectImg=" + imageUrl);
// 設定Web視圖
webView.setWebViewClient(new webViewClient());// 如果去掉webView會用浏覽器加載網絡連接配接
class JavaScriptInterfaces {
JavaScriptInterfaces() {
}
@JavascriptInterface
public void toNews(long newsId, String accessUrl) {
Intent intent = new Intent(SpecialWebActivity.this, NewsDetailsWebActivity.class);
intent.putExtra("newsId", newsId + "");
startActivity(intent);
}
} </script>
</head>
<body>
<button id="button" οnclick="myOnclick()">點選調用Android方法</button>
<p/>
<div id="result">效果展示</div>
</body>
</html>
二、接下來就是Android中加載web網頁，并且設定完成互動了，直接上代碼，也有詳細注釋:
package com.lvyerose.h5andandroid;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private WebView mWebView;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mWebView = (WebView) findViewById(R.id.webView);
initWeb();
}
@SuppressLint({"JavascriptInterface", "SetJavaScriptEnabled"})
void initWeb(){
//設定編碼
mWebView.getSettings().setDefaultTextEncodingName("utf-8");
//支援js
mWebView.getSettings().setJavaScriptEnabled(true);
//設定本地調用對象及其接口
//第一個參數為執行個體化自定義的接口對象 第二個參數為提供給JS端調用使用的對象名
mWebView.addJavascriptInterface(new Contact() {
@JavascriptInterface //必須加的注解
@Override
public void callAndroid(String phone) {
Toast.makeText(MainActivity.this, phone, Toast.LENGTH_LONG).show();
}
}, "myObj");
//載入js
mWebView.loadUrl("http://lvyerose.com/h5andAndroid.html");
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//Android調用Js方法，其中參數 'Android OK !!!' 可傳入變量 效果如下：
// mWebView.loadUrl("javascript:callH5('"+str+"')");
mWebView.loadUrl("javascript:callH5('Android OK !!!')");
}
});
}
//定義接口，提供給JS調用
interface Contact {
@JavascriptInterface
void callAndroid(String phone);
}
}
![Android項目的依賴關系解析[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)