Web中webview和H5交互

Webview中的H5调用原生JS代码。

HarmonyOS
2024-05-26 17:30:43
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
十根玉米

核心API

javaScriptProxy

runJavaScript

javaScriptAccess

核心代码解释

定义一个JsBridge的ets文件,用来桥接ArkTS和Webview。

export default class JsBridge { 
  controller: WebView.WebviewController; 
  
  constructor(controller: WebView.WebviewController) { 
    this.controller = controller; 
  } 
  
  /** 
   *将JavaScript对象注入窗口,并调用窗口中的函数。 
   *@返回javaScriptProxy对象。 
   */ 
  get javaScriptProxy(): JavaScriptItem { 
    let result: JavaScriptItem = { 
      object: { 
        call: this.call 
      }, 
      name: "JSBridgeHandle", 
      methodList: ['call'], 
      controller: this.controller 
    } 
    return result; 
  } 
  /** 
   *初始化网桥。 
   */ 
  initJsBridge(): void { 
    this.controller.runJavaScript(code); 
  } 
  /** 
   *ArkTS通过runJavaScript调用WebView。 
   */ 
  callback = (id: number, data: string): void => { 
    this.controller.runJavaScript(`JSBridgeCallback("${id}", ${JSON.stringify(data)})`); 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.

JsBridge里的callback方法通过runJavaScript方法调用原生JS代码。

export const code = ` 
  const JSBridgeMap = {}; 
  let callID = 0; 
  
  
  function JSBridgeCallback (id, params){ 
    JSBridgeMap[id](params); 
    JSBridgeMap[id] = null; 
    delete JSBridgeMap[id]; 
  } 
  
  window.ohosCallNative = { 
    callNative(method, params, callback){ 
      const id = callID++; 
      const paramsObj = { 
          callID: id, 
          data: params || null 
      } 
      JSBridgeMap[id] = callback || (() => {}); 
      JSBridgeHandle.call(method, JSON.stringify(paramsObj)); 
    } 
  } 
`;
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

之后在index里声明一个JSBridge,在web加载本地html文件后走JavaScriptProxy接口,通过this.jsBridge.JavaScriptProxy调用原生js代码和JsBridge类实现webview和H5交互。

Web({ 
  src: $rawfile('MainPage.html'), 
  controller: this.webController 
}) 
  .javaScriptAccess(true) 
  .javaScriptProxy(this.jsBridge.javaScriptProxy) 
  .height($r('app.float.web_height')) 
  .onPageBegin(() => { 
    this.jsBridge.initJsBridge(); 
  })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
分享
微博
QQ
微信
回复
2024-05-27 22:11:29


相关问题
HarmonyOS webview 怎么H5交互
589浏览 • 1回复 待解决
HarmonyOS web原生H5如何交互
1168浏览 • 1回复 待解决
HarmonyOS webH5交互
1322浏览 • 1回复 待解决
Web组件h5页面如何交互
756浏览 • 1回复 待解决
HarmonyOS H5原生交互
643浏览 • 1回复 待解决
HarmonyOS H5应用侧数据交互
1030浏览 • 1回复 待解决
HarmonyOS Web如何同H5进行交互传值
673浏览 • 1回复 待解决
HarmonyOS webH5两端数据交互
1560浏览 • 1回复 待解决
HarmonyOS 原生H5页面交互
436浏览 • 1回复 待解决
HarmonyOS webview h5的localstorage
786浏览 • 1回复 待解决
HarmonyOS ArkTS与H5交互方法
649浏览 • 1回复 待解决
webview加载Vue h5失败
18357浏览 • 5回复 待解决
HarmonyOS web组件加载h5h5拉起摄像头
1220浏览 • 1回复 待解决
如何在webview中使用H5的alert
2766浏览 • 1回复 待解决
HarmonyOS WebView加载H5卡顿
625浏览 • 1回复 待解决
HarmonyOS h5原生交互、页面状态机
518浏览 • 1回复 待解决
H5页面如何与ArkTS交互
3712浏览 • 1回复 待解决