Android与H5(Vue)交互

本文介绍如何在Android应用中实现与H5页面的交互,包括从JS调用Android方法显示对话框,并通过点击对话框按钮调用JS方法更新H5页面内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Android与H5互调

实现效果:
JS调用Android方法实现dialog弹窗,Android点击弹窗确定/取消按钮调用JS方法,在H5界面展示传递的参数。

Vue准备:

执行 npm run serve 命令启动项目,启动成功后会在命令行看到两个地址,
在这里插入图片描述

Vue代码:

<template>
    <div>
        <section>
            <button type="button" @click="showDialog">点击调用dialog</button>
            <button type="button" @click="useCamera">点击调用相机</button>
        </section>
        <hr/>
        <p>{{msg}}</p>
    </div>

</template>

<script>
export default {
    name: "About",
    data() {
        return {
            msg: "android 返回内容"
        };
},
    mounted () {
        window.callByAndroidOneParam = this.callByAndroidOneParam
    },
    methods: {
    showDialog () {
        // window.console.log("Android");
        if (window.Android != null && typeof (window.Android) != "undefined") {
        window.Android.showDialog();
        } else {
        alert(typeof (window.android));
        }
    },
    callByAndroidOneParam(msg1) {
        alert("Js收到消息:" + msg1);
        this.msg = msg1
        return this.msg
    },
    useCamera () {
            // window.console.log("Android");
            if (window.Android != null && typeof (window.Android) != "undefined") {
            window.Android.useCamera(111);
            } else {
            alert(typeof (window.android));
            }
        },
    
},
        
}
</script>

注意:vue让app能调入js方法,需要将方法赋给window;因为vue将js进行封装操作

Android中代码:
注入到JS里的对象接口:

public class AndroidInterface {
    Context context;
    AgentWeb mAgentWeb;
    public AndroidInterface(Context context, AgentWeb mAgentWeb) {
        this.context = context;
        this.mAgentWeb = mAgentWeb;
    }
    @JavascriptInterface
    public void showDialog() {
        new MaterialDialog.Builder(context)
                .iconRes(R.drawable.icon_tip)
                .title("提示")
                .content("dialog弹窗测试!")
                .positiveText(R.string.lab_submit)
                .negativeText(R.string.lab_cancel)
                .onPositive((dialog, which) -> mAgentWeb.getJsAccessEntrace().quickCallJs("callByAndroidOneParam", s -> XToastUtils.info("JS回调内容:"+s),"dialog点击了确定"))
                .onNegative((dialog, which) -> mAgentWeb.getJsAccessEntrace().quickCallJs("callByAndroidOneParam", s -> XToastUtils.info("JS回调内容:"+s),"dialog点击了取消"))
                .show();
    }


}

最终效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值