HarmonyOS鸿蒙Next中怎么在H5调用原生方法并传递参数？

HarmonyOS鸿蒙Next中怎么在H5调用原生方法并传递参数？ 怎么在H5调用原生方法并传递参数？

3 回复

看下文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-in-page-app-function-invoking-V5#%E5%A4%8D%E6%9D%82%E7%B1%BB%E5%9E%8B%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95

代码差不多是这样的

1、当前传递map，转换为JSON字符串传值
2、对象直接传值
H5端代码示例
function htmlTest(param) {
    //1、处理map为JSON字符串
    /*
    let myMap = new Map();
    myMap.set('name', 'Alice');
    myMap.set('age', 25);
    myMap.set('city', 'New York');
    //调用原生注册改变亮度方法
    testObjName.test(mapToJson(myMap))
    */
    //2、传递对象
    let st = { name: "jack", age: "12" };
    testObjName.test( st )
    console.log(param);
}

function mapToJson(map) {
    const jsonObject = {};
    map.forEach((value, key) => {
    jsonObject[key] = value;
    });
    return JSON.stringify(jsonObject);
}

原生端方法调用
  test(param:ESObject) {
    //1、JSON处理
    // let a = JSON.parse(param) as Record<string,string>
    // console.error("调用方法:"+a["name"])
    //2、对象类型处理
    console.error("调用方法:"+param["name"])
  }

更多关于HarmonyOS鸿蒙Next中怎么在H5调用原生方法并传递参数？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，H5页面通过JavaScript调用原生方法并传递参数，可以使用WebView组件的JavaScriptProxy功能。具体步骤如下：

  1. 在原生代码中定义方法：在WebView的JavaScriptProxy接口中定义需要调用的原生方法。

  2. 在H5页面中调用原生方法：通过H5页面的JavaScript代码调用定义好的原生方法，并传递参数。

示例代码如下：

// 原生代码
import webview from '@ohos.web.webview';

let webView = new webview.WebView();

// 定义原生方法
webView.javaScriptProxy = {
    onMessage: function(message) {
        console.log("Received message from H5: " + message);
        // 处理接收到的参数
    }
};

// H5页面中的JavaScript代码
function callNativeMethod(message) {
    // 调用原生方法并传递参数
    window.webkit.messageHandlers.onMessage.postMessage(message);
}

// 调用示例
callNativeMethod("Hello, HarmonyOS!");

在上述代码中，onMessage是原生代码中定义的方法，H5页面通过window.webkit.messageHandlers.onMessage.postMessage调用该方法并传递参数。原生代码在接收到参数后进行处理。

在HarmonyOS鸿蒙Next中，可以通过WebView的JavaScriptProxy机制实现H5调用原生方法并传递参数。首先，在原生代码中创建一个JavaScriptProxy对象，并定义需要暴露给H5的方法。然后，在H5页面中通过window对象调用这些方法，并传递所需参数。具体步骤如下：

  1. 创建JavaScriptProxy：在原生代码中定义一个类，实现JavaScriptProxy接口，并暴露需要的方法。

  2. 注册Proxy：在WebView中注册该JavaScriptProxy对象。

  3. H5调用：在H5页面中通过window对象调用注册的方法，并传递参数。

示例：

// 原生代码
public class MyJsProxy {
    @JavaScriptInterface
    public void nativeMethod(String param) {
        // 处理参数
    }
}

webView.addJsProxy(new MyJsProxy());

// H5代码
window.nativeMethod("Hello, HarmonyOS");

通过这种方式，H5可以调用原生方法并传递参数，实现跨平台交互。

回到顶部