【最新鸿蒙应用开发】——ArkWeb2——arkts与h5交互

H5与端侧交互

1. 应用侧调用前端页面函数

应用侧可以通过runJavaScript()方法调用前端页面的JavaScript相关函数。 在下面的示例中，点击应用侧的“runJavaScript”按钮时，来触发前端页面的htmlTest()方法。

• 前端页面代码。

• 应用侧代码。

// xxx.ets
import web_webview from '@ohos.web.webview';
​
@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
​
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
      Button('runJavaScript')
        .onClick(() => {
           this.webviewController.runJavaScript('htmlTest()');
        })
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
    }
  }
}

场景

xx.ets：

      Web({
        src: $rawfile('word.html'),
        controller: this.webviewCtrl
      })
        .onPageEnd(() => {
          //   当word.html网页加载完成之后，要执行这个网页中定义的js方法 writeCode
          this.webviewCtrl.runJavaScript(`writeCode(\`${this.currentCode}\`)`)
        })

引入第三方函数实现高亮效果

前端侧：

效果：

2. 前端页面调用应用侧函数

开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。

注册应用侧代码有两种方式，一种在Web组件初始化调用，使用javaScriptProxy()接口。另外一种在Web组件初始化完成后调用，使用registerJavaScriptProxy()接口。

在下面的示例中，将test()方法注册在前端页面中， 该函数可以在前端页面触发运行。

1. javaScriptProxy()接口使用示例如下。

// xxx.ets
import web_webview from '@ohos.web.webview';
​
class testClass {
  constructor() {
  }
​
  test(): string {
    return 'ArkTS Hello World!';
  }
}
​
@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  // 声明需要注册的对象
  @State testObj: testClass = new testClass();
​
  build() {
    Column() {
      // web组件加载本地index.html页面
      Web({ src: $rawfile('index.html'), controller: this.webviewController})
        // 将对象注入到web端
        .javaScriptProxy({
          object: this.testObj,
          name: "testObjName",
          methodList: ["test"],
          controller: this.webviewController
        })
    }
  }
}

1. 应用侧使用registerJavaScriptProxy()接口注册。

// xxx.ets
import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';
​
class testClass {
  constructor() {
  }
​
  test(): string {
    return "ArkUI Web Component";
  }
​
  toString(): void {
    console.log('Web Component toString');
  }
}
​
@Entry
@Component
struct Index {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  @State testObj: testClass = new testClass();
​
  build() {
    Column() {
      Button('refresh')
        .onClick(() => {
          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(() => {
          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('index.html'), controller: this.webviewController })
    }
  }
}

说明： 使用registerJavaScriptProxy()