鸿蒙HarmonyOS实战-Web组件（前端函数和应用侧函数相互调用）

 前言

前端函数和应用侧函数相互调用是指前端页面中的JavaScript函数和应用程序侧的函数之间进行相互调用。

在前端开发中，常常会使用JavaScript函数来处理用户的交互事件和操作。这些函数可以在前端页面中定义，例如通过事件监听器或者按钮点击事件来触发函数的执行。这些前端函数可以使用DOM操作、修改页面样式以及向后端发送请求等。

而应用侧函数是指在应用程序中定义的函数，例如后端服务器端脚本、数据库操作函数等。这些函数通常用于处理业务逻辑、数据处理、数据库操作等。

前端函数和应用侧函数可以通过各种方式进行相互调用。例如，前端函数可以通过AJAX请求将数据发送到应用侧函数进行处理，应用侧函数可以返回处理结果给前端函数。另外，前端函数也可以通过调用后端API接口来执行应用侧函数。

不过HarmonyOS的Web组件前端函数和应用侧函数相互调用是已经封装好的。

一、调用前端页面函数

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

?1.1 前端页面

  2. html>
  3. <html>
  4. <body>
  5. <h1>执行JavaScripth1>
  6. <p id="locationInfo">位置信息p>
  7. <script>
  8.     var locationInfo=document.getElementById("locationInfo");
  9.     function htmlTest() {
  10.         locationInfo.innerHTML='JavaScript Hello World! '
  11.     }
  12. script>
  13. body>
  14. html>

?1.2 应用侧

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: $rawfile('local.html'), controller: this.webviewController})
  12.       Button('runJavaScript')
  13.         .onClick(() => {
  14.           this.webviewController.runJavaScript('htmlTest()');
  15.         })
  16.     }
  17.   }
  18. }

在这里插入图片描述

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

?2.1 前端页面

  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>

?2.2 应用侧

☀️2.2.1 初始化时调用
  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. }

在这里插入图片描述

☀️2.2.2 初始化后调用
  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  3. // @ts-ignore
  4. import business_error from '@ohos.base';
  5.  
  6. class testClass {
  7.   constructor() {
  8.   }
  9.  
  10.   test(): string {
  11.     return "ArkUI Web Component";
  12.   }
  13.  
  14.   toString(): void {
  15.     console.log('Web Component toString');
  16.   }
  17. }
  18.  
  19. @Entry
  20. @Component
  21. struct Index {
  22.   webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  23.   @State testObj: testClass = new testClass();
  24.  
  25.   build() {
  26.     Column() {
  27.       Button('refresh')
  28.         .onClick(() => {
  29.           try {
  30.             this.webviewController.refresh();
  31.           } catch (error) {
  32.             let e: business_error.BusinessError = error as business_error.BusinessError;
  33.             console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
  34.           }
  35.         })
  36.       Button('Register JavaScript To Window')
  37.         .onClick(() => {
  38.           try {
  39.             this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "test"]);
  40.           } catch (error) {
  41.             let e: business_error.BusinessError = error as business_error.BusinessError;
  42.             console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
  43.           }
  44.         })
  45.       Web({ src: $rawfile('local.html'), controller: this.webviewController })
  46.     }
  47.   }
  48. }

在这里插入图片描述

3.建立应用侧与前端页面数据通道

