之前发表过一篇关于JS与原生交互的文章,但是采用的是jsbridge来实现的,有兴趣的可以去看看,链接放在下面:
https://developer.aliyun.com/article/976311?spm=a2c6h.13148508.setting.29.ee134f0eB2lAEX
既然是交互,那就是双向的,分为原生调用JS方法,跟JS调用原生方法。
JS调用原生
有两种方法,我们知道,Android使用WebView加载页面是可以拦截到页面的url的,既然可以拦截到url,那就可以对url进行解析处理,判断后走不同的业务逻辑,比如判断url是否是一个pdf页面,如果是,就跳转页面去加载pdf等。
通过webView.setWebViewClient(),在回调方法shouldOverrideUrlLoading中去拦截,下面是代码片段:
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.startsWith("tel:")) {
} else if (url.endsWith(".pdf") || url.contains("downloadPdf") || url.contains("FileServer/download")) {
} else if (url.startsWith("intent:")) {
} else if (url.endsWith(".apk")) {
} else if (url.startsWith("mailto:")) {
}
return true;
}
});
另外一种是原生通过向JS注入方法的形式来实现交互。
第一步,webView添加JS接口,第一个参数是JS接口,JS call 原生将会回调到这个接口里面的方法,第二个参数是需要跟JS统一好的,两边要一致。
webView.addJavascriptInterface(JsInterface(this),“callApp”)
第二步:创建JS接口,此接口里面的方法需要加上注解@JavascriptInterface,方法名字也需要跟JS两断保持一致。
class JsInterface(context: Activity) {
@JavascriptInterface
fun jsCallNativeCloseAccountEvent() {
//本方法要跟JS方法一致,当JS出发web页面中的jsCallNativeCloseAccountEvent方法时,会回调到本方法,然后就可以做原生操作。
}
}
以上需要注意的两点是,接口中的方法要跟JS一致,还有就是addJavascriptInterface方法的第二个参数需要跟JS的配置一致,这是两个重点。
原生调用JS
同样也有两种方法,分别是
//第一种方法
webView.loadUrl("javascript:test()") //不带参
webView.loadUrl("javascript:test(" + "'这里填参数'" + ")") //带参
//第二种方法
webView.evaluateJavascript("javascript:test(), new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
Toast.makeText(MainActivity.this, "js返回值:"+value, Toast.LENGTH_SHORT).show();
}
}); //不带参
webView.evaluateJavascript("javascript:test(" + "'这里填参数'" + "), new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果
Toast.makeText(MainActivity.this, "js返回值:"+value, Toast.LENGTH_SHORT).show();
}
}); //带参
这两种方法的区别如下:
方法 | 易用性 | 局限性 | 线程 |
---|---|---|---|
loadUrl() | 使用相对简单 | 返回值获取困难,效率低 | 刷新WebView,需在UI线程里进行 |
evaluateJavascript() | 使用相对复杂,效率高,返回值获取容易 | Android4.4以上使用 | 不刷新WebView,主线程中进行 |
两种方法各有优缺点,我们可以采用两种方式结合:当android版本低于4.4,采用loadUrl(),否则采用evaluateJavascript()。
以上就是本篇的内容,比较基础简单。