Web中webview和H5交互

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

HarmonyOS
2024-05-26 17:30:43
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
honestForGirl

核心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)})`); 
  } 
}

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)); 
    } 
  } 
`;

之后在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(); 
  })
分享
微博
QQ
微信
回复
2024-05-27 22:11:29
相关问题
webview加载Vue h5失败
16215浏览 • 5回复 待解决
如何在webview中使用H5的alert
572浏览 • 1回复 待解决
H5页面如何与ArkTS交互
1539浏览 • 1回复 待解决
Web能直接加载h5代码吗?
1722浏览 • 2回复 待解决
如何在HarmonyOS调试h5页面
382浏览 • 1回复 待解决
如何实现H5自定义事件
859浏览 • 1回复 待解决
h5如何在鸿蒙设备进行调试
423浏览 • 1回复 待解决
如何加载字符串形式H5数据
719浏览 • 1回复 待解决
FA里内嵌H5是怎么保持登录状态?
5778浏览 • 1回复 待解决
如何调试H5代码,有人知道吗?
633浏览 • 1回复 待解决
升级API11后h5页面字体变小了
696浏览 • 1回复 待解决