鸿蒙NEXT版实战开发：建立应用侧与前端页面数据通道(C/C++)（前端页面JavaScript）

于 2024-10-09 15:29:44 发布
阅读量868 收藏 8
点赞数 13
分类专栏： OpenHarmony 鸿蒙5.0 前端页面JavaScript） 文章标签： harmonyos 前端 华为 华为od android javascript c++
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39652397/article/details/142787878
版权

往期鸿蒙全套实战精彩文章必看内容：

建立应用侧与前端页面数据通道(C/C++)

前端页面和应用侧之间可以使用本文Native方法实现两端通信，可解决ArkTS环境的冗余切换，同时允许发送消息、回调在非UI线程上报，避免造成UI阻塞。当前只支持string和buffer数据类型。

Native侧ArkWeb绑定

  • ArkWeb组件声明在ArkTS侧，需要用户自定义一个标识webTag，并将webTag通过Node-API传至应用C++侧。后续ArkWeb Native接口使用时，均需webTag作为对应组件的唯一标识。

  • ArkTS侧

    import { webview } from '@kit.ArkWeb';
// 自定义webTag，在WebviewController创建时作为入参传入，建立controller与webTag的映射关系
webTag: string = 'ArkWeb1';
controller: webview.WebviewController = new webview.WebviewController();
...
// aboutToAppear中将webTag通过NAPI接口传入C++侧，作为C++侧ArkWeb组件的唯一标识
aboutToAppear() {
  console.info("aboutToAppear")
  //初始化web ndk
  testNapi.nativeWebInit(this.webTag);
}
...

Native侧API结构体获取

ArkWeb native侧API通过函数OH_ArkWeb_GetNativeAPI获取，根据入参type不同，可获取对应的函数指针结构体。其中本指导涉及ArkWeb_ControllerAPI、ArkWeb_WebMessageAPI、ArkWeb_WebMessagePortAPI。

static ArkWeb_ControllerAPI *controller = nullptr;
static ArkWeb_WebMessagePortAPI *webMessagePort = nullptr;
static ArkWeb_WebMessageAPI *webMessage = nullptr;
...
controller = reinterpret_cast<ArkWeb_ControllerAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_CONTROLLER));
webMessagePort =
    reinterpret_cast<ArkWeb_WebMessagePortAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_WEB_MESSAGE_PORT));
webMessage = reinterpret_cast<ArkWeb_WebMessageAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_WEB_MESSAGE));

完整示例

在调用API前建议通过ARKWEB_MEMBER_MISSING校验该函数结构体是否有对应函数指针，避免SDK与设备ROM不匹配导致crash问题。createWebMessagePorts、postWebMessage、close需运行在UI线程。

  • 前端页面代码

    <!-- entry/src/main/resources/rawfile/index.html -->
<!-- index.html -->
<!DOCTYPE html>
<html lang="en-gb">
<body>
<h1>etsRunJavaScriptExt测试demo</h1>
<h1 id="h1"></h1>
<h3 id="msg">Receive string:</h3>
<h3 id="msg2">Receive arraybuffer:</h3>

