Android-混合开发JSBridge-基础篇

Posted 2021-05-11 Q-CODER

（假装有图）

因项目需要，终究是需要进行混合开发。开心的是，我早就想接触这块了。在我还没有接触之前，我想着这有啥难的。不就是用WebView加载一个链接就完事了吗？（无知的人类）废话不多说，直接进入主题。接下来几篇文章都会是关于与 H5 混合开发的坑坑洼洼。

学习一个新的事物，总是容易毫无头绪去，就应该以建立”问题树“的方式，开展学习。（该思路源于《跃迁》一书，问题树往往比知识网络结构图更容易让人掌握一个知识）

目录

WebView怎么加载H5？

Android 如何调用 H5 中的方法？

调用无返回值的方法

调用有返回值的方法

调用需要传参的方法

H5 如何调用 Android 中的方法？

---

WebView怎么加载H5？

webView.loadUrl("http://www.example.com")

android 如何调用 H5 中的方法？

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

webSettings = webView.settings
webSettings.javaScriptEnabled = true

当你真的这么写到代码中，会发现被 deprecated 了。至于为什么呢？就是说会有安全性的问题。详细的自行查资料了解吧。

调用无返回值的方法

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 你就直接调用就好了呀。

其实，这个步骤不仅仅是 H5 要做的事情，还需要我们配合到 H5 ，他们才能调用到我们写的方法。

首先我们要打开一个通信的通道，可以通过 addJavascriptInterface 的方式打开这个通道。

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

那 JsInter 是什么？"android" 又是什么？

1.JsInter 是一个类，这里面放着给 H5 调用的方法

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

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

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

---

理论上的H5和Native的交互已经完成了。但是，在实际开发中，要考虑的远远不止这些。不过上面先对混合开发有个整体的认识先，接下来的文章会一步步地走向深渊。