本文介绍: 前言一个应用既有安卓端又有ios端,为了同步时间进度,打算用H5网页替代原生方法,那么在H5中,网页返回按钮怎么调用安卓方法finish掉Activity呢?方法1安卓:// webview配置webview.getSettings().setJavaScriptEnabled(true);webview.getSettings().setDefaultTextEncodingName(“UTF-8”);webview.addJavascriptInterface(new

前言

一个应用既有安卓端又有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:

// jsbutton点击事件调用的方法
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=' + ('') + '&amp;id=' + (id+"" || ''));
        }
    } catch (error) { 
        console.log(error); 
    }
},

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

参考资料

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

原文地址:https://blog.csdn.net/weixin_43991241/article/details/121769493

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_8497.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注