步骤：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:<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.href=''; 

 
 
 
 

  } 

 
 
 
 

  } 

 
 
 
 

  function baoming1(){ 

 
 
 
 

  if(window.demo.getUserinfo()){ 

 
 
 
 

  location.href=''; 

 
 
 
 

  } 

 

  } 

 

  function baoming2(){ 

 
 
 
 

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

 
 
 
 

  location.href=''; 

 
 
 
 

  } 

 
 
 
 

  } 

 
 
 
 

  </script> 

 
 
 
 

  </body> 

 
 
 
 

  </html>



android 端需要写的代码



1:在XML 布局声明一个WebView


2:通过 loadUrl 加载本地文件或者网络文件


3:设置可以使用JavaScript,代码如下:


web_main.getSettings().setJavaScriptEnabled(true); //加上这句话才能使用javascript方法


4:定义一个类,类名叫PayJavaScriptInterface,里面有三个方法:分别是:getUserinfo,needLogin,getData,代码如下: 


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(); 

 

  } 

 
 
 
 

  }


5:通过web_main.addJavascriptInterface让H5调用Android的方法,其中的两个参数的意思分别是:


第一个参数:定义类的实例化


第二个参数:自定义名字,让H5来调用安卓的方法


代码如下:web_main.addJavascriptInterface(new PayJavaScriptInterface(), "demo");



在H5中调用安卓的方法是:window.第二个参数(自定义名字).方法名


案例如下: 


window.demo.needLogin() 

 
 
 
 

  Android 调用H5的方法: 

 

  格式如下:控件名.loadUrl("javascript:方法名") 

 

  代码如下:web_main.loadUrl("javascript:getData()"); 

 
 
 
 

  声明:Android 调用H5 必须在主线程中调用, 

 
 
 
 

  方法1: 

 

  使用Handler代码如下: 

 
 
 
 

  //主线程 

 

  Handler handler = new Handler(){ 

 
 
 
 

  @Override 

 

  public void handleMessage(Message msg) { 

 

  super.handleMessage(msg); 

 
 
 
 

  switch (msg.what){ 

 
 
 
 

  case 1: 

 

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

 

  break; 

 

  } 

 

  } 

 

  }; 

 
 
 
 

  //发送消息到主线程的方法 

 
 
 
 

  Message msg = handler.obtainMessage(); 

 

  msg.what = 1; 

 

  handler.sendMessage(msg); 

 

  方法2:控件名.post(实例化线程) 

 

  web_main.post(new Runnable() { 

 

  @Override 

 

  public void run() { 

 

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

 

  } 

 

  });