</body>
<script type="text/javascript">
var h5Port;
window.addEventListener('message', function (event) {
    if (event.data == 'init_web_messageport') {
        const port = event.ports.at(0); // 1. 保存从应用侧发送过来的端口。
        if (port) {
            console.log("hwd In html got message");
            h5Port = port;
            port.onmessage = function (event) {
                console.log("hwd In html got message");
                // 2. 接收应用侧发送过来的消息.
                var result = event.data;
                var type_s = typeof (result)
                switch (type_s) {
                    case "object":
                        if (result instanceof ArrayBuffer) {
                            type_s = "ArrayBuffer";
                            var view = new Uint8Array(result);
                            const decoder = new TextDecoder('utf-8');
                            result = decoder.decode(result);
                        } else if (result instanceof Error) {
                            type_s = "Error";
                        } else if (result instanceof Array) {
                            type_s = "Array";
                        }
                        break;
                    default:
                        break;
                }
                console.log("H5 recv type: " + type_s + "\nH5 recv result: " + result)
                document.getElementById("msg").innerHTML = "recv type: " + type_s;
                document.getElementById("msg2").innerHTML = "recv value: " + result;
            }
            h5Port.onmessageerror = (event) => {
                console.error(`hwd In html Error receiving message: ${event}`);
            };
        }
    }
})
window.onerror = function(message, url, line, column, error) {
  console.log("JavaScript Error: " + message + " on line " + line + " in " + url);
  document.getElementById("h1").innerHTML = "执行函数失败"
};
// 3. 使用h5Port向应用侧发送消息。
function postStringToApp() {
    if (h5Port) {
        h5Port.postMessage("send string from H5");
    } else {
        console.error("In html h5port is null, please init first");
    }
}
function postBufferToApp() {
    if (h5Port) {
        const str = "Hello, World!";
        const encoder = new TextEncoder();
        const uint8Array = encoder.encode(str);
        h5Port.postMessage(uint8Array.buffer);
    } else {
        console.error("In html h5port is null, please init first");
    }
}
function postJsonToApp() {
    if (h5Port) {
        var e = {"json": "json"};
        h5Port.postMessage(e);
    } else {
        console.error("In html h5port is null, please init first");
    }
}
function postArrayStringToApp() {
    if (h5Port) {
        h5Port.postMessage(["1", "2", "3"]);
    } else {
        console.error("In html h5port is null, please init first");
    }
}
function postNumberToApp() {
    if (h5Port) {
        h5Port.postMessage(123);
    } else {
        console.error("In html h5port is null, please init first");
    }
}
class MyClass {
  constructor() {
    // 构造器
    this.myProperty = 'Hello, World!';
  }
  myMethod() {
    // 实例方法
    console.log(this.myProperty);
  }
  static myStaticMethod() {
    // 静态方法
    console.log('This is a static method.');
  }
}
function postObjectToApp() {
    if (h5Port) {
        h5Port.postMessage(new MyClass());
    } else {
        console.error("In html h5port is null, please init first");
    }
}
</script>
</html>

  • ArkTS侧代码

    // entry/src/main/ets/pages/Index.ets
import testNapi from 'libentry.so'
import web_webview from '@ohos.web.webview';
import { BusinessError } from '@ohos.base';

