Android 原生调用 JS 中的方法
Android 调用 JS 有两种方式,都是通过 WebView 的方法 (1)webview.loadUrl() (2)webview.evaluateJavascript()
二者区别: (1)loadUrl() 会刷新页面,evaluateJavascript() 则不会使页面刷新,所以 evaluateJavascript() 的效率更高 (2)loadUrl() 得不到 js 的返回值,evaluateJavascript() 可以获取返回值 (3)evaluateJavascript() 在 Android4.4 之后才可以使用
Vue 代码
mounted() {
window.callJsFunction = this.callJsFunction
},
data() {
return {
msg: "vue"
}
},
methods: {
callJsFunction(str) {
this.msg = "原生方法改变文字:" + str
return "js调用成功"
}
}
在 methods 中定义一个供 Android 调用的方法 callJsFunction(str) , 并可接收一个参数 str,然后改变页面中的文字。
如果只是在 ==methods ==中定义方法,原生调用会找不到这个方法。所以要在页面加载的时候将方法挂载在 ==window ==上,这样 WebView 就可以拿到此方法了。注意,这步很重要一定要写!
注意一个细节,==this.callJsFunction ==后面不要加括号 (),加括号相当于直接调用了。
总结起来 Vue 中要做的事情就两步: (1)在 methods 中定义方法 (2)在 mounted 中将方法挂载在 ==window ==上
Android 中代码 需要等页面加载完在 WebView 的 onPageFinished 方法中写调用逻辑,否则不会执行。
tbsWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url, headerMap);
return true;
}
@Override
public void onPageFinished(WebView webView, String s) {
super.onPageFinished(webView, s);
tbsWebView.post(new Runnable() {
@Override
public void run() {
tbsWebView.loadUrl("javascript:callJsFunction('soloname')");
}
});
}
});
}
});
@Override
public void onPageFinished(WebView webView, String s) {
super.onPageFinished(webView, s);
tbsWebView.post(new Runnable() {
@Override
public void run() {
tbsWebView.evaluateJavascript("javascript:callJsFunction('soloname')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String s) {
Logger.d("js返回的结果: " + s);
}
});
}
});
}
JS 调用 Android 原生方法
Vue 代码
methods: {
showAndroidToast() {
$App.showToast("js调用")
}
}
Android 代码
public class JsJavaBridge {
private Activity activity;
private WebView webView;
public JsJavaBridge(Activity activity, WebView webView) {
this.activity = activity;
this.webView = webView;
}
@JavascriptInterface
public void onFinishActivity() {
activity.finish();
}
@JavascriptInterface
public void showToast(String msg) {
ToastUtils.show(msg);
}
}
tbsWebView.addJavascriptInterface(new JsJavaBridge(this, tbsWebView), "$App");
|