android怎么个h5交互

Android平台与H5的交互，是指在Android应用中嵌入了HTML5页面后，通过一定的技术手段，使得Android应用与HTML5页面之间能够相互通信、传递数据等，从而实现某些功能。

其实Android与H5的交互，无非就2种方式：Native调用H5和H5调用Native

一、Native调用H5

1.通过WebView实现

在Android中，可以将WebView嵌入到应用中，以展示HTML5页面，通过调用WebView的loadUrl方法，加载H5页面。在H5页面中，可以通过JavaScript调用Native程序提供的API接口，实现Android与H5的交互。代码示例：

Android端

```

mWebView.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

});

mWebView.getSettings().setJavaScriptEnabled(true);

mWebView.addJavascriptInterface(new JsObject(this),"wenda");

```

其中，JsObject是一个Java对象，它包含一些应用程序提供给H5页面的API，一旦网页中的JavaScript调用了该API，则相应的Java中的方法将被调用。

H5端

```

function androidShare(){

wenda.login();

}

```

2. 通过Intent实现

Native程序通过Intent传递数据，启动一个包含H5页面的Activity，在H5页面中再调用JavaScript接口实现交互。

以相册选择图片为例，代码实现如下：

Android端

```

Intent i = new Intent("android.intent.action.ACTION_PICK", MediaStore.Images.Media.EXTERNAL_CONTENT_URI);

startActivityForResult(i, 1001);

Bundle bundle = new Bundle();

bundle.putString("jsonData",jsonData);

i.putExtras(bundle);

startActivityForResult(i, 1001);

```

H5端

```

function changePicture(){

window.jsInterface.choosePicture();

}

```

二、H5调用Native

1.通过JavaScript的方式实现

在WebView中，通过设置WebViewClient的shouldOverrideUrlLoading()方法，拦截网页中的URL请求，从而执行相应的本地APP方法。代码实现如下：

Android端

```

mWebView.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

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

Log.e("sunzn",url);

return true;

}else{

view.loadUrl(url);

}

return false;

}

});

```

其中，afanda:是一个自定义的协议名，H5通过该协议名调用Native上的相应方法。

H5端

```

```

通过上述代码，即可在H5页面中，通过点击链接关联到对应的Native方法。

2.通过JSBridge实现

JSBridge是一种比较流行的H5与Native通信框架，它的工作原理是在WebView中注入JS文件，并通过JS代码来实现H5与Native之间的通信。

代码实现如下：

Android段

```

public void onOpenBtnClicked(View view) {

Intent intent = new Intent(this, WebviewActivity.class);

startActivity(intent);

}

@JavascriptInterface

public void onSumResult(final int result) {

runOnUiThread(new Runnable() {

@Override

public void run() {

String msg = "JS调用了Native的方法, 结果为：" + result;

Toast.makeText(WebviewActivity.this, msg, Toast.LENGTH_LONG).show();

}

});

}

```

其中，WebviewActivity是一个包含WebView的Activity对象，它可以通过调用WebView的addJavascriptInterface方法，将native对象注入到javascript代码中。

H5端

```

window.WebViewJavascriptBridge.callHandler('submitFromWeb', {'param': '中文测试'}, function(responseData) {

document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData

});

```

通过上述代码，即可在H5页面中，通过js代码，调用对应的Native方法。

总结：

综上所述，Android与H5的交互技术是十分有必要的，对于一些高度定制化的业务场景，Android与H5的配合能够实现更好的用户体验。通过Native调用H5以及H5调用Native两种方式，可以对应不同的业务需求，实现更全面、灵活的交互效果，对于Android开发人员来说，灵活的掌握Android与H5交互技术，可以为自身开发效率提高，同时也可以为用户提供更好的体验。