脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Android与H5

Android与H5互调详细介绍

 更新时间：2017年04月28日 10:51:37   投稿：lqh  
这篇文章主要介绍了Android与H5互调详细介绍的相关资料,需要的朋友可以参考下

Android与H5互调详细介绍

   微信，微博，微商，QQ空间，大量的软件使用内嵌了H5，这个时候就需要了解Android如何更H5交互的了；有些外包公司，为了节约成本，采用Android内嵌H5模式开发，便于在iOS上直接复用页面，最终解决成本。

        为什么学android也要学h5？

Android很多软件都有内嵌H5的,有什么用处、优势？节约成本，提高开发效率。

实现的原理是什么？

        本质是:Java代码和JavaScript调用

案例一：Java与Js简单互调

        首先，在Android代码中加载H5页面：

private void initWebView() {
  webView = new WebView(this);
  WebSettings webSettings = webView.getSettings();
  //设置支持javaScript脚步语言
  webSettings.setJavaScriptEnabled(true);

  //支持双击-前提是页面要支持才显示
  webSettings.setUseWideViewPort(true);

  //支持缩放按钮-前提是页面要支持才显示
  webSettings.setBuiltInZoomControls(true);

  //设置客户端-不跳转到默认浏览器中
  webView.setWebViewClient(new WebViewClient());

  //加载网络资源
  //webView.loadUrl("http://atguigu.com/teacher.shtml");
  webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");

  //显示页面
  setContentView(webView);
 }

        JavaAndJavaScriptCall.html:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <script type="text/javascript">

 function javaCallJs(){
   document.getElementById("content").innerHTML += 
    "<br\>java调用了js无参函数";
 }

 function javaCallJs(arg){
   document.getElementById("content").innerHTML =
    ("欢迎："+arg );
 }


 function showDialog(){
  alert("谷粉们你好,我是来自javascript");
 }
 </script>
</head>
<body>
<div align="left" id="content"> 谷粉</div>

<input type="button" value="点击Android被调用" onclick="window.Android.showToast()" />
</body>
</html>

        Java调用javaScript:

/**
 * Java调用javaScript
 * @param numebr
 */
private void login(String numebr) {
 webView.loadUrl("javascript:javaCallJs("+"'"+numebr+"'"+")");
 setContentView(webView);
}

        JavaScript调用Java

 /**
  * js可以调用该类的方法
  */
 class AndroidAndJSInterface{
  @JavascriptInterface
  public void showToast(){
   Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show();
  }
 }
 //与此同时需要在webview当中注册，后面的“Android”与html中的对应：
 webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");
 //html里的点击事件实现：<br>
 <input type="button" value="点击Android被调用" onclick="window.Android.showToast()" />

案例二：H5页面调用Android播放视频

        了解了简单调用，下面讲的这个也就简单了:

        1_JsCallJavaVideoActivity的布局和实例化控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.atguigu.androidandh5.JsCallJavaVideoActivity">

 <WebView
  android:id="@+id/webview"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

</RelativeLayout>

        2_实例化控件并且配置

public class JsCallJavaVideoActivity extends Activity {

 private WebView webView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_js_call_java_video);
  webView = (WebView) findViewById(R.id.webview);
  WebSettings webSettings = webView.getSettings();
  //设置支持javaScript脚步语言
  webSettings.setJavaScriptEnabled(true);

  //支持双击-前提是页面要支持才显示
//  webSettings.setUseWideViewPort(true);

  //支持缩放按钮-前提是页面要支持才显示
  webSettings.setBuiltInZoomControls(true);

  //设置客户端-不跳转到默认浏览器中
  webView.setWebViewClient(new WebViewClient());

  //加载网络资源
//  webView.loadUrl("http://atguigu.com/teacher.shtml");
   webView.loadUrl("file:///android_asset/RealNetJSCallJavaActivity.htm");

 }

 }

        3_加载页面

