IT评测·应用市场-qidao123.com技术社区

标题: 鸿蒙NEXT版实战开辟：建立应用侧与前端页面数据通道(C/C++)（前端页面JavaScript） [打印本页]

---

作者: 守听    时间: 7 天前
标题: 鸿蒙NEXT版实战开辟：建立应用侧与前端页面数据通道(C/C++)（前端页面JavaScript）
往期鸿蒙全套实战精彩文章必看内容：

• 鸿蒙开辟焦点知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开辟实战学习门路
  
• 鸿蒙HarmonyOS NEXT开辟技术最全学习门路指南
  
• 鸿蒙应用开辟实战项目，看这一篇文章就够了（部分项目附源码）
  

---

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

前端页面和应用侧之间可以利用本文Native方法实现两头通讯，可办理ArkTS情况的冗余切换，同时允许发送消息、回调在非UI线程上报，避免造成UI壅闭。当前只支持string和buffer数据范例。
Native侧ArkWeb绑定

• ArkWeb组件声明在ArkTS侧，需要用户自界说一个标识webTag，并将webTag通过Node-API传至应用C++侧。后续ArkWeb Native接口利用时，均需webTag作为对应组件的唯一标识。
  
• ArkTS侧
  
  1. import { webview } from '@kit.ArkWeb';
  2. // 自定义webTag，在WebviewController创建时作为入参传入，建立controller与webTag的映射关系
  3. webTag: string = 'ArkWeb1';
  4. controller: webview.WebviewController = new webview.WebviewController();
  5. ...
  6. // aboutToAppear中将webTag通过NAPI接口传入C++侧，作为C++侧ArkWeb组件的唯一标识
  7. aboutToAppear() {
  8.   console.info("aboutToAppear")
  9.   //初始化web ndk
  10.   testNapi.nativeWebInit(this.webTag);
  11. }
  12. ...

  复制代码

Native侧API布局体获取

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

1. static ArkWeb_ControllerAPI *controller = nullptr;
2. static ArkWeb_WebMessagePortAPI *webMessagePort = nullptr;
3. static ArkWeb_WebMessageAPI *webMessage = nullptr;
4. ...
5. controller = reinterpret_cast<ArkWeb_ControllerAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_CONTROLLER));
6. webMessagePort =
7.     reinterpret_cast<ArkWeb_WebMessagePortAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_WEB_MESSAGE_PORT));
8. webMessage = reinterpret_cast<ArkWeb_WebMessageAPI *>(OH_ArkWeb_GetNativeAPI(ARKWEB_NATIVE_WEB_MESSAGE));

复制代码

完整示例

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

​

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4