Android webView JS 之间的交互

我用到过三种交互方式 第一种为原生的，第二种：JSBridge，第三种 DSBridge 后两种是第三方jar包其实也是对原生的一种封装

JSBridge  Github地址：GitHub - lzyzsd/JsBridge: android java and javascript bridge, inspired by wechat webview jsbridge

DSBridge  Github地址：

GitHub - wendux/DSBridge-Android: A modern cross-platform JavaScript bridge, through which you can invoke each other's functions synchronously or asynchronously between JavaScript and native.

一：原生

       JS调用Android

//webview 控件
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
//给webview 设置与js交互
webSettings.setJavaScriptEnabled(true);

//第二个参数为js 调用android会用到
 mWebView.addJavascriptInterface(new TestJStoAndroid(),"jsa");
  // 加载网页
mWebView.loadUrl("你的url");

需要定义一个于js交互的类，用于js调用android 的方法

public class TestJStoAndroid{

    // js调用 必须加@JavascriptInterface注解
    @JavascriptInterface
    public void test(String msg) {
        System.out.println("js调用了android test方法 传过来的参数为"+msg);
    }
}

网页端代码 例如 点按钮调用android “test”方法

 //点击按钮则调用test函数
 <button type="button" id="button1" onclick="clickAndroid()"></button>


function clickAndroid(){
     // jsa 是 mWebView.addJavascriptInterface(new TestJStoAndroid(),"jsa"); 第二个参数
    jsa .test("js去调用了android中的test方法");
}

Android 调用js

        这种方式不需要从js获取返回值

button.setonClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 通过Handler发送消息
                mWebView.post(new Runnable() {
                    @Override
                    public void run() {
                        // 注意调用的JS方法名要对应上
                        // 调用javascript的callJS()方法
                        mWebView.loadUrl("javascript:callJS()");
                    }
                });
                
            }
        });

// 只需要将第一种方法的loadUrl()换成下面该方法即可
    mWebView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            //此处为 js 返回的结果
        }
    });
}

        网页端代码

// Android需要调用的方法
   function callJS(){
      alert("Android调用了JS的callJS方法");
   }

JSBridge 和 DSBridge 参考github 后续更新