【android学习】android与H5互相调用

来源：互联网发布：keygen注册机下载 mac 编辑：程序博客网时间：2024/06/13 16:09

1，概念

1）Native app（原生app）

i>场景

适用企业：游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用。
B2C开发模式的app。终端用户更期望简单而优良的用户体验。因此，你应该更加注重界面、性能、响应性、易操作性等。如果你的应用能够很方便地调用原生平台特有的一些功能的话，那对用户来说当然是极好的。

2）web app（框架APP）

i>了解

使用浏览器运行；纯Web前端架构，很多重要手机特性无法访问，例如联系人以及Push notification之类的；Single Page App；销售渠道多限于浏览器。

3）hybrid app（混合app）

i>了解

主要是前端js和android端的通信。混合app即将网页嵌入在android界面中，界面主要采用HTML,CSS,JS。
和浏览器使用这些网页感受一样，不同的是，在混合app中，网页可以方便的使用设备中的各种传感器，而单纯的web app是无法访问系统调用的。

ii>场景

经典案例：facebook，app store，微信。
适用企业：电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。
B2B开发模式的app：满足自己的业务需求，相对于用户体验来说，更加注重业务过程，并且他们也有能力来培训自己的用户来使用APP。

iii>特点

①安装包小巧，只包含框架文件，而大量的UI元素、数据内容刚存放在云端；
②跨平台特性。不同的平台上面展示同一个交互层。
虽然分担了原生app界面开发的压力，但同时，也造成一些问题。比如说要仿造一个iOS的默认设置界面，就需要大量的html以及css代码了，而且效果不一定和iPhone上面的界面一样好。
而对于前端的兼容性来说，依然不甚完美。
③开发简单，但却有所有原生应用的特性。
④便于调试，开发的时候可以通过浏览器的方式进行调试，工具丰富。
但是，当涉及到一些需求，需要进入手机底层做处理，单纯的web调试无法实现。
⑤因为是混合开发，交互层的效率由Native解决，架构基本由在app内写网页解决。
⑥运行效率低，渲染界面慢。需要好好权衡。比如facebook因为web渲染效率底下，把整个应用改回了原生app。

iv>实现方案

方案一：以webView作为用户界面层，以javaScript作为基本逻辑。这种架构一般会非常依赖WebView层的性能。
方案二：在开发原生应用的基础上，嵌入webview，整体的架构使用原生应用提供。需要Native开发人员以及web前端开发人员组成。Native开发人员写好基本的架构以及API让web开发人员开发界面以及大部分的渲染。

4）B2B( BTB，Business-to-Business)

指企业与企业之间（进行电子商务交易的供需双方都是商家）通过专用网络或Internet，进行数据信息的交换、传递，开展交易活动的商业模式。它将企业内部网和企业的产品及服务，通过 B2B 网站或移动客户端与客户紧密结合起来，通过网络的快速反应，为客户提供更好的服务，从而促进企业的业务发展。

5）B2C(商对客，Business-to-Customer)

”商对客”是电子商务的一种模式，也就是通常说的直接面向消费者销售产品和服务商业零售模式。这种形式的电子商务一般以网络零售业为主，主要借助于互联网开展在线销售活动。B2C即企业通过互联网为消费者提供一个新型的购物环境——网上商店，消费者通过网络在网上购物、网上支付等消费行为。

2，实现

1）JS调用android原生代码

2）android原生调用JS代码

3）实现细节

i)在项目中创建一个文件夹assets，把写好的H5页面放入该文件夹中。
H5页面中有一个script写的setRed()方法。这个方法用于给android原生调用。
ii）在android中，添加webview控件。
设置属性：

//加载assets文件中的H5页面webView.loadUrl("file:///android_asset/demo.html");   // 支持javascriptwebView.getSettings().setJavaScriptEnabled(true);/***JS调用android原生：     *① android原生方法需要标记：@JavascriptInterface。这个标记在android 4.2之前不需要添加，在4.2之后需要添加。如ClickButton类中的toString()方法。*②添加JS的交互事件。addJavascriptInterface这个方法，前一个参数是触发的对象，后一个参数是这个对象的一个标志，我们在JS中使用它来调用android方法。*所以我们需要申明一个内部类，ButtonClick,它的@JavascriptInterface标记的setClick方法供JS调用。如下代码：*/ButtonClick click = new ButtonClick(); webView.addJavascriptInterface(click,"MainActivity");  /**另一种写法*/mWebView.addJavascriptInterface(new Object() {            public void callJavaMethod() {                 Toast.makeText(getApplicationContext(), "JS调用Android原生", Toast.LENGTH_LONG).show();            }          }, "demo");

/***注意：*①这是一个内部类，用来注册addJavascriptInterface，以让JS调用android。*②这个类的权限无所谓，但是标记@JavascriptInterface的方法即：JS要调用的方法，一定要设置为public才可以调用。*③同一个webView不能跨进程调用，所以不能使用非内部类的webView.*/private class JsUseAndroid{        @JavascriptInterface        public void setClick(){            try{                Message message = new Message();                message.what = 0;                handler.sendMessage(message);            }catch(Exception e){                LogUtil.i(Tag, "JsUseAndroid" + e.getMessage());            }        }    }

然后在JS中这样调用android中的方法：

 //可以这样：onclick="javascript:MainActivity.setJsGuaranteeList()" //也可以直接在click事件中这样写：  $(".close").on('click', function () {        MainActivity.setClick();        //或者写成这样：javascript:MainActivity.setClick()    })

可通过如下方法调用JS中的方法：

/***android原生调用JS*①在加载H5页面结束后，可以调用JS中的无参数方法 */webView.loadUrl("javascript:setRed()");  /**②调用JS中的有参数方法*/ webView.loadUrl("javascript:setColor('#00f')");  webView.loadUrl("javascript:setList(‘" + result + "’)");

4）注意

①路径

对于同一个文件夹中的html和css，他们地址是相对地址就可以。需要注意的是，网页开发中，路径不区分大小写，但是在android中对大小写区分尤为严格。需要一一校对路径，不然会发生网页在PC端可以访问，但是在android 的webview中无法加载或者失效的情况。

②线程

当采用线程的时候，需要注意，同一个webview不可以在2个线程中调用，否则会报错。

3，demo

1）网上demo

android原生和H5交互

2）推荐文章

webView详解
微信、网易云音乐的JS与android互相调用

3）demo-android调用JS，点击android按钮，修改div内容。（入门练手）

<!DOCTYPE html> <html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>          <title></title>        <script type="text/javascript" language="javascript">            function  callJavaScriptMethod()            {                document.getElementById("content").innerHTML = "Android 调用  Javascript";            }        </script>    </head>    <body>        <div style="margin:50px 50px 50px 50px;" id="content"></div>    </body></html>

android端：按钮点击监听写：

webView.loadUrl("javascript:callJavaScriptMethod()");

此时一个demo完了，下面为其它练习。
甚至我们可以将JS写成外部文件：

function  callJavaScriptMethod(){     document.getElementById("content").innerHTML = "Android 调用  Javascript";}

然后再html中这样引用它：

<script  src="style/js/test.js"></script>

在android中调用方法一样。依然可以实现。

1 0