Android与H5互调详细介绍

2024-03-05 03:16:27

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实现H5与Native交互的两种方式

前言大家都知道在Android WebView使用中,经常需要H5页面和Native页面进行交互,比如在网页上点击分享按钮,调用本地分享接口进行分享,分享成功后本地调用网页的JavaScript代码展示一条分享成功的消息.下面来看看一起看看两种实现方式是什么? 一.Url拦截的方式重写ShouldOverrideUrl进行Url拦截,这种方式通过H5和Native协商好的Url格式来表明H5页面想要Native进行的操作,比如拨打电话,播放视频,查看某个用户的信息等操作,每种操作对应一种ur
Android与H5互调详细介绍

Android与H5互调详细介绍微信,微博,微商,QQ空间,大量的软件使用内嵌了H5,这个时候就需要了解Android如何更H5交互的了:有些外包公司,为了节约成本,采用Android内嵌H5模式开发,便于在iOS上直接复用页面,最终解决成本. 为什么学android也要学h5? Android很多软件都有内嵌H5的,有什么用处.优势?节约成本,提高开发效率. 实现的原理是什么? 本质是:Java代码和JavaScript调用案例一:Java与Js简单互调首先,在Android代码中加载H
Android webview加载H5方法详细介绍

目录 1,安卓APP 怎么用webview加载H5 2,H5怎么调用安卓定义的方法 3,安卓怎么调用H5定义的方法这篇文章主要阐述3个知识点安卓APP 怎么用webview加载H5 H5怎么调用安卓定义的方法安卓怎么调用H5定义的方法 1,安卓APP 怎么用webview加载H5 安卓端定义个webview xml 页面,代码如下所示: <?xml version="1.0" encoding="utf-8"?> <WebView xmlns
WebView的介绍与简单实现Android和H5互调的方法

为什么要学习Android与H5互调? 微信,QQ空间等大量软件都内嵌了H5,不得不说是一种趋势.Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发. 优势:使用H5实现的功能能够在不升级App的情况下动态更新,而且可以在Android或iOS的App上同时运行,节约了成本,提高了开发效率. 原理:其实就是Java代码和JavaScript之间的调用. 开局插入一张文章的目录结构: WebView简介要
Android手机信号强度检测详细介绍

最近到处在跑着找工作,难免在面试过程中遇到这样那样的问题,记得最清楚一次在面试过程中被问到,当手机处于弱网状态下,如何处理,如何监听网络信号强度变化.但是真是蒙了,回答的乱七八糟,思路一点都不明确.今天小编在这里带领大家了解下关于手机信号强度的相关几个概念. Android手机信号强度介绍 android定义了2种信号单位:dBm和asu.它们之间的关系是:dBm =-113+2asu,这是google给android手机定义的特有信号单位.例如,我的信号强度为-53dBm,则对应30asu,因
Android集成高德地图详细介绍

最终效果是,本App展示地图,点击地图导航,调转三方实现导航. 1.迈出第一步,去创建自己的应用key https://lbs.amap.com/1.1创建完应用之后,点击页面的{添加},要求填写自己项目的信息对于调试获取SHA1的方法是:1.打开cmd,2.在弹出的控制台窗口中输入 cd .android 定位到 .android 文件夹: 3.继续在控制台输入命令: 调试版本使用 debug.keystore,命令为:keytool -list -v -keystore debug.key
Android组件化原理详细介绍

目录什么是组件化? 为什么使用组件化? 一步步搭建组件化 1.新建模块 2.统一Gradle版本号 3.创建基础库 4.组件模式和集成模式转换 5.AndroidManifest的切换 6.*业务Application切换组件之间的跳转 1.添加依赖 2.初始化ARouter 3.添加跳转组件之间的数据传递 1.定义接口 2.实现接口组件Application的动态切换 1.定义抽象类 BaseApplication 继承 Application 2.所有的组件的 Application
Android Crash与ANR详细介绍

目录 Crash 空指针角标越界集合元素删除操作异步操作后对界面元素的处理 Intent传递数据过大在子线程中操作UI ANR Crash Crash是指程序闪退,导致APP不能正常使用.Crash产生的原因有很多,下面只是列举了一些常见原因. 空指针空指针应该是项目中最容易产生crash的情况了,举个例子,我们获取某个对象的属性或方法时,这个对象为Null时,如何没有判空,则会出现空指针异常NullPointException,所以这就要求使用对象的时候进行非空判断,在这点,我觉得k
Android中的WebView详细介绍

Android中WebView的详细解释: 1. 概念: WebView(网络视图)能加载显示网页,可以将其视为一个浏览器.它使用了WebKit渲染引擎加载显示网页. 2. 使用方法: (1).实例化WebView组件: A.在Activity中实例化WebView组件.eg: 复制代码代码如下: WebView webView = new WebView(this); B.调用WebView的loadUrl()方法,设置WevView要显示的网页.eg: 复制代码代码如下: 互联网用:we
Android Monkey压力测试详细介绍

Monkey 是Android SDK提供的一个命令行工具, 可以简单,方便地运行在任何版本的Android模拟器和实体设备上. Monkey会发送伪随机的用户事件流,适合对app做压力测试阅读目录环境搭建什么是Monkey Monkey 用来做什么 Monkey程序介绍 Monkey 架构 Monkey弱点 Monkey 参数大全 Monkey 命令基本参数介绍 Monkey 实例 Monkey 查看包名 Monkey 日志分析必须重视Crash 环境搭建安装Android SD
Android Service总结及详细介绍

1.Service的种类按运行地点分类: 类别区别优点缺点应用本地服务(Local) 该服务依附在主进程上, 服务依附在主进程上而不是独立的进程,这样在一定程度上节约了资源,另外Local服务因为是在同一进程因此不需要IPC,也不需要AIDL.相应bindService会方便很多. 主进程被Kill后,服务便会终止. 非常常见的应用如:HTC的音乐播放服务,天天动听音乐播放服务. 远程服务(Remote) 该服务是独立的进程, 服务为独立的进程,对应进程名格式为所在包名

Android与H5互调详细介绍

相关推荐

随机推荐