一年好景君须记，最是橙黄橘绿时。这篇文章主要讲述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="https://www.songbingjia.com/android/点击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="https://www.songbingjia.com/android/点击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); } }

【Android与H5互调】                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>

推荐阅读

• 

  如何用手机制作祝福代码，移动手机如何定制祝福信息
• 

  投稿|CRISPR专利争议新进展：诺奖得主团队败诉，华人学者张锋获美专利局支持
• 

  华硕灵耀14笔记本USB坏了怎么修理
• 

  稀有气体是纯净物还是混合物 稀有气体是纯净物吗
• 

  王者荣耀画面设置方法,教你王者荣耀电影画质是怎么调的
• 

  哪里有正规的养鹅场 哪里有养鹅基地
• 

  win11搜索栏怎么用详细介绍
• 

  移动互联网现状分析
• 

  新鲜柚子放一段时间会变甜一些吗
• 

  《剽悍行动营，很高兴和你走一程，我想再走一程》
• 

  塑料造粒机器多少钱 塑料造粒机器多少钱一台
• 

  六一礼物
• 

  小鲳鳊鱼怎么烧 鳊鱼怎么烧
• 

  如何查看qq空间照片回收站 如何查看qq空间照片，如何查看qq空间照片密码
• 

  626电商平台是干什么的
• 

  mongodb比较时间 mongodb运行时间
• 

  手机visio看图软件，手机visio怎么下载
• 

  mysql怎么输入空值 mysql空格怎么表示
• 

  清明节要干什么事情 清明节要做哪些事情
• 

  在哪个位置踢 任意球的踢球位置 任意球在哪个位置踢 任意球的踢球位置

• android MPChart图标使用具体解释
• Android 网络图片Url 转 Bitmap
• android奋战的一周
• Android攻城狮四种基础动画
• Android攻城狮基础动画
• Android攻城狮动画组合
• android中实现内容搜索
• Android应用中使用百度地图API之POI
• 一般枢轴点旋转或绕固定点旋转