HarmonyOS 使用@ohos.web.webview封装通用webview组件时基础回调问题

Demo中的关键类。

CommonWebView 通用WebView组件。

CommonParser 通用回调类。

html调用原生后,无法在CommonParser回调中主动发消息给h5(this.controller.runJavaScript)。

html调用原生后,无法在CommonParser回调中通知界面更新UI。

HarmonyOS

Heiang

2024-11-07 10:41:27

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

@Component 
export struct CommonWebView { 
  url: string | Resource=''; 
  controller: WebView.WebviewController = new WebView.WebviewController(); 
  @State pageState: number = 0; //默认为0,暂无数据 
  @State commonParser:CommonParser=new CommonParser(this.controller); 
  @State module: string = ''; 
  @State IsShowLoading: boolean = false; 
  aboutToAppear() { 
    WebView.WebviewController.setWebDebuggingAccess(true); 
  } 
  showLoading() { 
  } 
  hideLoading() { 
  } 
  build() { 
    Row() { 
      Web({ src: this.url, controller: this.controller }) 
        .width(`100%`) 
        .height(`100%`) 
        .javaScriptAccess(true) 
        .domStorageAccess(true) 
        .onControllerAttached(() => { 
          let commonParser = new CommonParser(this.controller); 
          this.controller.registerJavaScriptProxy(commonParser, "objName", ["htmlToNative","setController"]); 
          this.controller.refresh(); 
          // Logger.i('h5页面加载开始 URL: ' + this.controller.getUrl()) 
        }) 
        .onPageEnd((event) => { 
        }) 
        .onErrorReceive(event => { 
          // Logger.e("WebView加载异常 \n URL :" + event.request.getRequestUrl() + '\n error : ' + event.error.getErrorInfo()); 
        }) 
    }.width(`100%`).height(`100%`) 
  } 
} 
class CommonParser { 
  controller: WebView.WebviewController; 
  //module: string; 
  constructor(controller: WebView.WebviewController) { 
    this.controller = controller; 
  } 
  setController(controller: WebView.WebviewController) { 
    this.controller = controller; 
    console.log('sdasda1') 
    return 'aaaaa' 
  } 
  htmlToNative() { 
    //1. html回调原生时无法主动发送消息给h5 
    //this.controller.runJavaScript 
    console.log('sdasda2') 
    //2. html回调原生时无法通知WebView做事情 
  }; 
}
<!-- index.html --> 
  <!DOCTYPE html> 
  <html> 
  <meta charset="utf-8"> 
  <body> 
  <button type="button" onclick="htmlTest()">showDialog!</button> 
  <p id="demo"></p> 
 
  <script type="text/javascript"> 
  function htmlTest() { 
    let str=window.objName.test(); 
    document.getElementById("demo").innerHTML=str; 
    console.log('objName.test result:'+ str) 
  } 
 
  </script> 
  </body> 
 
  </html>

2024-11-07 16:05:55

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 使用@ohos.web.webview封装通用webview组件时基础回调问题

订阅鸿蒙技术特刊，精选内容抢先看