鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

短视频免费课程课程排行直播课软考学堂

全部课程厂商认证 IT技术 25年5月软考 PMP项目管理免费题库

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

活动短视频专栏极客Show 鸿蒙技术特刊

HarmonyOS ArkTS主动与H5通信方式是什么

应用主体是H5页面，在部分场景下，H5中需要主动的监听网络异常的情况下，限制功能是否可用；如何实现在H5中监听网络异常的消息或者ArkTS如何主动与H5进行通信？

HarmonyOS

2024-08-11 14:09:12

浏览

赞

收藏 0

回答 1

待解决

回答 1

按赞同

/

按时间

1 、关于前端监听网络变化，可参考：addEventListener 文档：https://juejin.cn/post/7082567435789795336

2 、ArkTS如何主动与H5进行通信？HarmonyOS Web组件可以实现前端与原生页面的相互调用，这里主要讲解如何在前端获取网络变化通知原生。

首先，声明需要注册的对象。

class testClass { 
  constructor() { 
  } 
  test(): string { 
    return "ArkUI Web Component"; 
  } 
  toString(): void { 
    console.log('Web Component toString'); 
  } 
}

方案一：

@State testObj: testClass = new testClass(); 
Web({ src: $rawfile('index.html'), controller: this.webviewController}) 
  // 将对象注入到web端 
  .javaScriptProxy({ 
    object: this.testObj, 
    name: "testObjName", 
    methodList: ["test"], 
    controller: this.webviewController 
  })

方案二：

@State testObj: testClass = new testClass(); 
webviewController: web_webview.WebviewController = new web_webview.WebviewController(); 
this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]); 
//使用registerJavaScriptProxy()接口注册方法时，注册后需调用refresh()接口生效 
this.webviewController.refresh();

然后，前端页面调用此方法。

<!-- index.html --> 
  <!DOCTYPE html> 
  <html> 
  <body> 
  <button type="button" onclick="callArkTS()">Click Me!</button> 
  <p id="demo"></p> 
  <script> 
  function callArkTS() { 
    let str = testObjName.test(); 
    document.getElementById("demo").innerHTML = str; 
    console.info('ArkTS Hello World! :' + str); 
  } 
  </script> 
  </body> 
  </html>

回复

2024-08-12 13:59:42

如何写精华回答，获更多曝光？

发布

相关问题

HarmonyOS h5和ArkTS通信

718浏览 • 1回复待解决

HarmonyOS ArkTS与H5交互方法

529浏览 • 1回复待解决

h5与应用端的sdk通信问题

749浏览 • 1回复待解决

HarmonyOS 原生与webview中的H5消息通信

443浏览 • 1回复待解决

h5嵌入HarmonyOS ，与HarmonyOS ArkTS进行交互

610浏览 • 1回复待解决

HarmonyOS 使用JSBridge进行H5与app通信数据异常

519浏览 • 1回复待解决

H5页面如何与ArkTS交互

3624浏览 • 1回复待解决

HarmonyOS h5和HarmonyOS怎么通信？

405浏览 • 1回复待解决

H5通过url scheme拉起对应应用

1158浏览 • 1回复待解决

HarmonyOS web与H5交互

1232浏览 • 1回复待解决

HarmonyOS H5与原生通信，如何直接将方法挂载到window上

177浏览 • 1回复待解决

HarmonyOS H5异步调用arkTs函数，arkTs如何将结果返回至H5 ？

840浏览 • 1回复待解决

HarmonyOS webview与H5交互方式应该使用jsbridge还是消息通讯

969浏览 • 1回复待解决

HarmonyOS 原生怎么主动触发消息给h5

481浏览 • 1回复待解决

HarmonyOS H5和app通信是否有传输上限

200浏览 • 1回复待解决

HarmonyOS webview加载H5页面与原生交互jsBrige的实现方式

293浏览 • 1回复待解决

HarmonyOS web.webview 嵌套H5(网页)相互通信

1368浏览 • 1回复待解决

HarmonyOS ArkTS和h5的数据解析

480浏览 • 1回复待解决

HarmonyOS 怎么实现webview暴露方法与H5交互

521浏览 • 1回复待解决

H5和ArkTS交互，H5页面首次获取不到原生侧接口返回数据

998浏览 • 1回复待解决

HarmonyOS web与H5两端数据交互

1477浏览 • 1回复待解决

HarmonyOS H5与应用侧数据交互的Demo

1135浏览 • 1回复待解决

HarmonyOS web组件加载h5，h5拉起摄像头

1129浏览 • 1回复待解决

HarmonyOS H5页面如何通过scheme方式拉起应用

489浏览 • 1回复待解决

HarmonyOS 本地H5加载

518浏览 • 1回复待解决

提问

该提问已有0人参与，帮助了0人

相关讨论帖

在HarmonyOS上实现ArkTS与H5的交互 0回复

H5通过url scheme拉起对应应用 0回复

webview加载Vue h5失败 0回复

轻松上手-Navigation路由 H5 0回复

HarmonyOS - JavaUI 框架之使用WebView加载本地H5页面 1回复

Copyright © 2005-2025 51CTO.COM 京ICP证060544版权所有未经许可请勿转载