android与普通js交互和android和vue打包的交互

一、安卓与常规js交互

android调用js方法
webView.loadUrl ( “javascript:callJS()” );这是android很早以前就有的一种调用js的方法，调用简单，但是缺点就是没有返回值，所以在4.4版本以后，又有了一个新的方法

webView.evaluateJavascript ( “javascript:callJsByEvaluateJavascript()” , new ValueCallback < String > ( ) {
@Override
public void onReceiveValue ( String value ) {
Toast.makeText ( getApplicationContext ( ) , value , Toast.LENGTH_LONG ).show ( );
}
} );

这个方法最主要的作用就是能够同时获取js的返回值，

js调用安卓方法
1、 通过 WebView 的 addJavascriptInterface() 进行对象映射
2、通过 WebViewClient 的 shouldOverrideUrlLoading()方法回调拦截 url
3、通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt() 消息
对比： 第一种最简洁，但在 Android 4. 2 以下存在漏洞；第二种和第三种使用复杂，但不存在漏洞问题。

1、 // 启用javascript
mWebView.getSettings().setJavaScriptEnabled(true);
//AndroidtoJS类对象映射到js的test对象
mWebView.addJavascriptInterface(this, “test”);

默认情况下webview中js是不能调用android中的代码的，我们需要手动的设置javascritpenable=true，同时把android中的AndroidJs对象以test的名字映射到webview中，通过上面的2行代码，就能够在h5页面通过test名字调用AndroidJs中的方法，但是因为java中存在反射，我们可以获取android的对象反射出所有的方法，所以在老版本中会存在漏洞。

在android4.2版本以上，google修复这个bug，也就是js只能调用有注解@JavascriptInterface注解的方法，这样一来，即使java中有反射，都不能反射调用android中没有@JavascriptInterface的方法了，修复了老版本中的漏洞。

@JavascriptInterface注解的方法是google官方推荐的方法，但是为了兼容老版本，同时防止有漏洞的情况，很多人都想到了其他的js调用android的方法，比如shouldOverrideUrlLoading当设置了

WebViewClient的时候，点击了h5页面上的某个链接的时候，webview的shouldOverrideUrlLoading就会被调用，凭着这个思路，android又产生了一个新的js点用android的方法，只需要在js调用android的时候，约定url链接，比如bridge：//fareware/driver，这样一来，android只要解析这个url，就能获取到js传给android的参数，执行相应的动作。

二、安卓与vue打包的h5交互

mounted() {
          //初始化执行代码
          window.vue=this;
          //将要给原生调用的方法挂载到 window 上面
  		  window.toAndroidCallWithParam=toAndroidCallWithParam
      },
      methods: {
          cheng(){
              window.test.actionFromJs(  )
          },
          dayin(){
              console.log(this.printData)
          },
          toAndroidCallWithParam(str){

              window.vue.reading=str;
          }

      }

在 methods 中定义一个供 Android 调用的方法 callJsFunction(str) , 并可接收一个参数 str，然后改变页面中的文字。

如果只是在 methods 中定义方法，原生调用会找不到这个方法。所以要在页面加载的时候将方法挂载在 window 上，这样 WebView 就可以拿到此方法了。注意，这步很重要一定要写！

注意一个细节，this.callJsFunction 后面不要加括号 ()，加括号相当于直接调用了。

总结起来 Vue 中要做的事情就两步：

在 methods 中定义方法

在 mounted 中将方法挂载在 window 上