背景: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;
                        }
                    });
                }
            }
    });

     

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