//加载本地资源 
 webView.loadUrl("file:///android_asset/RealNetJSCallJavaActivity.htm");

        4_参照js代码写Java被调用代码

url = "/mobiles/interActive/65411";
var videourl = "http://10.0.2.2:8080/yellow.mp4";
var itemid = "65411";
var itemdesc = "1级单杀小龙，5级单杀峡谷先锋！"; 
var itempic = "http://avatar.anzogame.com/pic_v1/lol/news/20160507/spic65411h572d6eaf.jpg";
var itemtitle = "6.9玛尔扎哈OP套路教程";
var obj_play = document.getElementById('play');
var obj_download = document.getElementById('download');
if(obj_play != null) {
 obj_play.ontouchstart = function() {
  this.className = 'inter_click';
  javascript:android.playVideo(itemid, videourl, itemtitle);
  ajaxrequest('/stat/item', "POST", true, {type:'play', id:itemid});
 }
 obj_play.ontouchend = function() {
  this.className = 'inter';
 }
}

        5_配置Javascript接口

//设置支持js调用java
webView.addJavascriptInterface(new AndroidAndJSInterface(),"android");

        6_Javascript接口类

class AndroidAndJSInterface {
 /**
  * 该方法将被js调用
  * @param id
  * @param videoUrl
  * @param tile
  */
 @JavascriptInterface
 public void playVideo(int id,String videoUrl,String tile){
  //调起系统所有播放器
  Intent intent = new Intent();
  intent.setDataAndType(Uri.parse(videoUrl),"video/*");
  startActivity(intent);
 }
}

案例三：H5页面调用Android拨打电话

        1_JsCallJavaCallPhoneActivity布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.atguigu.androidandh5.JsCallJavaVideoActivity">

 <WebView
  android:id="@+id/webview"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

</RelativeLayout>

        2_初始化WebView并且配置

private WebView webView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_js_call_java_video);
  webView = (WebView) findViewById(R.id.webview);
  WebSettings webSettings = webView.getSettings();
  //设置支持javaScript脚步语言
  webSettings.setJavaScriptEnabled(true);

  //支持双击-前提是页面要支持才显示
//  webSettings.setUseWideViewPort(true);

  //支持缩放按钮-前提是页面要支持才显示
  webSettings.setBuiltInZoomControls(true);

  //设置客户端-不跳转到默认浏览器中
  webView.setWebViewClient(new WebViewClient());

  //设置支持js调用java
  webView.addJavascriptInterface(new AndroidAndJSInterface(), "Android");

  //加载本地资源
//  webView.loadUrl("http://atguigu.com/teacher.shtml");
  webView.loadUrl("file:///android_asset/JsCallJavaCallPhone.html");

 }

        3_加载JsCallJavaCallPhone.html页面

