前端頁面調(diào)用應(yīng)用側(cè)函數(shù)

2024-02-16 13:39 更新

開發(fā)者使用Web組件將應(yīng)用側(cè)代碼注冊到前端頁面中，注冊完成之后，前端頁面中使用注冊的對象名稱就可以調(diào)用應(yīng)用側(cè)的函數(shù)，實現(xiàn)在前端頁面中調(diào)用應(yīng)用側(cè)方法。

注冊應(yīng)用側(cè)代碼有兩種方式，一種在Web組件初始化使用調(diào)用，使用javaScriptProxy()接口。另外一種在Web組件初始化完成后調(diào)用，使用registerJavaScriptProxy()接口。

在下面的示例中，將test()方法注冊在前端頁面中， 該函數(shù)可以在前端頁面觸發(fā)運行。

  • javaScriptProxy()接口使用示例如下。
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview';
    3. 

    4. class testClass {
    5.   constructor() {
    6.   }
    7. 

    8.   test(): string {
    9.     return 'ArkTS Hello World!';
    10.   }
    11. }
    12. 

    13. @Entry
    14. @Component
    15. struct WebComponent {
    16.   webviewController: web_webview.WebviewController = new web_webview.WebviewController();
    17.   // 聲明需要注冊的對象
    18.   @State testObj: testClass = new testClass();
    19. 

    20.   build() {
    21.     Column() {
    22.       // web組件加載本地index.html頁面
    23.       Web({ src: $rawfile('index.html'), controller: this.webviewController})
    24.         // 將對象注入到web端
    25.         .javaScriptProxy({
    26.           object: this.testObj,
    27.           name: "testObjName",
    28.           methodList: ["test"],
    29.           controller: this.webviewController
    30.         })
    31.     }
    32.   }
    33. }
  • 應(yīng)用側(cè)使用registerJavaScriptProxy()接口注冊。
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview';
    3. import business_error from '@ohos.base';
    4. 

    5. class testClass {
    6.   constructor() {
    7.   }
    8. 

    9.   test(): string {
    10.     return "ArkUI Web Component";
    11.   }
    12. 

    13.   toString(): void {
    14.     console.log('Web Component toString');
    15.   }
    16. }
    17. 

    18. @Entry
    19. @Component
    20. struct Index {
    21.   webviewController: web_webview.WebviewController = new web_webview.WebviewController();
    22.   @State testObj: testClass = new testClass();
    23. 

    24.   build() {
    25.     Column() {
    26.       Button('refresh')
    27.         .onClick(() => {
    28.           try {
    29.             this.webviewController.refresh();
    30.           } catch (error) {
    31.             let e: business_error.BusinessError = error as business_error.BusinessError;
    32.             console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
    33.           }
    34.         })
    35.       Button('Register JavaScript To Window')
    36.         .onClick(() => {
    37.           try {
    38.             this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
    39.           } catch (error) {
    40.             let e: business_error.BusinessError = error as business_error.BusinessError;
    41.             console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
    42.           }
    43.         })
    44.       Web({ src: $rawfile('index.html'), controller: this.webviewController })
    45.     }
    46.   }
    47. }
    說明

    使用registerJavaScriptProxy()接口注冊方法時，注冊后需調(diào)用refresh()接口生效。

  • index.html前端頁面觸發(fā)應(yīng)用側(cè)代碼。
    1. <!-- index.html -->
    2. <!DOCTYPE html>
    3. <html>
    4. <body>
    5. <button type="button" onclick="callArkTS()">Click Me!</button>
    6. <p id="demo"></p>
    7. <script>
    8.     function callArkTS() {
    9.         let str = testObjName.test();
    10.         document.getElementById("demo").innerHTML = str;
    11.         console.info('ArkTS Hello World! :' + str);
    12.     }
    13. </script>
    14. </body>
    15. </html>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號