更新升级 专属应用 系统故障 硬件故障 电脑汽车 鸿蒙刷机 鸿蒙开发Linux教程 鸿蒙开发Linux命令
当前位置:HMXT之家 > 应用开发 > HarmonyOS鸿蒙webView和h5交互:移动端和前端的方法

HarmonyOS鸿蒙webView和h5交互:移动端和前端的方法

更新时间:2022-06-25 16:02:11浏览次数:74+次

本文介绍HarmonyOS鸿蒙webView和h5交互的两种方法,有移动端和前端,将附上代码。

\

一、移动端

1、注入回调方法

        webView.addJsCallback("jsCallJava", new JsCallback() {

            @Override

            public String onCallback(String webData) {

                //解析js传来的数据

                String returnData = "null";

                ZSONObject webZson = ZSONObject.stringToZSON(webData);

                String action = webZson.getString("action");

                String data = webZson.getString("data");

                switch (action) {

                    case "login":

                        returnData = "想要返回给js的数据"

                        break;

                        }

                    //此处可以同步返回数据

                    return returnData;

                }

        });

2、在应用内调用页面内的JavaScript方法

String javascript = "javascript:javaCallJs('" + 想要传输的数据 + "')";

        webView.executeJs(javascript, new AsyncCallback<String>() {

            @Override

            public void onReceive(String s) {

            }

        });

二、前端

1、调用移动端方法

//jsCallJava为移动端注入的方法

if (window.jsCallJava && window.jsCallJava.call) {

    const result = huaweiLogin.call(

        '{

            action:'login',

            data:'参数'

            }');

    //result 为同步接收移动端回传的参数

}

2、将要给移动端调用的方法挂载到 window

mounted() {

    //将要给原生调用的方法挂载到 window 上面

    window.javaCallJs = this.javaCallJs

},

data() {

    return {

        params: "-"

    }

},

methods: {

    javaCallJs(params) {

    //params为移动端传入的参数,可以是json字符串

        this.params = params;

        return "js调用成功"

    }

}

注:前端写法有很多种,这里只是写个示例,其他的可以自由发挥。

相关参考:关于鸿蒙webview与js交互问题,附代码