H5的js调用安卓的方法

一个应用既有安卓端又有ios端，为了同步时间进度，打算用H5网页替代原生的方法，那么在H5中，网页的返回按钮怎么调用安卓的方法，finish掉Activity呢？

安卓：

// webview的配置
webview.getSettings().setJavascriptEnabled(true);
webview.getSettings().setDefaultTextEncodingName("UTF-8");
webview.addJavascriptInterface(new JS(), "android");// 自己指定接口对象的名字，我的叫android
webview.getSettings().setJavascriptCanOpenWindowsAutomatically(true);
webview.loadUrl(load_url);



// 内部类,对应于js中想要安卓执行什么操作，我觉得最主要的还是返回按钮的功能，关闭当前acticity
class JS {

    @JavascriptInterface
    public void  onBack(){
        finish();
    }

}

H5的js:

// js的button的点击事件调用的方法
onBack() {
    // android是我之前安卓代码里指定的名字，调用返回方法
    android.onBack()
    // window.history.back(-1);//返回上一层
},

ps: 主要用于网页全屏的情况下，但还是推荐用原生的标题栏，因为ios和安卓顶部高度都不一致，不同手机型号，刘海屏等原因也会不一致。这里不想用原生标题栏的原因就是右边有个筛选按钮，它要弄弹窗，js的弹窗比安卓的弹窗简单多了，但是为了适配的问题，我还是选择用了原生了，嘤嘤嘤。

小程序、ios、安卓都能被H5调用的写法

H5：

// 点击事件
联系ta

// deviceType是三端传给你的参数，告知你是什么端，然后调用不同的方法，对接就是他们三端的事了
callPhone(id) {
    // H5要调用三端的事：打电话
    var toAppType = 'call_telephone';
    try {
        if (this.deviceType === 'miniprogram') {
            wx.miniProgram.postMessage({ data: JSON.stringify(toAppType) });
        } else if (this.deviceType === 'ios') {
            window.webkit.messageHandlers.iOSAppModel.postMessage({ type: toAppType, code: '', id: id+"" || '' });
        } else if (this.deviceType === 'android') {
            prompt('js://' + toAppType + '?code=' + ('') + '&id=' + (id+"" || ''));
        }
    } catch (error) { 
        console.log(error); 
    }
},

 ps: 其他三端的代码我有时间了再贴上

最全面总结 Android WebView与 JS 的交互方式 - 简书