用Wex5 生成的Android工程，Java与JS的相互调用

背景：Vue的前端工程，走Wex5模式一指定工程入口index.html文件作入口，把用到的cordova插件加上打出的Android 原生工程。

JS调Java：

• vue工程里，在window里添加callAndroid方法，用于在业务中被调用。

/**
 * js调用Android自定义方法
 * funcName: Android工程注入进window的对象_cordovaDetect里的方法名
 * parameter: 参数，以JSON格式传入，但以字符串的形式传给Android工程
 * */
var callAndroid = function(funcName, parameter){
  window._cordovaDetect && window._cordovaDetect[funcName](JSON.stringify(parameter))
}

• Android工程里，在webView里注册@JavascriptInterface

/**
 * 这是在原生工程的SystemWebView.java文件内
 * 由于原生工程已经注册了一个addJavascriptInterface了，我就直接贴代码吧
 */

void init(SystemWebViewEngine parentEngine, CordovaInterface cordova) {
        this.cordova = cordova;
        this.parentEngine = parentEngine;
        if (this.viewClient == null) {
            setWebViewClient(new SystemWebViewClient(parentEngine));
        }

        if (this.chromeClient == null) {
            setWebChromeClient(new SystemWebChromeClient(parentEngine));
        }
        
        //这行是重点
        this.addJavascriptInterface(new CordovaDetect(this.parentEngine), "_cordovaDetect");
    }


// CordovaDetect 这个对象长这样
class CordovaDetect {
        CordovaWebView appView;
        SystemWebViewEngine parentEngine;

        CordovaDetect(SystemWebViewEngine parentEngine) {
            this.parentEngine = parentEngine;
            this.appView = parentEngine.parentWebView;
        }


        @JavascriptInterface
        public void setExist(boolean exist) {
            LOG.d("CordovaDetect", "通过js判断cordova环境");
            if (!exist) {
                LOG.d("CordovaDetect", "通过js判断cordova不存在");
                this.appView.postMessage("splashscreen", "hide");
            }
        }

        // js调用Android在原有工程新增JavascriptInterface（以上是原有的，这个是新增的）
        @JavascriptInterface
        public void callAndroidTest(String msg) {
            // TODO

        }
    }

• 在业务中调用

  // 测试调用安卓自定义方法
  if(UT.isX5app() && window.deviceReady){
      callAndroid('callAndroidTest', {
          a:'456',
          b:'789'
      });
  }

   

 

Java 调 JS：

• vue工程里，在window里添加callJSTest方法，用于在Android中被调用。

  //js调用Android自定义方法
  var callJSTest = function(msg){
    //TODO
    return msg
  }

   

• Android工程里调用

  //在主线程中调用JS
  cordova.getActivity().runOnUiThread(new Runnable() {
          public void run() {
              String js = "javascript:window.callJSTest('来自Android的问候~')";
              if (js != null) {
                  parentEngine.evaluateJavascript(js, new ValueCallback<String>() {
                      @Override
                      public void onReceiveValue(String value) {
                          //此处为 js 返回的结果
                          String a = value;
                      }
                  });
              }
          }
  });