继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Android 中Webview 与h5的交互

眼眸繁星
关注TA
已关注
手记 109
粉丝 7
获赞 59

首先在这里说一下.现在安卓的开发基本都是混合开发,所以对于每一个安卓开发人员来说,会安卓与H5交互是必须的,在这里首先为大家讲解安卓与H5最简单的交互方式.首先在这里贴出Html代码.html代码如下:

<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:<br>

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

<input value="详细信息" type="button" onClick="baoming1();" /><br>

<input value="你好" type="button" onClick="baoming2();" /><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.;

}

}

function baoming1(){

if(window.demo.getUserinfo()){

location.;

}

}

function baoming2(){

if(window.demo.getData("红红火火")){

location.;

}

}

</script>

</body>

</html>

接下来讲解如何在安卓中加载本地H5页面;首先将我们的Html放在 assets 目录中,在我们的XML 布局里面声明webview控件,在activity里面获取到我们HTML的路径如下:String path = "file:///android_asset/android.html";,

           加载H5 的步骤如下:web_main.loadUrl(path);

在安卓与H5 的交互中,我们必须声明安卓支持 javaScript; 代码如下: web_main.getSettings().setJavaScriptEnabled(true);这句话的意思是让安卓支持JavaScript, 接下来我们讲解安卓如何调用H5的方法,安卓调用H5很简单,就是通过 web_main.loadurl("javaScript:方法名");这个方法名字是H5页面给我们提供的方法名,但是安卓调用H5 的必须在主线程调用,有两种方式可以在主线程调用,分别是 Handler,

另外一种是   :

 web_main.post(new Runnable() {

@Override

public void run() {

web_main.loadUrl("javascript:baoming3()"); //aa是js的函数test()的参数

}

});

接下来我们讲解H5调用安卓的方法,H5调用安卓的时候我们也需要设置一个属性,这个属性就是:

 web_main.addJavascriptInterface(new PayJavaScriptInterface(), "demo");

其中 addJavascriptInterface 有两个参数,第一个参数是咱们自己自定义的类的实例化,第二个参数是自定义字段,自定义类里面有H5需要调用的方法,H5调用安卓方法的格式是: window.第二个参数.方法名

自定义类的案例如下,以上步骤就可以完成H5调用安卓,但是在H5调用安卓的方法的时候,在安卓4.4以后,必须在方法上面声明 @JavascriptInterface

final class PayJavaScriptInterface {

PayJavaScriptInterface() {

}

@JavascriptInterface

public String getUserinfo() {

Toast.makeText(getApplicationContext(),"报名",Toast.LENGTH_LONG).show();

return "dd";

}

@JavascriptInterface

public boolean needLogin() {

Toast.makeText(getApplicationContext(),"登陆",Toast.LENGTH_LONG).show();

return false;

}

@JavascriptInterface

public void getData(String name){

Toast.makeText(getApplicationContext(),name,Toast.LENGTH_LONG).show();

}

}

以上就是安卓与H5 的交互方法

原文链接:http://www.apkbus.com/blog-308702-62496.html

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP