hybrid App開發也不是什么新鮮事了，其中native和h5之間的交互則是必不可少的。Android中是如何和H5交互的？
1、webView加載頁面
我們都知道在Android中是通過webView來加載html頁面的，根據HTML文件所在的位置不同寫法也不同：
//例如：加載assets文件夾下的test.html頁面
mWebView.loadUrl("file:///android_asset/test.html")
//例如：加載網頁
mWebView.loadUrl("http://www.baidu.com")如果只是這樣調用mWebView.loadUrl()加載的話,那么當你點擊頁面中的鏈接時，頁面將會在你手機默認的瀏覽器上打開。那如果想要頁面在App內中打開的話，那么就得設置setWebViewClient：
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
mWebView.loadUrl(url);
return true;
}
}
});2、Android本地通過Java調用HTML頁面中的JavaScript方法
想要調用js方法那么就必須讓webView支持
WebSettings webSettings = mWebView.getSettings();
//設置為可調用js方法
webSettings.setJavaScriptEnabled(true);若調用的js方法沒有返回值，則直接可以調用mWebView.loadUrl("javascript:do()");其中do是js中的方法；若有返回值時我們可以調用mWebView.evaluateJavascript()方法：
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});js代碼如下：
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function do(){
document.getElementById("p").innerHTML="hello world";
}
</script>2、js調用Android本地Java方法
在Android4.2以上可以直接使用@JavascriptInterface注解來聲明，下面是在一個本地Java方法
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}定義完這個方法后再調用mWebView.addJavascriptInterface()方法：
mWebView.addJavascriptInterface(new JsInteration(), "android");那么在js中怎么來調用呢？
<script type="text/javascript">
function s(){
//調用Java的back()方法
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>4、攔截HTML頁面中的點擊事件
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//判斷url攔截事件
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});以上就是Java調用js方法以及js調用Java方法的實現交互方式中的一種。下面給出完整代碼：
mainActivity
public class MainActivity extends AppCompatActivity {
public static final String TAG = "MainActivity";
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView);
mWebView.loadUrl("file:///android_asset/test.html");
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JsInteration(), "android");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
}
//Android調用有返回值js方法
@TargetApi(Build.VERSION_CODES.KITKAT)
public void onClick(View v) {
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
}
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
}test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function s(){
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
</head>
<body>
<button onclick="s()">調用本地方法</button>
<a href="file:///android_asset/test2.html">點擊</a>
<p id="p"></p>
</body>
</html>作者：YouJZ
鏈接：http://www.jianshu.com/p/a25907862523
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。