鸿蒙与本地h5的交互

半夜偷删你代码

于 2024-09-19 09:56:05 发布

阅读量405

点赞数 4

文章标签：交互

本文链接：https://blog.csdn.net/2302_79548774/article/details/142352235

版权

方法一：

// 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() {
      // Button('refresh')
      //   .onClick(() => {
      //     this.webviewController.refresh();
      //     // try {
      //     //   this.webviewController.refresh();
      //     // } catch (error) {
      //     //   let e: business_error.BusinessError = error as business_error.BusinessError;
      //     //   console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
      //     // }
      //   })
      // Button('Register JavaScript To Window')
      //   .onClick(() => {
      //     this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
      //
      //     // try {
      //     //   this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
      //     // } catch (error) {
      //     //   let e: business_error.BusinessError = error as business_error.BusinessError;
      //     //   console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
      //     // }
      //   })

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

    }
  }
}

html：

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<button οnclick="callArkTS()" type="button">nicaicai</button>
<p id="demo"></p>
<script>
    function callArkTS() {
        let str = testObjName.test();
        document.getElementById("demo").innerHTML = str;
    }
</script>
</body>
</html>