自定义 class 需要访问 WebComponent 中的 webViewController？

Question

自定义 class 中持有了 WebComponent 中的 webViewController，当前端代码调用invoke方法与webview通信时，只要invoke方法中使用了当前类的this，应用就会崩溃，代码片段如下：

// 自定义类WebViewBridge：
import web_webview from '@ohos.web.webview';

export default class WebViewBridge {
  webViewController: web_webview.WebviewController;

  // 是否已经执行完了onFirstScript方法,默认未执行

  constructor(webviewController: web_webview.WebviewController) {
    this.webViewController = webviewController;
  }

  public invoke(){
    console.log('-----', !this)
    this.webViewController.runJavaScript("");
  }
}

// webview组件类：
import web_webview from '@ohos.web.webview';
import WebViewBridge from './WebViewBridge';

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  webViewBridge: WebViewBridge = new WebViewBridge(this.webviewController);

  aboutToAppear(){
    web_webview.WebviewController.setWebDebuggingAccess(true);
  }
  build() {
    Column() {
      // 组件创建时，通过$rawfile加载本地文件local.html
      Web({ src: $rawfile('template.html'), controller: this.webviewController })
        .javaScriptAccess(true)
        .javaScriptProxy({object: this.webViewBridge, name: 'NativeBridge',
          methodList: [
          'invoke',
          ], controller: this.webviewController},
        )
        .onPageBegin(() => {
          this.webviewController.setCustomUserAgent('Android OpenHarmony')
          console.log('------>onPageBegin')
        })
    }
  }
}

Answer 1

将自定义类webviewBridge中的invoke方法改成箭头函数即可，示例代码：

export default class WebViewBridge {
  webViewController: web_webview.WebviewController;

  // 是否已经执行完了onFirstScript方法,默认未执行

  constructor(webviewController: web_webview.WebviewController) {
    this.webViewController = webviewController;
  }

  public invoke = () => {
    console.log('-----', !this)
    this.webViewController.runJavaScript("");
  }
}