持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

AgentWeb JS与Android通信

这篇文章是为了了解AgentWeb通信的协议。AgentWeb是一个简洁优秀的封装webView的框架，为了快速的集成微型浏览器，在加载webView的时候也会寻求第三方库，AgentWeb就是其中一个。

JS与Android通信的原理

JS 调用安卓方法

JS 调用 Android，用到了JNI，大概含义是将注册监听的方法，通过一些类转成Javascript语句，由WebView加载进来。

安卓调用JS方法

由于JS很灵活，使用JS动态注入的思想，可以让安卓调用到JS方法。就像在浏览器的控制台，你写好js，它也可以改变或者调用网页上的东西。

如何通信

Android原生方法与JS通信的步骤，请参考这篇文章 Android WebView与网页数据交互

接下来看AgentWeb中封装过后是怎么使用，通信协议是怎么样的。

如何使用

安卓端加载assets中的html

AgentWeb agentWeb = AgentWeb.with(this)
                .setAgentWebParent(frameLayout, new ConstraintLayout.LayoutParams(-1, -1))
                .useDefaultIndicator()
                .createAgentWeb()
                .ready()
                .go("file:///android_asset/test.html");

JS 调用安卓方法

android端添加方法

class AgentWebInterface {

    @JavascriptInterface
    public void callAndroid(String str) {
        Log.e("test", "test print");
        Toast.makeText(AppCache.getContext(), "JS调用JAVA完成:" + str, Toast.LENGTH_SHORT).show();
    }
}

android 端添加引用

agentWeb.getJsInterfaceHolder().addJavaObject("android", new AgentWebInterface());

前端代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script type="text/javascript">
      function buttonClick() {
        android.callAndroid("你好，Android! ");
      }
    </script>
</head>
<body>
<button type="button" id="button1" onclick="buttonClick()">发数据给安卓</button>
</body>
</html>

值得注意的是，很多资料使用的是 window.android.callAndroid("你好，Android! ")，而我这里要去掉window才可以

安卓调用JS方法

安卓代码，在需要调用前端方法时执行

agentWeb.getJsAccessEntrace().quickCallJs("loadWithAndroid");

前端代码

 function loadWithAndroid() {
      alert('进入JS方法');
      }

如果要传参数给JS。quickCallJs这个方法有多个重载方法，在该方法中添加值用来传递给前端JS。

        agentWeb.getJsAccessEntrace().quickCallJs("loadWithAndroid","test");

相应前端的接收方法

function loadWithAndroid(text) {
      alert('进入JS方法:'+text);
      }