携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 7 天，点击查看活动详情

前言

如今混合开发，已经成为了很多公司的选择。特别是电商平台，因为存在大量的活动，如果只是使用传统的开发方式，将无法满足及时更新应用，来推广活动。而此时混合开发就可以发挥其优势了。

所谓的混合开发，就是原生 Android + web(H5) 混合开发。那么其核心点就是。如何在两者之间搭起沟通的桥梁。

学习一个新的事物，总是容易毫无头绪去，就应该以建立 问题树 的方式，开展学习。问题树往往比知识树更容易让人掌握一个知识。

那么我们通过以下几个问题，来尝试打开我们的混合开发之路吧。

问题树

WebView 怎么加载 H5？

如果我们希望在我们的 App 上简单地加载出一个网址的内容。那么我们可以通过 WebView 的 loadUrl 的方法实现。

webView.loadUrl("https://juejin.cn/user/2664871915426669")

Android 如何调用 H5 中的方法？

如果要想调用H5中的方法，那么我们要通过 WebSettings 配置 JavaScriptEnabled 的属性

webSettings = webView.settings
webSettings.javaScriptEnabled = true

当我们这么写完之后，会发现这个方法已经被 deprecated 了。至于为什么呢？是因为在 Android 4.2 之前的版本存在安全性漏洞问题，容易被恶性攻击。在 Android 4.2 以后的版本，Google 已通过 @JavaScriptInterface 解决了有关问题。

调用又分为 3 种情况，1.无需返回值的 2.需要返回值的 3.需要传参的。接下来我们一一来看一下，具体如何实现？

调用无返回值的方法

wv_test.loadUrl("JavaScript:show()") //show() 是 js 里面的方法名字

调用有返回值的方法

/******************evaluateJavascript 源码****************************/
/**
* @param script
* @param resultCallback 返回回调，返回值为 String 类型（可以是json格式数据）
*/
public void evaluateJavascript(@NonNull String script,
     @Nullable ValueCallback<String> resultCallback) {
    throw new RuntimeException("Stub!");
}

/******************Android 中具体使用****************************/
//Android 中具体使用
wv_test.evaluateJavascript("sum(1,2)" ) { value ->
    Log.e(TAG,"onReceiveValue value=$value")
}

/*******************JS 中的代码*********************************/
//JS 中的代码
function sum(a,b){
return a+b;
}

调用需要传参的方法

//如果参数是一个常量
wv_test.loadUrl("javascript:func('param')")
//如果参数是一个动态值，请使用转移字符
wv_test.loadUrl("javascript:func(""param"")")

H5 如何调用 Android 中的方法？

一开始的想法，就是 H5 端直接调用我有关的方法就好了，我也是怎么调用对方的方法的。

但，实际过程中，需要我们打开一个通信的通道——addJavascriptInterface 的方式打开这个通道，H5 端才能正常调用我们实现的方法。

wv_test.addJavascriptInterface(JsInter(),"Android")

那上面的两个参数 JsInter 和 Android 又是什么呢？

参数1：JsInter

JsInter 是一个类，主要实现了提供给 H5 调用的方法。

class JsInter { @JavascriptInterface fun back(): String { return "hello QCoder" } }

参数2：Android

"Android" 这个值，就是上面类的别名，让 H5 那边可以通过这个别名来调用我们的方法。

//Android 就是别名， back就是我们提供的方法。
window.Android.back();

结语

上面的就完成了原生 Android 和 H5 之间的通讯了。但，这只是混合开发的基础，真正的难题还在后面的更深的技术和更繁琐的业务情况。

【Android】混合开发 - JSBridge

前言

问题树