手机移动程序开发Android开发Android开发学习和思考

混合开发：Android的WebView加载H5,和H5的互调|

2017-11-11  本文已影响596人  跳动的松鼠

前言

混合开发，不仅仅显示一个WebView,有时还需要本地Java代码与HTML中的JavaScript进行交互，Android也对交互进行了很好的封装。例如：点击网页中的按钮，调用Android中的原生对话框；点击网页中的电话号码，调用Android中的拨号APP。

  1. 为什么要学习与H5互调
  2. Hybrid混合开发（原生/H5）
  3. Hybrid混合开发应用场景
  4. WebView如何加载H5页面
  5. Android如何调用H5中的方法
  6. H5如何调用Android中的方法

为什么要学习与H5互调

目前，微信、QQ空间等大量软件都内嵌了H5。Android与H5互调可以让我们实现混合开发。混合开发就是在一个APP中内嵌一个轻量级的浏览器，一部分原生的功能改为Html5来开发。

原理：就是Java代码和JavaScript之间的调用。

Hybrid混合开发（原生/H5）

在项目中，从需求来说，大部分页面用H5实现，可以减少很多工作量。但因为不可控因素太高，而时间又短，风险太大。而我们对原生比较熟，开发效率比较高，很多东西控制得了，风险相对较低。并且主推产品是App，微信属于辅助性产品。所以以原生为主，H5为辅，App大部分页面用原生完成，小部分用WebView加载H5。

如果人员和时间资源充足的话，我会以H5为主，微信和App都有的页面，统一用H5。App专有的部分，比如导航栏、标题栏、登录等，用原生实现。另外，WebView里的H5有点击事件时，也许是URL链接，也许是调用JS的，都不会让它直接在该WebView里做跳转，需要拦截下来做原生处理，然后再跳转到一个新的原生界面，原生页面可以嵌入另一个WebView,用来展示新的H5页面。

下面谈下混合开发具体的应用场景：

Hybrid混合开发应用场景

一些基础的功能，比如调用手机的摄像头，获取地理位置，登录注册功能等等，做成Native的功能，让Html5来调用。

如果把一个登录和注册功能也做成Html5,在弱网络环境下，可能会等半天还没加载出页面。所以使用Native开发会快一些。
那么什么情况适合使用Html5来开发呢？像一些活动页面，比如秒杀、团购等适合做Html5,因为这些页面可能设计的非常炫而且复杂，Html5开发会简单点。并且这些页面时效性短，更新更快，因为一个活动说不定就一周时间，下周换活动，如果这样的话，做成Native是肯定不行的。

WebView如何加载H5页面

Android是通过WebView来加载Html页面的，WebView加载H5有两种模式，一种是加载服务器的H5页面，一种是加载本地的H5页面。加载服务器的H5页面比较简单，只要load一下URL就可以了。加载本地的H5页面，需要将H5页面存放在本地，包括关联的CSS和JS文件，这种方式相对比较复杂，但是加载速度会比第一种快很多。
根据Html文件所在的位置不同，写法也不同：


image.png 
//方式一：加载assets文件夹下的test.html页面
mWebView.loadUrl("file:///android_asset/files/js_java_interaction.html");
//方式二：加载网页
//mWebView.loadUrl("http://www.baidu.com");

实现java和js互相调用的步骤：
WebView开启JavaScript脚本执行
WebView设置提供JavaScript调用的交互接口
客户端和网页端编写调用对方的代码
具体如下

Android如何调用H5中的方法

想要调用JS方法，那么必须让webView支持

WebSettings webSettings=mWebView.getSettings();
//设置为可调用js方法
webSettings.setJavaScriptEnable(true);

如何调用？
Android调用H5中的方法，直接调用即可，不需要额外的操作。

  1. 调用H5中无参无返回值的方法
  2. 调用H5中带返回值的方法
  3. 调用H5中带参数的方法

调用H5中无参无返回值的方法
H5代码：

...
//无参无返回值的方法
function show(){
  //显示helloworld
  document.getElementById("p").innerHTML="helloworld";
}
...

Java代码中调用H5中的show（）方法：
mWebView.loadUrl("JavaScript:show()");

