Android实现H5与Native交互的两种方式
前言
大家都知道在AndroidWebView使用中，经常需要H5页面和Native页面进行交互，比如在网页上点击分享按钮，调用本地分享接口进行分享，分享成功后本地调用网页的JavaScript代码展示一条分享成功的消息。下面来看看一起看看两种实现方式是什么？
一、Url拦截的方式
重写ShouldOverrideUrl进行Url拦截，这种方式通过H5和Native协商好的Url格式来表明H5页面想要Native进行的操作，比如拨打电话，播放视频，查看某个用户的信息等操作，每种操作对应一种url格式，比如：
“/media/image/123”代表H5要调用Native查看id为123的图片； “/webapp/close/webview”表示H5需要Native关闭当前页面； “/webapp/patient_card/？patient_id=345”表示H5要调用Native显示用户345的详情页
可以通过url的parameter传递参数，并通过Uri.parse进行解析。返回true表示截断对该Url请求的响应。
protectedWebViewClientmWebClient=newWebViewClient(){
@Override
publicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl){
//添加tel链接响应
if(url.startsWith("tel:")){
Intentintent=newIntent(Intent.ACTION_DIAL,Uri.parse(url));
startActivity(intent);
returntrue;
}
//添加mp4播放相应
if(url.endsWith(".mp4")){
viewVideo(url);
returntrue;
}
//添加图片链接响应
if(Pattern.compile("/media/image").matcher(url).find()){
viewImage(url);
returntrue;
}
//关闭webview
if(Pattern.compile("/webapp/close/webview").matcher(url).find()){
onBackPressed();
returntrue;
}
//添加某个特殊url的响应
if(Pattern.compile("/webapp/patient_card/").matcher(url).find()){
Uriuri=Uri.parse(url);
StringpatientId=uri.getQueryParameter("patient_id");
viewPatientInfo(patientId);
returntrue;
}
returnsuper.shouldOverrideUrlLoading(view,url);
};
二、JavaScript注入方式
相比于Url拦截的方式，JavaScript注入的方式更加直接，Native将开放给H5调用的函数注入JavaScript，H5通过JavaScript调用Native函数完成操作。
1、获取webView的WebViewSettings设置，调用setJavaScriptEnabled开启JavaScript调用。
WebSettingssettings=mWebView.getSettings(); settings.setJavaScriptEnabled(true);
2、将需要暴露给JavaScript的函数前面添加@JavascriptInterface注解，只有添加了该注解的函数才能被JavaScript调用。
publicclassWebAppInterface{
@JavascriptInterface
publicbooleanmethod1(Stringparam1,Stringparam2){
//dosomething
}
@JavascriptInterface
publicbooleanmethod2(Stringparam1,Stringparam2){
//dosomething
}
}
3、通过WebView的addJavascriptInterface方法，将Native方法所在的class注入到JavaScript中。该函数的第一个参数是注入的Native对象，第二个参数是该对象的名字，JavaScript通过改名字访问该对象
WebViewwebView=(WebView)findViewById(R.id.webview); webView.addJavascriptInterface(newWebAppInterface(),"InterfaceName");
4、这样，H5页面就可以通过下面的JavaScript调用Native的函数了
<scripttype="text/javascript">
functionmethod1(param1,param2){
InterfaceName.method1(param1,param2);
}
</script>
Native调用JavaScript
Native调用JavaScript函数的方法比较简单，通过loadUrl函数进行：
//无参数调用
contentWebView.loadUrl("javascript:javacalljs()");
//有参数调用
mWebView.loadUrl("javascript:test('"+param+"')");//param是js的函数test()的参数
总结
以上就是这篇文章的全部内容了，希望本文的内容对各位Android开发者们能带来一定的帮助，如果有疑问大家可以留言交流。