[移动开发]H5的js调用安卓的方法

前言

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

方法1

安卓：

// 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的弹窗比安卓的弹窗简单多了，但是为了适配的问题，我还是选择用了原生了，嘤嘤嘤。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_webview"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 全屏网页的标题栏 -->
    <LinearLayout
        android:background="@color/f2f2f2"
        android:layout_width="match_parent"
        android:layout_height="25dp">
    </LinearLayout>

    <!-- 原生的标题栏 -->
    <include android:visibility="gone" layout="@layout/include_title_left_image"/>

    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:id="@+id/webview_wv"
        />

</LinearLayout>

方法2?

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

H5：

// 点击事件
<a @click="callPhone(deliverymanPO.telephone)" class="button-style">联系ta</a>

// 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 的交互方式 - 简书