@Entry
@Component
struct Index {
@State webTag: string = 'postMessage';
controller: web_webview.WebviewController = new web_webview.WebviewController(this.webTag);
@State h5Log: string = 'Display received message send from HTML';

aboutToAppear() {
web_webview.WebviewController.setWebDebuggingAccess(true);
//初始化web ndk
testNapi.nativeWebInit(this.webTag);
}

aboutToDisAppear() {
console.error("aboutToDisAppear")
}

build() {
Scroll() {
Column({ space: 10 }) {
// 展示H5接收到的内容
Text("H5侧接收到应用侧发送消息展示")
TextArea({text: this.h5Log})
.id("log_area")
.width("100%")
.height(100)
.border({ width: 1 })
Text("应用侧按钮")
Row() {
Button('createNoControllerTagPort')
.id("create_no_tag_btn")
.onClick(() => {
try {
testNapi.createWebMessagePorts("noTag");
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Button('createPort')
.id("create_port_btn")
.onClick(() => {
try {
testNapi.createWebMessagePorts(this.webTag);
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
}

Row({ space: 10 }) {

Button('setHandler')
.id("set_handler_btn")
.onClick(() => {
try {
testNapi.setMessageEventHandler(this.webTag);
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})

Button('setHandlerThread')
.id("set_handler_thread_btn")
.onClick(() => {
try {
testNapi.setMessageEventHandlerThread(this.webTag);
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
}

Row({ space: 10 }) {
Button('SendString')
.id("send_string_btn")
.onClick(() => {
try {
this.h5Log = ""
testNapi.postMessage(this.webTag);
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Button('SendStringThread')
.id("send_string_thread_btn")
.onClick(() => {
try {
this.h5Log = ""
testNapi.postMessageThread(this.webTag);
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
}

Row({ space: 10 }) {
Button('SendBuffer')
.id("send_buffer_btn")
.onClick(() => {
try {
this.h5Log = ""
testNapi.postBufferMessage(this.webTag);
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Button('SendNone')
.id("send_none_btn")
.onClick(() => {
try {
this.h5Log = ""
testNapi.postNoneMessage(this.webTag);
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
}

Row({ space: 10 }) {

Button('closePort')
.id("close_port_btn")
.onClick(() => {
try {
testNapi.closeMessagePort(this.webTag);
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Button('destroyNullPort')
.id("destroy_null_btn")
.onClick(() => {
try {
testNapi.destroyNullMessagePort(this.webTag);
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Button('destroyPort')
.id("destroy_port_btn")
.onClick(() => {
try {
testNapi.destroyMessagePort(this.webTag);
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
}
.width("100%")
.padding(10)
.border({ width: 1 })

Column({ space: 10 }) {
Text("H5侧发送按钮")
Row({ space: 10 }) {
Button('H5String')
.id("h5_send_string_btn")
.onClick(() => {
try {
this.controller.runJavaScript("for(var i = 0; i < 2000; i++) postStringToApp()")
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Button('H5Buffer')
.id("h5_send_buffer_btn")
.onClick(() => {
try {
this.controller.runJavaScript("postBufferToApp()")
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Button('H5Number')
.id("h5_send_number_btn")
.onClick(() => {
try {
this.controller.runJavaScript("postNumberToApp()")
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
}

Row({ space: 10 }) {
Button('H5Json')
.id("h5_send_json_btn")
.onClick(() => {
try {
this.controller.runJavaScript("postJsonToApp()")
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Button('H5Array')
.id("h5_send_array_btn")
.onClick(() => {
try {
this.controller.runJavaScript("postArrayStringToApp()")
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
Button('H5Object')
.id("h5_send_object_btn")
.onClick(() => {
try {
this.controller.runJavaScript("postObjectToApp()")
} catch (error) {
console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
}
})
}
}
.width("100%")
.margin(10)
.padding(10)
.border({ width: 1 })

Web({ src: $rawfile('index.html'), controller: this.controller })
.onConsole((event) => {
if (event) {
let msg = event.message.getMessage()
if (msg.startsWith("H5")) {
this.h5Log = event.message.getMessage() + "\n" + this.h5Log
}
}
return false;
})
}
}.height('100%')
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.Spring)
}
}

  • NAPI侧暴露ArkTS接口

    // entry/src/main/cpp/types/libentry/index.d.ts
export const nativeWebInit: (webName: string) => void;
export const createWebMessagePorts: (webName: string) => void;
export const postMessage: (webName: string) => void;
export const postNoneMessage: (webName: string) => void;
export const setMessageEventHandler: (webName: string) => void;
export const closeMessagePort: (webName: string) => void;
export const destroyMessagePort: (webName: string) => void;
export const postBufferMessage: (webName: string) => void;
export const destroyNullMessagePort: (webName: string) => void;
export const setMessageEventHandlerThread: (webName: string) => void;
export const postMessageThread: (webName: string) => void;

  • NAPI侧编译配置

    # entry/src/main/cpp/CMakeLists.txt
# the minimum version of CMake.
cmake_minimum_required(VERSION 3.4.1)
project(NDKPostMessage)

set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})

if(DEFINED PACKAGE_FIND_FILE)
    include(${PACKAGE_FIND_FILE})
endif()

include_directories(${NATIVERENDER_ROOT_PATH}
                    ${NATIVERENDER_ROOT_PATH}/include)

add_library(entry SHARED hello.cpp)

find_library(
    # Sets the name of the path variable.
    hilog-lib
    # Specifies the name of the NDK library that
    # you want CMake to locate.
    hilog_ndk.z
)

target_link_libraries(entry PUBLIC libace_napi.z.so ${hilog-lib} libohweb.so)

  • NAPI层代码

    // entry/src/main/cpp/hello.cpp
#include "napi/native_api.h"
#include <bits/alltypes.h>
#include <memory>
#include <string>
#include <sys/types.h>
#include <iostream>
#include <map>
#include "hilog/log.h"
#include "web/arkweb_interface.h"
#include <thread>

constexpr unsigned int LOG_PRINT_DOMAIN = 0xFF00;
ArkWeb_ControllerAPI *controller = nullptr;

ArkWeb_WebMessagePortAPI *webMessagePort = nullptr;
ArkWeb_WebMessageAPI *webMessage = nullptr;
size_t web_message_port_size = 0;
ArkWeb_WebMessagePortPtr *g_web_message_port_arr = nullptr;

static void WebMessagePortCallback(const char *webTag, const ArkWeb_WebMessagePortPtr port,
const ArkWeb_WebMessagePtr message, void *userData) {
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb",
"ndk WebMesagePortCallback webTag:%{public}s,messageType:%{public}d", webTag,
webMessage->getType(message));
size_t len = 0;
void *back = webMessage->getData(message, &len);
if (webMessage->getType(message) == ArkWeb_WebMessageType::ARKWEB_STRING) {
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb",
"ndk WebMesagePortCallback message:%{public}s,messageSize:%{public}d", back, len);
} else if (webMessage->getType(message) == ArkWeb_WebMessageType::ARKWEB_BUFFER) {
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb",
"ndk WebMesagePortCallback messageSize:%{public}d", len);
}
}

static napi_value NativeWebInit(napi_env env, napi_callback_info info) {
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk NativeWebInit start");
size_t argc = 1;
napi_value args[1] = {nullptr};
napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);
// 获取第一个参数 webTag
size_t webTagSize = 0;
napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize);
char *webTagValue = new (std::nothrow) char[webTagSize + 1];
size_t webTagLength = 0;
napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength);
OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "ndk NativeWebInit webTag:%{public}s", webTagValue);

controller = reinterpret_cast<ArkWeb_ControllerAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_CONTROLLER));
if (controller)
OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "get ArkWeb_ControllerAPI success");

webMessagePort =
reinterpret_cast<ArkWeb_WebMessagePortAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_WEB_MESSAGE_PORT));
if (webMessagePort)
OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "get ArkWeb_WebMessagePortAPI success");

webMessage = reinterpret_cast<ArkWeb_WebMessageAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_WEB_MESSAGE));
if (webMessage)
OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "get ArkWeb_WebMessageAPI success");

OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk NativeWebInit end");

return nullptr;
}

static napi_value createWebMessagePorts(napi_env env, napi_callback_info info) {
size_t argc = 2;
napi_value args[2] = {nullptr};
napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

// 获取第一个参数 webTag
size_t webTagSize = 0;
napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize);
char *webTagValue = new (std::nothrow) char[webTagSize + 1];
size_t webTagLength = 0;
napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue);

// 初始化端口
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk createWebMessagePorts begin");
g_web_message_port_arr = controller->createWebMessagePorts(webTagValue, &web_message_port_size);
// 把其中一个端口发送给HTML
ArkWeb_ErrorCode code =
controller->postWebMessage(webTagValue, "init_web_messageport", g_web_message_port_arr, 1, "*");
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postWebMessage ArkWeb_ErrorCode:%{public}d", code);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb",
"ndk createWebMessagePorts end, web message port size:%{public}d", web_message_port_size);
return nullptr;
}

static napi_value postMessage(napi_env env, napi_callback_info info) {
size_t argc = 2;
napi_value args[2] = {nullptr};
napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

// 获取第一个参数 webTag
size_t webTagSize = 0;
napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize);
char *webTagValue = new (std::nothrow) char[webTagSize + 1];
size_t webTagLength = 0;
napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue);

// 发送消息
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage begin");

if (g_web_message_port_arr == nullptr) {
OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr");
return nullptr;
}
ArkWeb_WebMessagePtr message = webMessage->createWebMessage();
webMessage->setType(message, ArkWeb_WebMessageType::ARKWEB_STRING);
std::string str = "send string from native";
webMessage->setData(message, (void *)str.c_str(), str.length() + 1);
ArkWeb_ErrorCode code = webMessagePort->postMessage(g_web_message_port_arr[1], webTagValue, message);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage ArkWeb_ErrorCode:%{public}d", code);
webMessage->destroyWebMessage(&message);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage end, web message port size:%{public}d",
web_message_port_size);
return nullptr;
}


// 在线程中发消息
void sendMessage(const char *webTag, const ArkWeb_WebMessagePtr message) {
// 发送1000次
for (int i = 0; i < 1000; i++) {
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "sendMessage in thread %{public}d", i);
if (g_web_message_port_arr && webTag && message) {
webMessagePort->postMessage(g_web_message_port_arr[1], webTag, message);
}
}
}
static napi_value postMessageThread(napi_env env, napi_callback_info info) {
size_t argc = 2;
napi_value args[2] = {nullptr};
napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

// 获取第一个参数 webTag
size_t webTagSize = 0;
napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize);
char *webTagValue = new (std::nothrow) char[webTagSize + 1];
size_t webTagLength = 0;
napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue);

// 构造消息
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage begin");

if (g_web_message_port_arr == nullptr) {
OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr");
return nullptr;
}
ArkWeb_WebMessagePtr message = webMessage->createWebMessage();
webMessage->setType(message, ArkWeb_WebMessageType::ARKWEB_STRING);
std::string str = "thread message";
webMessage->setData(message, (void *)str.c_str(), str.length() + 1);
const int numThreads = 5;
std::thread threads[numThreads];

// 创建线程
for (int i = 0; i < numThreads; ++i) {
threads[i] = std::thread(sendMessage, webTagValue, message);
}

// 等待所有线程完成
for (int i = 0; i < numThreads; ++i) {
threads[i].detach();
}
return nullptr;
}

// 在线程中注册回调
void setHandler(const char *webTag) {
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "setMessageEventHandler in thread");
webMessagePort->setMessageEventHandler(g_web_message_port_arr[1], webTag, WebMessagePortCallback, NULL);
}

static napi_value setMessageEventHandlerThread(napi_env env, napi_callback_info info) {
size_t argc = 2;
napi_value args[2] = {nullptr};
napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

// 获取第一个参数 webTag
size_t webTagSize = 0;
napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize);
char *webTagValue = new (std::nothrow) char[webTagSize + 1];
size_t webTagLength = 0;
napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue);

// 注册回调
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk SetMessageEventHandler begin");
if (g_web_message_port_arr == nullptr) {
OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr");
return nullptr;
}
std::thread thread(setHandler, webTagValue);
thread.detach();
webMessagePort->setMessageEventHandler(g_web_message_port_arr[1], webTagValue, WebMessagePortCallback, NULL);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb",
"ndk SetMessageEventHandler end, web message port size:%{public}d", web_message_port_size);
return nullptr;
}
static napi_value postNoneMessage(napi_env env, napi_callback_info info) {
size_t argc = 2;
napi_value args[2] = {nullptr};
napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

// 获取第一个参数 webTag
size_t webTagSize = 0;
napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize);
char *webTagValue = new (std::nothrow) char[webTagSize + 1];
size_t webTagLength = 0;
napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue);

// 发送消息
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage begin");

if (g_web_message_port_arr == nullptr) {
OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr");
return nullptr;
}
ArkWeb_WebMessagePtr message = webMessage->createWebMessage();
webMessage->setType(message, ArkWeb_WebMessageType::ARKWEB_NONE);
std::string str = "send string from native";
webMessage->setData(message, (void *)str.c_str(), str.length() + 1);
webMessagePort->postMessage(g_web_message_port_arr[1], webTagValue, message);
webMessage->destroyWebMessage(&message);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage end, web message port size:%{public}d",
web_message_port_size);
return nullptr;
}

static napi_value postBufferMessage(napi_env env, napi_callback_info info) {
size_t argc = 2;
napi_value args[2] = {nullptr};
napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

// 获取第一个参数 webTag
size_t webTagSize = 0;
napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize);
char *webTagValue = new (std::nothrow) char[webTagSize + 1];
size_t webTagLength = 0;
napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue);

// 发送消息
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage begin");

if (g_web_message_port_arr == nullptr) {
OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr");
return nullptr;
}
ArkWeb_WebMessagePtr message1 = webMessage->createWebMessage();
webMessage->setType(message1, ArkWeb_WebMessageType::ARKWEB_BUFFER);
std::string str1 = "send buffer from native";
webMessage->setData(message1, (void *)str1.c_str(), str1.length());
webMessagePort->postMessage(g_web_message_port_arr[1], webTagValue, message1);
webMessage->destroyWebMessage(&message1);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk postMessage end, web message port size:%{public}d",
web_message_port_size);
return nullptr;
}

static napi_value setMessageEventHandler(napi_env env, napi_callback_info info) {
size_t argc = 2;
napi_value args[2] = {nullptr};
napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

// 获取第一个参数 webTag
size_t webTagSize = 0;
napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize);
char *webTagValue = new (std::nothrow) char[webTagSize + 1];
size_t webTagLength = 0;
napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue);

// 注册回调
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk SetMessageEventHandler begin");
if (g_web_message_port_arr == nullptr) {
OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr");
return nullptr;
}
webMessagePort->setMessageEventHandler(g_web_message_port_arr[1], webTagValue, WebMessagePortCallback, NULL);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb",
"ndk SetMessageEventHandler end, web message port size:%{public}d", web_message_port_size);
return nullptr;
}

static napi_value closeMessagePort(napi_env env, napi_callback_info info) {
size_t argc = 2;
napi_value args[2] = {nullptr};
napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

// 获取第一个参数 webTag
size_t webTagSize = 0;
napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize);
char *webTagValue = new (std::nothrow) char[webTagSize + 1];
size_t webTagLength = 0;
napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue);

// 关闭端口，先调用close，再调用destroyWebMessagePorts
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk SetMessageEventHandler begin");
if (g_web_message_port_arr == nullptr) {
OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr");
return nullptr;
}
webMessagePort->close(g_web_message_port_arr[0], webTagValue);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb",
"ndk SetMessageEventHandler end, web message port size:%{public}d", web_message_port_size);
controller->refresh(webTagValue);
return nullptr;
}

static napi_value destroyMessagePort(napi_env env, napi_callback_info info) {
size_t argc = 2;
napi_value args[2] = {nullptr};
napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

// 获取第一个参数 webTag
size_t webTagSize = 0;
napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize);
char *webTagValue = new (std::nothrow) char[webTagSize + 1];
size_t webTagLength = 0;
napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue);

// 释放内存，先调用close，再调用destroyWebMessagePorts
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk SetMessageEventHandler begin");
if (g_web_message_port_arr == nullptr) {
OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "ArkWeb", "webMessagePort is nullptr");
return nullptr;
}
controller->destroyWebMessagePorts(&g_web_message_port_arr, web_message_port_size);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb",
"ndk SetMessageEventHandler end, web message port size:%{public}d", web_message_port_size);
return nullptr;
}

