鸿蒙与h5的交互-EW帮帮网

一、对象注入，h5调用鸿蒙方法--javaScriptProxy

// xxx.ets
import web_webview from '@ohos.web.webview';

class WebViewModel {
  constructor() {
  }

  webCallBack() {
    console.log('webCallBack')
  }
}

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

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


html代码：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>

<body>
<div class="btn-box">
    <button class="btn" onclick="callArkTS()" type="button">Click Me!</button>
    <p id="demo"></p>
</div>

</body>
<script>
    function callArkTS() {
        window.harmony.webCallBack();
    }
</script>

</html>

二、对象注入，方式二---javaScriptProxy

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@ComponentV2
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      // web组件加载本地index.html页面
      Web({ src: $rawfile('test1.html'), controller: this.webviewController })
        .domStorageAccess(true)
        .javaScriptAccess(true)// 将对象注入到web端
        .javaScriptProxy({
          object: {
            nativeMethod: (channelName: string, paramsCallback: number) => {
              console.log('paramsCallback' + paramsCallback)
              if (!channelName || !paramsCallback) {
                return
              }
              if (paramsCallback) {

              }
            },
          },
          name: "harmony",
          methodList: ["nativeMethod"],
          controller: this.webviewController
        })
    }
  }
}

html代码：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>

<body>
<div class="btn-box">
    <button class="btn" onclick="callArkTS()" type="button">Click Me!</button>
    <p id="demo"></p>
</div>

</body>
<script>
    function callArkTS() {
        window.harmony.nativeMethod( "callArkTS", "params");
    }
</script>

</html>

三、原生调用h5的方法--runJavaScript

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@ComponentV2
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  @Local value1: string = 'value1'
  @Local value2: string = 'value2'

  build() {
    Column() {
      // web组件加载本地index.html页面
      Web({ src: $rawfile('test1.html'), controller: this.webviewController })
        .fileAccess(true)
        .domStorageAccess(true)
        .zoomAccess(false).onPageEnd(() => {
        this.webviewController.runJavaScript(`nativeFn("${this.value1}","${this.value2}")`)
      })

    }
  }
}


html代码：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>

<body>
<div class="btn-box">
    <button class="btn" onclick="callArkTS()" type="button">Click Me!</button>
    <p id="demo"></p>
</div>

</body>
<script>
    function nativeFn(value1, value2) {
        console.log('原生调用' + value1 + '--' + value2);
    }
</script>

</html>

鸿蒙与h5的交互

网站公告

今日签到

热门文章

最新发布