• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 前端页面调用应用侧函数
2
3
4开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。
5
6
7注册应用侧代码有两种方式，一种在Web组件初始化使用调用，使用[javaScriptProxy()](../reference/arkui-ts/ts-basic-components-web.md#javascriptproxy)接口。另外一种在Web组件初始化完成后调用，使用[registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy)接口。
8
9
10在下面的示例中，将test()方法注册在前端页面中， 该函数可以在前端页面触发运行。
11
12
13- [javaScriptProxy()](../reference/arkui-ts/ts-basic-components-web.md#javascriptproxy)接口使用示例如下。
14
15  ```ts
16  // xxx.ets
17  import web_webview from '@ohos.web.webview';
18
19  @Entry
20  @Component
21  struct WebComponent {
22    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
23    // 声明需要注册的对象
24    testObj = {
25      test: () => {
26        return 'ArkTS Hello World!';
27      }
28    }
29
30    build() {
31      Column() {
32        // web组件加载本地index.html页面
33        Web({ src: $rawfile('index.html'), controller: this.webviewController})
34          // 将对象注入到web端
35          .javaScriptProxy({
36            object: this.testObj,
37            name: "testObjName",
38            methodList: ["test"],
39            controller: this.webviewController
40          })
41      }
42    }
43  }
44  ```
45
46
47- 应用侧使用registerJavaScriptProxy()接口注册。
48
49  ```ts
50  // xxx.ets
51  import web_webview from '@ohos.web.webview';
52
53  @Entry
54  @Component
55  struct Index {
56    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
57    testObj = {
58      test: (data) => {
59        return "ArkUI Web Component";
60      },
61      toString: () => {
62        console.info('Web Component toString');
63      }
64    }
65
66    build() {
67      Column() {
68        Button('refresh')
69          .onClick(() => {
70            try {
71              this.webviewController.refresh();
72            } catch (error) {
73              console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
74            }
75          })
76        Button('Register JavaScript To Window')
77          .onClick(() => {
78            try {
79              this.webviewController.registerJavaScriptProxy(this.testObj, "objName", ["test", "toString"]);
80            } catch (error) {
81              console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
82            }
83          })
84        Web({ src: $rawfile('index.html'), controller: this.webviewController })
85      }
86    }
87  }
88  ```
89
90  > **说明：**
91  >
92  > 使用[registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy)接口注册方法时，注册后需调用[refresh()](../reference/apis/js-apis-webview.md#refresh)接口生效。
93
94
95- index.htm前端页面触发应用侧代码。
96
97  ```html
98  <!-- index.html -->
99  <!DOCTYPE html>
100  <html>
101  <body>
102  <button type="button" onclick="callArkTS()">Click Me!</button>
103  <p id="demo"></p>
104  <script>
105      function callArkTS() {
106          let str = testObjName.test();
107          document.getElementById("demo").innerHTML = str;
108          console.info('ArkTS Hello World! :' + str);
109      }
110  </script>
111  </body>
112  </html>
113  ```
114