混合开发：Android和H5（JS）交互

ErwinNakajima

已于 2023-07-04 12:40:04 修改

阅读量1.2w

点赞数 9

文章标签： android javascript 交互

于 2021-06-15 16:47:30 首次发布

本文链接：https://blog.csdn.net/NakajimaFN/article/details/117927813

版权

前言

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

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

为什么要学习与H5（JS）互调

目前，微信、QQ空间等大量软件都内嵌了H5。Android与H5（JS）互调可以让我们实现混合开发。混合开发就是在一个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文件夹下的js_java_interaction.html页面
webView.loadUrl("file:///android_asset/js_java_interaction.html");
//方式二：加载网页
//webView.loadUrl("http://www.baidu.com");

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

Android如何调用H5（JS）中的方法

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

WebSettings webSettings=mWebView.getSettings();
//设置为可调用js方法
webSettings.setJavaScriptEnable(true);
webView.setWebViewClient(new WebViewClient());
webView.setWebChromeClient(new WebChromeClient());

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

调用H5中有参数有返回值的方法
调用H5中有参数无返回值的方法
调用H5中无参数无返回值的方法

调用H5中有参数有返回值的方法

H5（JS）代码：

//有参有返回值的方法
function sum(a,b) {
    <!--gygguuuiu-->
    return a + b;
}

Android代码：

int num = 1;
int num2 = 2;
//android调用js，有参数有返回值
webView.evaluateJavascript("sum(" + num + "," + num2 + ")", new ValueCallback<String>() {
   @Override
   public void onReceiveValue(String value) {
      LogManager.i(TAG, "js返回的结果是=" + value);
      showToast("js返回的结果是=" + value, true);
   }
});

调用H5中有参数无返回值的方法

H5（JS）代码：

//有参无返回值的方法
function alertMessage(message) {
    alert(message);
    <!--        document.getElementById("p").innerHTML="Android to js hello world";-->
}

Android代码：

//当出入变量名时，需要用转义符隔开
String content = "9880";
//android调用js，有参数无返回值
webView.loadUrl("javascript:alertMessage(" + content + ")");

调用H5中无参数无返回值的方法

H5（JS）代码：

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

Android代码：

//android调用js，无参数无返回值
webView.loadUrl("javascript:show()");

H5如何调用Android中的方法

H5（JS）代码：

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

Android代码：

public static class JsInteration {
   
   @JavascriptInterface
   public String back() {
      return "Js to android hello world";
   }
}
//js调用android
webView.addJavascriptInterface(new JsInteration(), "android");

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

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

项目代码为utf-8编码。

如对此有疑问，请联系qq1164688204。

推荐Android开源项目

项目功能介绍：RxJava2 和Retrofit2 项目，使用Kotlin+RxJava2+Retrofit2+MVP架构+组件化/Kotlin+Retrofit2+协程+MVVM架构+组件化，添加自动管理token 功能，添加RxJava2 生命周期管理，集成极光推送、阿里云Oss对象存储和高德地图定位功能。

项目地址：https://gitee.com/urasaki/RxJava2AndRetrofit2