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

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

HarmonyOS
2024-08-11 14:09:12
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

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>
分享
微博
QQ
微信
回复
2024-08-12 13:59:42
相关问题
HarmonyOS h5ArkTS通信
292浏览 • 1回复 待解决
h5应用端的sdk通信问题
251浏览 • 1回复 待解决
HarmonyOS h5HarmonyOS怎么通信
161浏览 • 1回复 待解决
H5过url scheme拉起对应应用
554浏览 • 1回复 待解决
H5页面如何ArkTS交互
3048浏览 • 1回复 待解决
HarmonyOS webH5交互
724浏览 • 1回复 待解决
HarmonyOS 原生怎么主动触发消息给h5
48浏览 • 1回复 待解决
HarmonyOS H5应用侧数据交互的Demo
571浏览 • 1回复 待解决
HarmonyOS webH5两端数据交互
896浏览 • 1回复 待解决
HarmonyOS web组件加载h5h5拉起摄像头
595浏览 • 1回复 待解决
HarmonyOS H5如何访问相册?
284浏览 • 1回复 待解决
HarmonyOS webview h5的localstorage
419浏览 • 1回复 待解决
HarmonyOS webview 怎么和H5交互
58浏览 • 1回复 待解决
HarmonyOS h5 window.history 无效
73浏览 • 1回复 待解决
HarmonyOS 折叠屏H5适配问题
821浏览 • 1回复 待解决
webview加载Vue h5失败
17819浏览 • 5回复 待解决