static napi_value destroyNullMessagePort(napi_env env, napi_callback_info info) {
size_t argc = 2;
napi_value args[2] = {nullptr};
napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

// 获取第一个参数 webTag
size_t webTagSize = 0;
napi_get_value_string_utf8(env, args[0], nullptr, 0, &webTagSize);
char *webTagValue = new (std::nothrow) char[webTagSize + 1];
size_t webTagLength = 0;
napi_get_value_string_utf8(env, args[0], webTagValue, webTagSize + 1, &webTagLength);
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk Refresh webTag:%{public}s", webTagValue);

// 释放内存，先调用close，再调用destroyWebMessagePorts
OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb", "ndk SetMessageEventHandler begin");

controller->destroyWebMessagePorts(&g_web_message_port_arr, web_message_port_size);

OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "ArkWeb",
"ndk SetMessageEventHandler end, web message port size:%{public}d", web_message_port_size);
return nullptr;
}

EXTERN_C_START
static napi_value Init(napi_env env, napi_value exports) {
napi_property_descriptor desc[] = {
{"nativeWebInit", nullptr, NativeWebInit, nullptr, nullptr, nullptr, napi_default, nullptr},
{"createWebMessagePorts", nullptr, createWebMessagePorts, nullptr, nullptr, nullptr, napi_default, nullptr},
{"postMessage", nullptr, postMessage, nullptr, nullptr, nullptr, napi_default, nullptr},
{"postNoneMessage", nullptr, postNoneMessage, nullptr, nullptr, nullptr, napi_default, nullptr},
{"postBufferMessage", nullptr, postBufferMessage, nullptr, nullptr, nullptr, napi_default, nullptr},
{"setMessageEventHandler", nullptr, setMessageEventHandler, nullptr, nullptr, nullptr, napi_default, nullptr},
{"closeMessagePort", nullptr, closeMessagePort, nullptr, nullptr, nullptr, napi_default, nullptr},
{"destroyMessagePort", nullptr, destroyMessagePort, nullptr, nullptr, nullptr, napi_default, nullptr},
{"postMessageThread", nullptr, postMessageThread, nullptr, nullptr, nullptr, napi_default, nullptr},
{"setMessageEventHandlerThread", nullptr, setMessageEventHandlerThread, nullptr, nullptr, nullptr, napi_default,
nullptr},
{"destroyNullMessagePort", nullptr, destroyNullMessagePort, nullptr, nullptr, nullptr, napi_default, nullptr},
};
napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
return exports;
}
EXTERN_C_END