调用H5中带返回值的方法
可以调用mWebView.evaluateJavascript()方法，该方法只在安卓4.4以上版本适用

//Android调用有返回值js方法，安卓4.4以上才能用这个方法
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        Log.d(TAG, "js返回的结果为=" + value);
        Toast.makeText(MainActivity.this, "js返回的结果为=" + value, Toast.LENGTH_LONG).show();
    }
});

调用H5中带参数的方法
有两种情况：
当调用H5中带参数的方法时，势必要传入一个字符串，当传入固定字符串时，用单引号括起来即可；
当传入变量名时，需要用到转义符

//传固定字符串可以直接用单引号括起来
mWebView.loadUrl("javascript:alertMessage('哈哈')");//访问H5里带参数的方法，alertMessage(message)为H5里的方法

//当出入变量名时，需要用转义符隔开
String content="9880";
mWebView.loadUrl("javascript:alertMessage(\""   +content+   "\")"   );

H5如何调用Android中的方法

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

/**
 * 自己写一个类，里面是提供给H5访问的方法
 * */
public class AndroidAndJSInterface{

    @JavascriptInterface//一定要写，不然H5调不到这个方法
    public String back() {
        return "我是java里的方法返回值";
    }
}

代码分析：
新建一个类，里面写提供给H5操作的方法，并规定别名。这里新建的class为AndroidAndJSInterface,方法为back(),规定的别名为Android。
在安卓4.2以上可以直接使用@JavascriptInterface注解来声明，定义完这个方法后再调用mWebView.addJavascriptInterface()方法：

H5代码：

function s() {
    //调用原生的方法，Android为约定的别名；back()为原生的方法
    var result=window.Android.back();
    //将返回结果显示在id为p的控件上
    document.getElementById("p").innerHTML=result;
}

完整demo,我的GitHub:https://github.com/FlyStorm/MyAndroidAndH5

注意事项：
1、当自己写html文件时，可能会出现显示乱码，我们需要指定格式：

<head>
    <!--从assert中加载的中文网页会出现乱码，解决办法就是给html指定编码-->
    <meta http-equlv="Content-Type" content="text/html;charset=UTF-8">
    <title>
    </title>
</head>

项目代码为utf-8编码。

2、当H5调用我们的方法时，我们需要把规定的别名传给H5（切记一定不能错），而且我们要在自己的方法里执行H5想要的操作。

webSettings.setJavaScriptEnabled(true);//打开js支持
/**
 * 打开js接口給H5调用，参数1为本地类名，参数2为别名；h5用window.别名.类名里的方法名才能调用方法里面的内容，例如：window.android.back();
 * */
mWebView.addJavascriptInterface(new AndroidAndJSInterface(), "Android");
mWebView.setWebViewClient(new WebViewClient());
mWebView.setWebChromeClient(new WebChromeClient());

3、给H5调用的方法一定要加@JavascriptInterface，不然H5调不到我们的方法

/**
 * 自己写一个类，里面是提供给H5访问的方法
 */
public class AndroidAndJSInterface {

    @JavascriptInterface//一定要写，不然H5调不到这个方法
    public String back() {
        return "我是java里的方法返回值";
    }
}

4、 调用js有参数有返回值的函数时，只有安卓4.4以上才能用webView.evaluateJavascript方法直接拿到返回值；当版本低于4.4的时候，常用的思路是 java调用js方法，js方法执行完毕，再次调用java代码将值返回。
当版本低于4.4的时候:
Java调用js代码

String call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);

js函数处理，并将结果通过调用java方法返回

function sumToJava(number1, number2){
       window.control.onSumResult(number1 + number2)
}

Java在回调方法中获取js函数返回值

@JavascriptInterface
public void onSumResult(int result) {
  Log.i(LOGTAG, "onSumResult result=" + result);
}

5、加载本地assets里的H5界面，要写成android_asset,而不是assets，不然加载不到

以上是根据我的一些理解，做的总结分享，旨在抛砖引玉，希望有更多的志同道合的朋友一起讨论学习，共同进步！

参考文献：
http://www.jianshu.com/p/0b986d6e2e17

上一篇下一篇

猜你喜欢

热点阅读