• 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  class testClass {
20    constructor() {
21    }
22
23    test(): string {
24      return 'ArkTS Hello World!';
25    }
26  }
27
28  @Entry
29  @Component
30  struct WebComponent {
31    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
32    // 声明需要注册的对象
33    @State testObj: testClass = new testClass();
34
35    build() {
36      Column() {
37        // web组件加载本地index.html页面
38        Web({ src: $rawfile('index.html'), controller: this.webviewController})
39          // 将对象注入到web端
40          .javaScriptProxy({
41            object: this.testObj,
42            name: "testObjName",
43            methodList: ["test"],
44            controller: this.webviewController
45          })
46      }
47    }
48  }
49  ```
50
51
52- 应用侧使用registerJavaScriptProxy()接口注册。
53
54  ```ts
55  // xxx.ets
56  import web_webview from '@ohos.web.webview';
57  import business_error from '@ohos.base';
58
59  class testClass {
60    constructor() {
61    }
62
63    test(): string {
64      return "ArkUI Web Component";
65    }
66
67    toString(): void {
68      console.log('Web Component toString');
69    }
70  }
71
72  @Entry
73  @Component
74  struct Index {
75    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
76    @State testObj: testClass = new testClass();
77
78    build() {
79      Column() {
80        Button('refresh')
81          .onClick(() => {
82            try {
83              this.webviewController.refresh();
84            } catch (error) {
85              let e: business_error.BusinessError = error as business_error.BusinessError;
86              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
87            }
88          })
89        Button('Register JavaScript To Window')
90          .onClick(() => {
91            try {
92              this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
93            } catch (error) {
94              let e: business_error.BusinessError = error as business_error.BusinessError;
95              console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
96            }
97          })
98        Web({ src: $rawfile('index.html'), controller: this.webviewController })
99      }
100    }
101  }
102  ```
103
104  > **说明：**
105  >
106  > 使用[registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy)接口注册方法时，注册后需调用[refresh()](../reference/apis/js-apis-webview.md#refresh)接口生效。
107
108
109- index.html前端页面触发应用侧代码。
110
111  ```html
112  <!-- index.html -->
113  <!DOCTYPE html>
114  <html>
115  <body>
116  <button type="button" onclick="callArkTS()">Click Me!</button>
117  <p id="demo"></p>
118  <script>
119      function callArkTS() {
120          let str = testObjName.test();
121          document.getElementById("demo").innerHTML = str;
122          console.info('ArkTS Hello World! :' + str);
123      }
124  </script>
125  </body>
126  </html>
127  ```
128