HarmonyOS 鸿蒙Next web如何调通js和原生之间的传参 调用方法

发布于 1周前 作者 nodeper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next web如何调通js和原生之间的传参 调用方法

export const sendAppEvent = (enentName, params = {}) => {
// #ifdef H5
// 调用原生App事件
switch (checkPlatform()) {
case “wx-miniprogram”:
console.log("__________");
document.addEventListener(“UniAppJSBridgeReady”, function () {
uni.postMessage({
enentName,
data: params,
}); //传递的消息信息，必须写在 data 对象中。
});
case “browser”:
// 处理浏览器逻辑
// router.go(-1)
break;
case “yide-android-app”:
case “Android”:
// 处理Android逻辑
console.log(“处理Android返回逻辑”);
return (
window.android &&
window.android.postMessage &&
window.android.postMessage(
JSON.stringify({
enentName,
params,
})
)
);
case “Ios”:
case “yide-ios-app”:
// 处理IOS逻辑
console.log(“yide-ios-app”);

console.log(“处理IOS返回逻辑”);
return window.webkit?.messageHandlers.call.postMessage(
JSON.stringify({
enentName,
params,
})
);
default:
break;
}

上面是js代码  我现在怎么修改才能让这些代码能和鸿蒙web实现通信  调用 并获取到 postMessage 方法 我原生执行

Harmonyos Next教程
6 回复
可以参考下这个demo：Web场景Demo ，另外JS中需要增加判断，读取useragent增加对鸿蒙平台的处理，useragent参考 设置UserAgent

1、在JS中定义命名空间和方法

const myNamespace = {
  myMethod: function() {
    console.log('Hello from myMethod!');
  }
};

2、在JS中将命名空间和方法绑定到一个对象上，并将该对象返回给native层：

module.exports = {
  myNamespace: myNamespace
};

3、在native层获取JS对象并调用命名空间中的方法：

napi_value js;
napi_status ret = napi_get_reference_value(context.env, context.jsOb, &js);
if (ret != napi_ok) {
  OH_LOG_ERROR(LOG_APP, 'napi_get_reference_value ERROR');
  return nullptr;
}

napi_value myNamespaceObj;
ret = napi_get_named_property(context.env, js, ‘myNamespace’, &myNamespaceObj);
if (ret != napi_ok || myNamespaceObj == nullptr) {
OH_LOG_ERROR(LOG_APP, ‘napi_get_named_property ERROR’);
return nullptr;
}


napi_value myMethod;
ret = napi_get_named_property(context.env, myNamespaceObj, ‘myMethod’, &myMethod);
if (ret != napi_ok || myMethod == nullptr) {
OH_LOG_ERROR(LOG_APP, ‘napi_get_named_property ERROR’);
return nullptr;
}


napi_call_function(context.env, myNamespaceObj, myMethod, 0, nullptr, nullptr);
/******/


// 定义命名空间
namespace MyNamespace {
export function myMethod() {
console.log(‘Hello from myMethod’);
}
}
// 将命名空间绑定到全局对象上
globalThis.MyNamespace = MyNamespace;


// 获取全局对象
napi_value gloableThisl;
napi_get_global(env, &gloableThis);
// 获取命名空间对象
napi_value namespaceObj;
napi_get_named_property(env, gloableThis, “MyNamespace”, &namespaceObj);
// 获取命名空间中的方法
napi_value method;
napi_get_named_property(env, namespaceObj, “myMethod”, &method);
// 调用命名空间中的方法
napi_value result;
napi_call_function(env, global, method, 0, nullptr, &result);

相关文档

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/use-napi-process-V5

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/use-napi-object-wrap-V5

期待HarmonyOS能在未来带来更多创新的技术和理念。

可以通过C++调用JS Promise方法，得到返回值，再传给arkts web组件

有demo吗 方便给个参考吗

在HarmonyOS鸿蒙Next Web环境中，调通JavaScript与原生之间的传参和调用方法，通常涉及以下几个步骤：

  1. 配置通信接口：首先，在原生代码中定义JavaScript与原生通信的接口，这通常通过特定的API或框架提供的功能实现。确保这些接口在鸿蒙系统中被正确注册和初始化。

  2. 数据序列化：JavaScript与原生代码之间传递的数据需要进行序列化，以确保数据在不同环境间能够正确解析。常用的序列化格式包括JSON等。

  3. 调用原生方法：在JavaScript代码中，通过调用预定义的接口来触发原生方法的执行。这通常通过特定的函数调用或事件触发实现。

  4. 处理回调：原生方法执行完毕后，可以通过回调机制将结果返回给JavaScript代码。这同样需要确保数据的正确序列化和反序列化。

  5. 调试与测试：在开发过程中，使用调试工具对JavaScript与原生之间的通信进行监控和调试，确保数据传递和方法调用的正确性。

请注意，具体实现细节可能因鸿蒙系统的版本和使用的框架而异。如果上述步骤未能解决您的问题，可能是由于系统或框架的特定限制。此时，建议查阅鸿蒙系统的官方文档或联系开发者社区获取更具体的帮助。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部