android native 接口,Android中H5和Native交互的两种方式

交互

在Android WebView使用中，经常需要H5页面和Native页面进行交互，比如在网页上点击分享按钮，调用本地分享接口进行分享，分享成功后本地调用网页的JavaScript代码展示一条分享成功的消息。实现H5页面和Native页面交互的方法有两种，一种是Url拦截的方法，另一种是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请求的响应。

protected WebViewClient mWebClient = new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

// 添加tel链接响应

if (url.startsWith("tel:")) {

Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse(url));

startActivity(intent);

return true;

}

// 添加mp4播放相应

if (url.endsWith(".mp4")) {

viewVideo(url);

return true;

}

// 添加图片链接响应

if (Pattern.compile("/media/image").matcher(url).find()) {

viewImage(url);

return true;

}

// 关闭webview

if (Pattern.compile("/webapp/close/webview").matcher(url).find()) {

onBackPressed();

return true;

}

// 添加某个特殊url的响应

if(Pattern.compile("/webapp/patient_card/").matcher(url).find()) {

Uri uri = Uri.parse(url);

String patientId = uri.getQueryParameter("patient_id");

viewPatientInfo(patientId);

return true;

}

return super.shouldOverrideUrlLoading(view, url);

};

JavaScript注入方式

相比于Url拦截的方式，JavaScript注入的方式更加直接，Native将开放给H5调用的函数注入JavaScript，H5通过JavaScript调用Native函数完成操作。

获取webView的WebViewSettings设置，调用setJavaScriptEnabled开启JavaScript调用。

WebSettings settings = mWebView.getSettings();

settings.setJavaScriptEnabled(true);

将需要暴露给JavaScript的函数前面添加@JavascriptInterface注解，只有添加了该注解的函数才能被JavaScript调用。

public class WebAppInterface {

@JavascriptInterface

public boolean method1(String param1, String param2) {

// do something

}

@JavascriptInterface

public boolean method2(String param1, String param2) {

// do something

}

}

通过WebView的addJavascriptInterface方法，将Native方法所在的class注入到JavaScript中。该函数的第一个参数是注入的Native对象，第二个参数是该对象的名字，JavaScript通过改名字访问该对象

WebView webView = (WebView) findViewById(R.id.webview);

webView.addJavascriptInterface(new WebAppInterface(), "InterfaceName");

这样，H5页面就可以通过下面的JavaScript调用Native的函数了

function method1(param1, param2) {

InterfaceName.method1(param1, param2);

}

Native调用JavaScript

Native调用JavaScript函数的方法比较简单，通过loadUrl函数进行：

// 无参数调用

contentWebView.loadUrl("javascript:javacalljs()");

// 有参数调用

mWebView.loadUrl("javascript:test('" + param+ "')"); // param是js的函数test()的参数