板块导航

浏览  : 539
回复  : 3

[HTML5] 原生Android结合H5混合开发小结

[复制链接]
cat77的头像 楼主
  混合开发概述

  微信,微博以及现在市面上大量的软件使用内嵌了H5页面;有些外包公司,为了节约成本,采用Android内嵌H5模式开发,便于在IOS上直接复用页面, 从而提高开发效率。

  实现的原理:

  本质 是:Java代码和JavaScript调用

  H5页面,只是Html的扩展,JavaScript用来处理页面的逻辑

  Android和H5互调案例:

  一.java调用js

  WebView的基本设置:
  1. private void initWebView() {
  2.         webView = new WebView(this);
  3.         WebSettings webSettings = webView.getSettings();
  4.         //设置支持JavaScript脚步语言
  5.         webSettings.setJavaScriptEnabled(true);

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

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

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

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

  14. //加载本地资源      
  15. webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");

  16.         //显示页面
  17. //        setContentView(webView);
  18.     }
复制代码

  java调用js原理就是Java代码调用了Js里面的函数。

  核心Java代码段:
  1. //登录功能里,java代码调用了js里面的JavaCallJs函数实现将name传到JS中,这样JS页面可以显示该用户名了。
  2.    private void login(String name) {
  3.         webView.loadUrl("JavaScript:javaCallJs(" + "'" + name + "'" + ")");
  4.         setContentView(webView);
  5.     }
复制代码

  核心js代码段:
  1. //上面Java核心代码执行将调用下面JS代码

  2. <script type="text/JavaScript">
  3.     function javaCallJs(arg){
  4.          document.getElementById("content").innerHTML =
  5.              ("欢迎:"+arg );
  6.     }
  7.     </script>
复制代码

  二.JavaScript调java

  1.在初始化webview代码中配置JavaScript接口:
  1. //设置支持js调用java,调用时候将执行第一个参数的接口类
  2.         webView.addJavaScriptInterface(new AndroidAndJSInterface(),"Android");
  3. //第二个参数为执行接口类方法的标示,与js相呼应
复制代码

  2.在该Activity中实现JavaScript接口类:
  1. /**
  2.      * js可以调用该类的方法
  3.      */
  4.     class AndroidAndJSInterface{
  5.         @JavaScriptInterface
  6.         public void showToast(){
  7.             Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show();
  8.         }
  9.     }
复制代码

  3_JavaScript中调用java代码的核心代码段:
  1. <input type="button" value="点击Android被调用" onclick="window.Android.showToast()" />
复制代码

  执行流程:

  点击js页面的button,将执行js的onclick方法(onclick=”window.Android.showToast()”),根据该Android标示与webview配置接口方法的第二个参数相匹配,然后执行js接口实现类的showToast()方法。从而实现js代码调用java代码。

  H5页面调用Android播放视频

  基本思路和上面的例子( 执行流程 )一样,业务逻辑层面来说播放视频主要是从H5页面点击播放跳转(把视频播放的url传递给Java层)并触发Java实现播放视频的代码即可。

  1. webview中的核心配置:
  1. //设置支持js调用java
  2.         webView.addJavaScriptInterface(new AndroidAndJSInterface(),"android");
复制代码

  2.在该Activity中实现JavaScript接口类:
  1. class AndroidAndJSInterface {
  2.         /**
  3.          * 该方法将被js调用
  4.          * @param id
  5.          * @param videoUrl
  6.          * @param tile
  7.          */
  8.         @JavaScriptInterface
  9.         public void playVideo(int id,String videoUrl,String tile){
  10.             //调起系统所有播放器
  11.             Intent intent = new Intent();
  12.             intent.setDataAndType(Uri.parse(videoUrl),"video/*");
  13.             startActivity(intent);
  14.         }
  15.     }
复制代码

  3.JavaScript中调用java代码的核心代码段:
  1. JavaScript:android.playVideo(itemid, videourl, itemtitle);
复制代码

  H5页面调用Android拨打电话

  思路都是一样的,点击H5页面把电话号码传到java层并调用拨号核心代码即可。

  在该Activity中实现JavaScript接口类:
  1. @JavaScriptInterface
  2.         public void call(String phone) {
  3.             Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
  4.             if (ActivityCompat.checkSelfPermission(JsCallJavaCallPhoneActivity.this, Manifest.permission.CALL_PHONE) != PackageManager.PERMISSION_GRANTED) {
  5.                 return;
  6.             }
  7.             startActivity(intent);

  8.         }
复制代码

  重点内容1.如果调用如下方法时候报错,那么可以在JavaScript接口类的具体实现方法上面加注解: @JavaScriptInterface ,或者把targetSdkVersion 改为 16(一般不适用)
  1. //设置支持js调用java
  2.         webView.addJavaScriptInterface(new AndroidAndJSInterface(), "Android");
复制代码

  2.该申请的权限不要忘了在AndroidManifest.xml中加上。

相关帖子

发表于 2017-1-11 15:16:39 | 显示全部楼层
又见楼主分享帖子
使用道具 举报

回复

发表于 4 天前 来自手机 | 显示全部楼层
Very Good!
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-62432134
  • 邮件:lispa@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部