鸿蒙与本地h5的交互

方法一：

// xxx.ets
import web_webview from '@ohos.web.webview';
import { router } from '@kit.ArkUI';

class WebViewModel {
  constructor() {
  }

  test() {
    router.pushUrl({ url: "pages/Index1" })
  }
}

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  // 声明需要注册的对象
  @State vm: WebViewModel = new WebViewModel();

  build() {
    Column() {
      // web组件加载本地index.html页面
      Web({ src: $rawfile('test1.html'), controller: this.webviewController })// 将对象注入到web端
        .javaScriptProxy({
          object: this.vm,
          name: "harmony",
          methodList: ["test"],
          controller: this.webviewController
        })
    }
  }
}
方法二：

// xxx.ets
import web_webview from '@ohos.web.webview';
import { router } from '@kit.ArkUI';

class testClass {
  constructor() {
  }

  test() {
    // return "ArkUI Web Component11111";
    router.pushUrl({ url: "pages/Index1" })
  }

  toString(): void {
    console.log('Web Component toString');
  }
}

@Entry
@Component
struct Index {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  @State testObj: testClass = new testClass();

  aboutToAppear(): void {
    // this.registerJavaScriptToWindow()
    // this.refresh()
    setTimeout(() => {
      this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"])
      this.webviewController.refresh()
    }, 1)

  }

  build() {
    Column() {
   

      Web({ src: $rawfile('test1.html'), controller: this.webviewController })

    }
  }
}


html：





nicaicai