//加载本地资源
// webView.loadUrl("http://atguigu.com/teacher.shtml");
  webView.loadUrl(file:///android_asset/JsCallJavaCallPhone.html);

        4_从java代码传递json数据给javascript

class AndroidAndJSInterface {
 /**
  * 该方法将被js调用,用于加载数据
  */
 @JavascriptInterface
 public void showcontacts() {
  // 下面的代码建议在子线程中调用
  String json = "[{\"name\":\"阿福\", \"phone\":\"18600012345\"}]";
  // 调用JS中的方法
  webView.loadUrl("javascript:show('" + json + "')");
 }

 }

        5_拨打电话代码

class AndroidAndJSInterface {
  /**
   * 该方法将被js调用,用于加载数据
   */
  @JavascriptInterface
  public void showcontacts() {
   // 下面的代码建议在子线程中调用
   String json = "[{\"name\":\"阿福\", \"phone\":\"18600012345\"}]";
   // 调用JS中的方法
   webView.loadUrl("javascript:show('" + json + "')");
  }
  /**
   * 拨打电话
   * @param phone
   */
  public void call(String phone) {
   Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
//   startActivity(intent);
  }
 }

        6_h5页面：

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <script type="text/javascript">
   function show(jsondata){   
     var jsonobjs = eval(jsondata);
     var table = document.getElementById("personTable");
     for(var y=0; y<jsonobjs.length; y++){
      var tr = table.insertRow(table.rows.length); 
      var td1 = tr.insertCell(0);
      var td2 = tr.insertCell(1);
      td2.align = "center";
      td1.innerHTML = jsonobjs[y].name;
      td2.innerHTML = "<a href='javascript:Android.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";
     }
   }

  </script>
 </head>
 <body onload="javascript:Android.showcontacts()">

 <table border="0" width="100%" id="personTable" cellspacing="0">
   <tr>
    <td width="30%">姓名</td>
    <td align="center">电话</td>
   </tr>
  </table>


 </body>
</html>

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

相关文章

  • Android Activity回收与操作超时处理

    Android Activity回收与操作超时处理

    这篇文章主要介绍了Android Activity回收与操作超时的相关处理操作，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • Android ListView的OnItemClickListener详解

    Android ListView的OnItemClickListener详解

    这篇文章主要介绍了Android ListView的OnItemClickListener详解的相关资料，涉及到OnItemClickListener的position和id参数做详细的解释的知识点，非常不错，具有参考借鉴价值，需要的朋友参考下
    2016-07-07
  • Android 带logo的二维码详解及实例

    Android 带logo的二维码详解及实例

    这篇文章主要介绍了Android 带logo的二维码详解及实例的相关资料,需要的朋友可以参考下
    2017-05-05
  • WAC启动Android模拟器 transfer error: Read-only file system错误解决方法

    WAC启动Android模拟器 transfer error: Read-only file system错误解决方法

    这篇文章主要为大家分享下WAC启动Android模拟器时出现transfer error: Read-only file system 问题的解决方法
    2013-10-10
  • Android 数据库SQLite 写入SD卡的方法

    Android 数据库SQLite 写入SD卡的方法

    如果手机没有root，数据库文件是无法查看到的，不方便调试。最好的办法是把数据库写进SD卡。通过本文给大家介绍Android 数据库SQLite 写入SD卡的方法，需要的朋友参考下吧
    2016-04-04
  • Android打开GPS导航并获取位置信息返回null解决方案

    Android打开GPS导航并获取位置信息返回null解决方案

    最近在做一个 Android 项目，需要用到GPS获取位置信息，从 API 查了一下，发现获取位置信息仅需极其简单的一句即可getLastKnownLocation(LocationManager.GPS_PROVIDER)郁闷的是一直为null，于是搜集整理下，晒出来与大家分享
    2013-01-01
  • Android Jetpack结构运用Compose实现微博长按点赞彩虹效果

    Android Jetpack结构运用Compose实现微博长按点赞彩虹效果

    Compose在动画方面下足了功夫，提供了丰富的API。但也正由于API种类繁多，如果想一气儿学下来，最终可能会消化不良，导致似懂非懂。结合例子学习是一个不错的方法，本文就带大家边学边做，通过实现一个微博长按点赞的动画效果，学习了解Compose动画的常见思路和开发技巧
    2022-07-07
  • Android自定义view之围棋动画效果的实现

    Android自定义view之围棋动画效果的实现

    这篇文章主要介绍了Android自定义view之围棋动画效果的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-12-12
  • Kotlin基础通关之字符串与数字类型

    Kotlin基础通关之字符串与数字类型

    这篇文章主要介绍了Kotlin基础知识中的字符串与数字类型，编程中的入门知识，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 详解adb工具的基本使用

    详解adb工具的基本使用

    adb全称Android Debug Bridge，是Android SDK中的一个工具, 使用adb可以直接操作管理Android模拟器或者真实的Andriod设备，就是起到调试桥的作用，这篇文章主要介绍了adb工具的基本使用,需要的朋友可以参考下
    2022-08-08

最新评论