Android与H5交互

在日常开发中我们经常会与�H5页面进行交互。例如H5页面跳转native页面。这篇文章我们主要讲解js调用native的操作。

在Android中，js调用native总共有如下3种方式。

1. JavascriptInterface注解方式

在js中我们添加一段代码：

function testJsInterface() {
    JSInterface.showHelloWorld();
}

在native端我们添加如下代码

@JavascriptInterface
    public String showHelloWorld() {
        Toast.makeText(this, "Hello,world", Toast.LENGTH_SHORT).show();
        return "test JSInterface";
}

这时候，js的代码则会调用显示出一个原生的Toast

关于@JavascriptInterface

这个注解在Android4.4之前由于存在webview被注入恶意代码的安全性问题，所以一直不推荐被使用。但是如果我们的APP最低版本大于Android4.4的话，使用这个来进行native的�调用是没有问题的。这时候需要我们Android工程师和web前端工程师协议好方法名称。

2. shouldOverrideUrlLoading方式

在webview的setWebViewClient方法中，我们可以设置webview的WebViewClient对象。在这个对象中我们可以重写shouldOverrideUrlloading方法。

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    return super.shouldOverrideUrlLoading(view, url);
}

此回调中我们可以获取一个url参数，这个参数就是h5跳转的url链接。webview通过拦截web页面的跳转链接来进行逻辑处理。

例如，某一个页面我们分别用native和h5进行了重写，我们在上个h5页面转到这个页面的时候，可以根据获取的url判断�是跳转到下一个webview的h5页面还是开启一个native页面。

此方法还有一个新版如下：

@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
    return super.shouldOverrideUrlLoading(view, request);
}

其中WebResourceRequest仍然是一个封装好的�请求url的对象

我们查看它的源码可以看出，它内置了一些常用属性的解析。

例如：通过

Uri getUrl();

获取uri,

通过

String getMethod();

获取请求方法。

具体的我们可以根据文档或者查看源码得知。

3. 通过prompt、confrim、alert方式调用Android

在WebChromeClient对象中，我们可以通过重写

@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
    return super.onJsPrompt(view, url, message, defaultValue, result);
}

@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
    return super.onJsConfirm(view, url, message, result);
}

@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    return super.onJsAlert(view, url, message, result);
}

我们示例通过alert方式调用native

在js中我们添加如下代码：

function People() {
    this.name = "shaomaicheng";
    this.company = "youzan;
}
function testAlert() {
    var people = new People();
    alert(JSON.stringify(dog));
}

在java中我们添加如下代码：

@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    Log.e("===onJsAlert message===", message);
    Toast.makeText(mContext, message, Toast.LENGTH_SHORT).show();
    result.cancel();
    return true;
}

在onJsAlert回调中我们通过message参数获收到alert的参数值，在这我们可以获取一个json字符串，我们可以解析字符串获取到对象，并根据对象的内容进行逻辑判断。比如弹出一个Toast。