Hybrid开发 Vue和Native交互

Native调用H5

• 双方暂约定方法名称为scanResult('参数')该方法要求传入一个参数，为扫描结果。Native调用代码如下:

    mWebView.evaluateJavascript("javascript:scanResult('扫描结果')", s -> {
        Log.e("xxx", "返回了点啥啊");
    });
  

其中javascript:scanResult('扫描结果')", s -> {Log.e("xxx", "返回了点啥啊")，javascript为固定前缀，scanResult为Vue/Js提供的方法，第二个参数为lamd表达式完整写法如下

    webView.evaluateJavascript("javascript:scanResult('扫描结果')", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String s) {
            //处理逻辑
        }
    });

若要将Vue/Js中方法暴露给Native调用需要在Vue/Js中使用mounted组件注入方法具体使用方法如下

    <script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            counter: 1
        },
        //Native调用Vue：第二步：注入方法
        mounted() {
            window.scanResult = this.scanResult
        },
         //Native调用Vue：第一步：创建方法
        methods: {
            scanResult (str) {
                alert('zz')
                return "js调用成功"
            }
        }
    });
    vm.$watch('counter', function(nval, oval) {
        alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
    });
    setTimeout(
        function(){
            vm.counter += 20;
        },10000
    );
    </script>

至此Native则可以通过evaluateJavascript方法调用Vue/Js中方法

H5调用Native

• 点击H5某个按钮时调用该放方法，约定方法名为getCamera()，由H5主动调用，无参数要求,调用格式为window.Android.getCamera()，格式示意如下：交互所有操作要求挂在到window下，Android为mWebView.addJavascriptInterface(new JSInterface(), "Android");注入的对象，getCamera()为对象中方法,完成代码如下

    private class JSInterface {
        @JavascriptInterface
        public void preShare(String openUrl, String shareTile, String shareDetails, String shareNetImg) {
            Log.e("xxx", "xxxx" + openUrl + shareDetails + shareDetails);
        }
  
        /*
        点击H5某个按钮时调用该放方法，由H5主动调用，无参数要求调用格式为window.Android.getCamera()，格式示意如下
        交互所有操作要求挂在到window下，Android为" mWebView.addJavascriptInterface(new JSInterface(), "Android");"注入的对象，getCamera()为对象中方法
         */
        @JavascriptInterface
        public void getCamera() {
            requestCamera();
        }
  
        @JavascriptInterface
        public void test() {
            Toast.makeText(BrowserActivity.this, "有这么难吗？", Toast.LENGTH_SHORT).show();
        }
  
    }
  

Native再通过mWebView.addJavascriptInterface(new JSInterface(), "Android");注入，则该Native接口中方法均可在H5中调用。
以上所有内容成立的前提是WebView进行了JS支持等设置。
调用示例

    <div id="app" @click="window.Android.getCamera()" style="font-size:25px;">
      <p style="font-size:25px;">计数器: {{ counter }}</p>
      <button>点我</button>
    </div>

额 好像没法上传文件呢(⊙o⊙)？\

补充：若Native调用Js中某个方法，而该Js方法又调用了Native方法，那么Native调用Js成功而Js调用Native中方法将失败。

解决方法：将Js中调用Native的部分代码单独抽取成一个Js方法。

可能原因：类似Js调用Native，相当于将某个对象注入Window下，相同的Native调用Native可能也是将该方法当成整体对象拿了过来故无法找到Native中方法。