您的位置：首页 > 移动开发 > Android开发

[置顶] Android与H5的交互

2016-12-05 14:22 309 查看

如今H5的广泛应用，使得Android与H5交互也变得十分广泛，在项目中用到非常频繁，这篇文章就交互问题举个栗子浅谈一下。

Android通过内置的控件Webview来加载H5页面。webview的应用十分简单，只有设置一下其属性即可。代码如下：

webView.setVerticalScrollBarEnabled(false);
webView.setHorizontalScrollBarEnabled(false);
webView.getSettings().setJavaScriptEnabled(true); //加上这句话才能使用JavaScript方法
webView.getSettings().setDomStorageEnabled(true);
webView.requestFocus();
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSavePassword(false);
webView.getSettings().setSaveFormData(false);
webView.getSettings().setSupportZoom(false);

而在H5页面里面代码如下（这部分代码从别处参考过来，已验证正确性）：

<html>

<head>

<meta charset="UTF-8">

<title>交互Demo</title>

<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">

</head>

<body>

getUserinfo:

<div id="userinfo"></div>

<input value="立即报名" type="button" onClick="baoming();" /><br>

<script>

/*var rs=window.om.getUserinfo();

document.getElementById('userinfo').innerHTML=rs;*/

var rs=window.demo.getUserinfo();

var obj = eval ("(" + rs + ")");

if(obj.status){

document.getElementById('userinfo').innerHTML=obj.data.nickname;

}

function baoming(){

if(window.demo.needLogin()){

location.href='my_demo1.html';

}

}

</script>

</body>

</html>

然后接下来就是在Android里面实现交互的东西了：

webView.addJavascriptInterface(new PayJavaScriptInterface(), "demo");这句话就是给android添加javascript代码，让H5页面能够调用，第二个参数对应的是H5里面的"

“window”后面的值。

在activity里面实现H5里面的方法，注意方法之前要加上注解“@JavascriptInterface”，当android:targetSdkVersion的数值小于17无所谓，当大于等于17时就必须添加，否则不会调用方法里面的Java代码。

final class PayJavaScriptInterface  {

PayJavaScriptInterface()
{

}

@JavascriptInterface

public String getUserinfo()  {

}

@JavascriptInterface
public boolean needLogin()  {

}

}

到此，就可以实现交互功能，如果Android需要提交数据给H5的话，就可以把所需的内容转为Json串即可。

（是不是很简单明了，欢迎关注收藏。）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航