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下载
