Vue JS 与Android webview的交互

转发：
https://blog.csdn.net/solocoder/article/details/81948286
这篇文章讲的比较全，但是太复杂了，我总结了下。
我的项目使用Vue框架写的web端，大部分逻辑都在iframe里外加一个底部导航bar，没有用Vue-cli，使用多页面跳转。Android studio 使用webView访问。
一，Vue调用Android的方法
1.Android onCreate() 里加这句，androidinfo是和html通信的标签

webView.addJavascriptInterface(this, "androidinfo");//添加js监听 这样html就能调用客户端

2.Vue 点击按钮scanclick,开启调用Android的方法showInfoFromJs()，“来自JS”是参数，str是Android返回的结果

methods:{
			scanclick(){
					var str = window.androidinfo.showInfoFromJs("来自JS");
	  				this.$toast(str);
	  			},
}

3.Android 方法得到来自JS的传参str,并返还结果s；
注意：@JavascriptInterface这个一定得加

 @JavascriptInterface
    public  String showInfoFromJs(String str){
        android.util.Log.i("tag", "来自JS的传参 :"+str); 
        String s = "返还的参数";     
        return s;
    }

二、Android 调用Vue方法
一般有两种方式webview.loadUrl() 和webview.evaluateJavascript()；
我选择使用第二种
1.Vue 在created或mounted里,声明方法名

/*将要给原生调用的方法挂载到 window 上面 不能加()*/
window.callJsFunction = this.callJsFunction;

2.Vue的执行方法callJsFunction，并返还结果

methods:{
callJsFunction(str){
	  				this.$toast(str);
	  				return "js调用成功";
	  			},
}

3.Android 实际执行方法是callwebJS()，我偷懒了，用上面vue调用原生的方法里直接调用了。'来自原生’是传的参，onReceiveValue中的str是JS返回的结果。
这里有三个坑，
第一个是要加webView.post，因为会有延迟，不加的话无法执行callwebJS且return s也不走。如果是直接按钮点击可不写post；
第二个，Vue的callJsFunction方法要写在实际请求的url里即webView.loadUrl(“http://…”)，因为我使用了iframe,开始写在里面的url，没有作用；
第三个就是注意callwebJS 要执行在onPageFinished()后面，要不返回值为null

 @JavascriptInterface
    public  String showInfoFromJs(String str){
       android.util.Log.i("tag", "来自JS的传参 :"+str); 
        String s = "返还的参数";     
        webView.post(new Runnable() {
            @Override
            public void run() {
                callwebJS();
            }
        });
        return s;
    }
    
    /**
     *  原生调用webView JS
     *  注意：需要在 onPageFinished 后调用
     */
    public void callwebJS(){
        webView.evaluateJavascript("javascript:callJsFunction('来自原生')", new ValueCallback() {
            @Override
            public void onReceiveValue(String str) {
                android.util.Log.i("tag", "js返回的结果:"+str);
            }
        });