static napi_module demoModule = {
.nm_version = 1,
.nm_flags = 0,
.nm_filename = nullptr,
.nm_register_func = Init,
.nm_modname = "entry",
.nm_priv = ((void *)0),
.reserved = {0},
};

extern "C" __attribute__((constructor)) void RegisterEntryModule(void) { napi_module_register(&demoModule); }

​

那只斑马不睡觉
关注
专栏目录
【OpenHarmony实战开发】第9课-Web前端页面调用应用侧函数
xzs51job的专栏
09-15 150
注册应用侧代码有两种方式，一种在Web组件初始化使用调用，使用javaScriptProxy()接口。另外一种在Web组件初始化完成后调用，使用registerJavaScriptProxy()接口。开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。在下面的示例中，将test()方法注册在前端页面中， 该函数可以在前端页面触发运行。javaScriptProxy()接口使用示例如下。
鸿蒙NEXT版实战开发：应用侧与前端页面的相互调用(C/C++)（前端页面JavaScript）
最新发布
qq_39652397的博客
10-09 623
本指导适用于ArkWeb应用侧与前端网页通信场景......
HarmonyOS Next开发学习手册——在应用中使用前端页面JavaScript
maniuT的博客
07-21 1015
在下面的示例中，应用侧页面中通过createWebMessagePorts方法创建消息端口，再把其中一个端口通过 postMessage() 接口发送到前端页面，便可以在前端页面和应用侧之间互相发送消息。开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。在下面的示例中，将test()方法注册在前端页面中， 该函数可以在前端页面触发运行。通过 runJavaScript 调用前端页面函数。
【鸿蒙实战开发】在应用中使用前端页面JavaScript
HarmonyOS007的博客
08-18 1053
应用侧可以通过runJavaScript()方法调用前端页面的JavaScript相关函数。 在下面的示例中，点击应用侧的“runJavaScript”按钮时，来触发前端页面的htmlTest()方法。
鸿蒙HarmonyOS NEXT开发实战：NetConnection开发指导
wewqeqwrqw的博客
09-14 1077
使用本文档涉及接口获取网络相关信息时，需先创建Native C++工程，在源文件中将相关接口封装，再在ArkTs层对封装的接口进行调用，使用hilog或者console.log等手段选择打印在控制台或者生成设备日志。
鸿蒙HarmonyOS NEXT实战开发：使用AKI轻松实现跨语言调用实现案例
wanghuaQAQ的博客
08-09 871
针对JS与C/C++跨语言访问场景，NAPI使用比较繁琐。
鸿蒙开发：前端开发者的机遇与挑战
1
02-17 1285
鸿蒙系统开发作为当下的一个风口，对于有志于投身技术领域的小白来说是一个难得的机遇。通过深入了解鸿蒙系统的技术优势和市场前景，你将能够做出明智的选择。记住，站在风口上，猪都能飞起来，而掌握鸿蒙开发技能，或许就是你起飞的翅膀。现在就开始行动吧！
鸿蒙HarmonyOS实战开发：TypeScript-模块【基础篇】
2401_84194030的博客
04-09 1175
从ECMAScript 2015开始，JavaScript引入了模块的概念。TypeScript也沿用这个概念
鸿蒙Harmony实战：NAPI组件接口规范开发
DMZDAMS的博客
08-05 1123
NAPI（Native API）组件是一套对外接口基于Node.js N-API规范开发的原生模块扩展开发框架。
《HarmonyOS实战——前端开发华为鸿蒙系统应用 OpenHarmony JS》
热门推荐
孙叫兽的博客
06-16 1万+
导读：一款“面向未来”、面向全场景（移动办公、运动健康、社交通信、媒体娱乐等）的分布式操作系统 。现已开源，名为 OpenHarmony。2019 年 8 月 9 日，华为在 HDC 开发...
探索HarmonyOS(鸿蒙应用开发)入门到实战：HarmonyOS 概述
01-31 157
OpenHarmony是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目，目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。1,系统基本能力子系统集：为分布式应用在多设备上的运行、调度、迁移等操作提供了基础能力，由分布式软总线、分布式数据管理、分布式任务调度、公共基础库、多模输入、图形、安全、AI等子系统组成。系统服务层是OpenHarmony的核心能力集合，通过框架层对应用程序提供服务。
鸿蒙OS元服务开发：【WebGL网页图形库开发概述】
m0_62167422的博客
04-02 1559
鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！
HarmonyOS NEXT 鸿蒙星河版亮相，系统有哪些亮点？，这些新技术你们都知道吗
2301_79054215的博客
04-09 1175
毕昇编译器是一个LLVM的下游发行版, 为鲲鹏CPU提供了一些优化的C/C++/Fortran编译器实现. 类似Intel的ICC, AMD的AOCC, Nvidia的NVCC, 均为LLVM的下游发行版.ArkUI虽然使用了TypeScript, 但并非浏览器或者小程序引擎. 因为浏览器最重要的是DOM模型, 通过DOM, 浏览器将Javascript和排版引擎结合在一起.而小程序则是借鉴了Vue等MVVM框架, 而MVVM最重要的特征就是UI与逻辑分离. 比如微信小程序使用的WXML声明UI的语法.
鸿蒙next开发者第一课02.DevEcoStudio的使用-习题
10-03 554
鸿蒙next开发第一课第02小节习题
HarmonyOS NEXT应用开发实战(一、打造最好用的网络通信模块组件)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
10-04 1758
通过将网络库移植到HarmonyOS，我们大大简化了网络请求的过程。开发者可以享受到更加清晰、简洁的API，同时也提升了开发效率。如果你正在开发HarmonyOS应用，不妨尝试一下这个网络通信模块封装，让你的开发过程更加顺畅。希望本文对你有所帮助，欢迎交流与分享经验！最后，推荐下笔者的业余开源app影视项目“爱影家”，推荐分享给与我一样喜欢观影的朋友。爱影家app开源项目介绍及源码。
10款好用的开源 HarmonyOS 工具库
威哥爱编程，CSDN 博客专家、全栈领域新星创作者、华为 HDE，愿交天下 IT 技术爱好者
09-30 1486
HarmonyOS NEXT 正式版即将发布，你在学习鸿蒙的过程还有哪些好用的工具库吗，欢迎分享给V 哥，关注威哥爱编程，一起学习鸿蒙开发。
鸿蒙HarmonyOS开发生态：构建万物互联的未来
GY的的专栏
10-04 1473
鸿蒙系统的分布式技术实现了多设备之间的协同工作，为用户带来了更加便捷、智能的全场景体验。从最初的HarmonyOS 1.0，到HarmonyOS 2.0在手机、平板等设备的广泛应用，再到HarmonyOS 3.0和4.0的发布，鸿蒙系统的功能和应用范围不断扩大，用户体验持续优化。鸿蒙系统在技术上不断演进，从最初的智慧屏应用，到手机、平板、手表等多种设备的广泛使用，再到HarmonyOS NEXT的全面成熟与加速发展，鸿蒙系统的功能和应用范围不断扩大。鸿蒙生态的繁荣离不开开发者的积极参与和贡献。
HarmonyOS Next元服务开发快速入门案例
weixin_69135651的博客
10-08 420
在resources>base>element>string.json中修改“app_name”值，该值表示“应用名称”。开源协议使用：Apache License 2.0 ，代码包支持免费使用，可进行二次开发后选择开源或闭源。在app.json5中修改“vender”值，该值表示“应用程序供应商”。6.在项目下的resource>base>media下添加图片。1.创建项目，选择Atomic Service。3.卡片创建完成，修改卡片配置代码。1.创建微、小、中、大卡片。二、创建卡片widget。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值