Web中webview和H5交互

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.

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.

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.