Android与H5（Vue）交互

最新推荐文章于 2025-06-04 16:44:57 发布

木派

最新推荐文章于 2025-06-04 16:44:57 发布

阅读量875

点赞数

CC 4.0 BY-SA版权

文章标签： android vue.js 交互

本文链接：https://blog.youkuaiyun.com/gdvfs12/article/details/128238466

本文介绍如何在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();
    }


}

最终效果

在这里插入图片描述