Android 与JS互调(Vue项目，X5WebView)

Android与JS 互调几种方式：

一. JS 调用Android

1. 方法1
webview.setWebViewClient(new X5WebViewClient()) 自定义WebViewClient，重写shouldOverrideUrlLoading方法，判断Url实现

• 关键代码

    Android注册:
          public class X5WebViewClient extends WebViewClient {
             @Override
             public boolean shouldOverrideUrlLoading(WebView webView, String url) {
                   if (url.contains("js-call:")) {
                           if (url.contains("playLogd")) {
                                  Log.d("X5WebViewMyself", "Js调用android方法shouldOverrideUrlLoading");
                            }
                       return true;
                    }
                   webView.loadUrl(url); // 不加载自带浏览器
                   return true;
              }
           }
    JS调用: 
          function JSCallAndroid1(param){ //写一个方法
            var url="js-call://"+param;
            document.location = url;
           }
  

1. 方法2
webview.addJavascriptInterface(new JavaFuckJSInterface(this),"APP") 自定义JavaFuckJSInterface类， 通过@JavascriptInterface注解实现

• 关键代码

    Android注册: 
           public class JavaFuckJSInterface{
                 private WeakReference<X5WebActivity> x5WebViewActivity;
                public JavaFuckJSInterface(X5WebActivity context) {
                      x5WebViewActivity = new WeakReference<>(context);
                }
             //通过这个@JavascriptInterface转化成绑定的“App”对象下的同名函数，js代码可以直接调用
             @JavascriptInterface// JS 让 Java 吐司
             public void jsCallAndroidFun(String data) {
                   x5WebViewActivity.get().toastShow(data);
              }
           }
    JS调用: 
          function JSCallAndroid2(param){ //写一个方法
            window.APP.jsCallAndroidFun('JS调用Android方法2-成功了！！')
           }
  

3. 分析哪个方法比较好

第二种方法比较好

JS调用Android优缺点.png

二. Android 调用 JS

注意:Android调用Vue中方法，使其弹框alert，需要关键代码：

webview.setWebChromeClient(new WebChromeClient());
webview.getSettings().setJavaScriptEnabled(true);

1. 方法1
webView.loadUrl();同步方法，没有返回参数。
定义字符串实现 String methondStr = "javascript:showJavaCallJsToast()";//不传参

• 关键代码

    Android调用:
             String methondStr = "javascript:showJavaCallJsToast()";//不传参
           //    String methondStr = "javascript:showJavaCallJsToast('"+ msg+"')";//传参
              webView.loadUrl(methondStr);
    JS注册: 
          function showJavaCallJsToast(msg){ //写一个方法
            alert(msg)
           }
  

1. 方法2
webView.evaluateJavascript，异步方法，有返回参数
注意:Android调用Vue中方法，总是失败，是因为该方法没有注册到window上，加上下面代码

mounted () {
 window.showJavaCallJsToastAsync = this.showJavaCallJsToastAsync
 window.showJavaCallJsToast = this.showJavaCallJsToast
},

• 关键代码

    Android调用:  
       //    String methondStr = "javascript:showJavaCallJsToastAsync()";//不传参
             String methondStr = "javascript:showJavaCallJsToastAsync('"+ msg+"')";
             webView.evaluateJavascript(methondStr, new ValueCallback<String>() {      // 方式二
                       @Override
                       public void onReceiveValue(String result) {
                                  Log.d("X5WebViewMyself","-----------------JavaCallJsToastAsync---------"+result);
                        }
              });
  
    JS注册: 
          function showJavaCallJsToastAsync(msg){ //写一个方法
            alert(msg)
            return msg
           }
  

3. 分析哪个方法比较好

第二种方法比较好

Android调用JS优缺点.png

三. Android 和 JS项目demo代码

关键信息

• api 'com.yanzhenjie:permission:2.0.3' 权限管理
• api 'com.tencent.tbs:tbssdk:44181' 腾讯X5WebView
• BaseApplication 类配置腾讯x5内核自动下载
• 移动端腾讯X5内核手动下载
  x5Webview.loadUrl("http://debugtbs.qq.com")
• 移动端腾讯X5内核版本检查x5Webview.loadUrl("http://soft.imtt.qq.com/browser/tes/feedback.html")
• android内调用本地assets中index.html
  x5Webview..loadUrl("file:///android_asset/index.html");

Demo下载

Android和JS项目Demo下载