?3.1 前端页面

  1. <!--xxx.html-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>WebView Message Port Demo</title>
  7. </head>
  8. <body>
  9.     <h1>WebView Message Port Demo</h1>
  10.     <div>
  11.         <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
  12.         <input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/>
  13.     </div>
  14.     <p class="output">display received message send from ets</p>
  15. </body>
  16. <script>
  17. var h5Port;
  18. var output = document.querySelector('.output');
  19. window.addEventListener('message', function (event) {
  20.     if (event.data === '__init_port__') {
  21.         if (event.ports[0] !== null) {
  22.             h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
  23.             h5Port.onmessage = function (event) {
  24.               // 2. 接收ets侧发送过来的消息.
  25.               var msg = 'Got message from ets:';
  26.               var result = event.data;
  27.               if (typeof(result) === 'string') {
  28.                 console.info(`received string message from html5, string is: ${result}`);
  29.                 msg = msg + result;
  30.               } else if (typeof(result) === 'object') {
  31.                 if (result instanceof ArrayBuffer) {
  32.                   console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
  33.                   msg = msg + 'lenght is ' + result.byteLength;
  34.                 } else {
  35.                   console.info('not support');
  36.                 }
  37.               } else {
  38.                 console.info('not support');
  39.               }
  40.               output.innerHTML = msg;
  41.             }
  42.         }
  43.     }
  44. })
  45. // 3. 使用h5Port往ets侧发送消息.
  46. function PostMsgToEts(data) {
  47.     if (h5Port) {
  48.       h5Port.postMessage(data);
  49.     } else {
  50.       console.error('h5Port is null, Please initialize first');
  51.     }
  52. }
  53. </script>
  54. </html>

?3.2 应用侧

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController();
  8.   ports: web_webview.WebMessagePort[];
  9.   @State sendFromEts: string = 'Send this message from ets to HTML';
  10.   @State receivedFromHtml: string = 'Display received message send from HTML';
  11.  
  12.   build() {
  13.     Column() {
  14.       // 展示接收到的来自HTML的内容
  15.       Text(this.receivedFromHtml)
  16.       // 输入框的内容发送到html
  17.       TextInput({placeholder: 'Send this message from ets to HTML'})
  18.         .onChange((value: string) => {
  19.           this.sendFromEts = value;
  20.         })
  21.  
  22.       Button('postMessage')
  23.         .onClick(() => {
  24.           try {
  25.             // 1、创建两个消息端口。
  26.             this.ports = this.controller.createWebMessagePorts();
  27.             // 2、在应用侧的消息端口(如端口1)上注册回调事件。
  28.             this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
  29.               let msg = 'Got msg from HTML:';
  30.               if (typeof(result) === 'string') {
  31.                 console.info(`received string message from html5, string is: ${result}`);
  32.                 msg = msg + result;
  33.               } else if (typeof(result) === 'object') {
  34.                 if (result instanceof ArrayBuffer) {
  35.                   console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
  36.                   msg = msg + 'lenght is ' + result.byteLength;
  37.                 } else {
  38.                   console.info('not support');
  39.                 }
  40.               } else {
  41.                 console.info('not support');
  42.               }
  43.               this.receivedFromHtml = msg;
  44.             })
  45.             // 3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。
  46.             this.controller.postMessage('__init_port__', [this.ports[0]], '*');
  47.           } catch (error) {
  48.             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
  49.           }
  50.         })
  51.  
  52.       // 4、使用应用侧的端口给另一个已经发送到html的端口发送消息。
  53.       Button('SendDataToHTML')
  54.         .onClick(() => {
  55.           try {
  56.             if (this.ports && this.ports[1]) {
  57.               this.ports[1].postMessageEvent(this.sendFromEts);
  58.             } else {
  59.               console.error(`ports is null, Please initialize first`);
  60.             }
  61.           } catch (error) {
  62.             console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  63.           }
  64.         })
  65.       Web({ src: $rawfile('xxx.html'), controller: this.controller })
  66.     }
  67.   }
  68. }

在这里插入图片描述

 ?写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing?，不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新VIP学习资料，请点击→全套鸿蒙HarmonyOS学习资料
  • 或者关注小编后私信回复【666】也可获取资料哦~~

最新鸿蒙Next全套学习资料请扫码
微信名片
注：本文转载自blog.csdn.net的蜀道山QAQ的文章"https://blog.csdn.net/shudaoshanQAQ/article/details/135490911"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！