HarmonyOS H5和应用侧数据交互

1、H5调用应用侧。

2、应用侧调用H5。

3、H5和应用侧数据通道连接。

4、web拦截应用跳转和自定义请求响应。

HarmonyOS

zxjiu

2024-10-24 13:18:39

浏览

回答 1

按赞同

按时间

FengTianYa

以下是H5和web交互的demo：

import web_webview from '@ohos.web.webview';  
import business_error from '@ohos.base';  
@Entry  
@Component  
struct Web2Page {  
  controller: web_webview.WebviewController = new web_webview.WebviewController();  
  ports: web_webview.WebMessagePort[] = [];  
  @State sendFromEts: string = '发送到H5的数据：';  
  @State receivedFromHtml: string = '接收H5的信息：';  
  build() {  
    Column() {  
      // 展示接收到的来自HTML的内容  
      Text(this.receivedFromHtml)  
      // 输入框的内容发送到HTML  
      TextInput({placeholder: '发送消息到H5'})  
        .onChange((value: string) => {  
          this.sendFromEts = value;  
        })  
      Button('发送至H5')  
        .onClick(() => {  
          try {  
            // 1、创建两个消息端口。  
            this.ports = this.controller.createWebMessagePorts();  
            // 2、在应用侧的消息端口(如端口1)上注册回调事件。  
            this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {  
              let msg = '来自H5:';  
              if (typeof(result) === 'string') {  
                console.info(`接受至H5: ${result}`);  
                msg = msg + result;  
              } else if (typeof(result) === 'object') {  
                if (result instanceof ArrayBuffer) {  
                  console.info(`接收h5: ${result.byteLength}`);  
                  msg = msg + 'lenght is ' + result.byteLength;  
                } else {  
                  console.info('not support');  
                }  
              } else {  
                console.info('not support');  
              }  
              this.receivedFromHtml = msg;  
            })  
            // 3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。  
            this.controller.postMessage('__init_port__', [this.ports[0]], '*');  
          } catch (error) {  
            let e: business_error.BusinessError = error as business_error.BusinessError;  
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);  
          }  
          try {  
            if (this.ports && this.ports[1]) {  
              this.ports[1].postMessageEvent(this.sendFromEts);  
            } else {  
              console.error(`ports 为空`);  
            }  
          } 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.controller })  
    }  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.

这个是web端的代码。

<!DOCTYPE html>  
<html>  
<head>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>H5和应用侧数据交互</title>  
</head>  
<body>  
<h1>H5和应用侧数据交互案例</h1>  
<div>  
    <input type="button" value="Send" onclick="PostMsgToEts(msgFromJS.value);"/><br/>  
    <input id="msgFromJS" type="text" value="请输入您要发送至ets的内容"/><br/>  
</div>  
<p class="output">显示收到的内容和发送ets</p>  
</body>  
<script>  
    var h5Port;  
    var output = document.querySelector('.output');  
    window.addEventListener('message', function (event) {  
        if (event.data === '__init_port__') {  
            if (event.ports[0] !== null) {  
                h5Port = event.ports[0]; // 1. 保存从应用侧发送过来的端口。  
                h5Port.onmessage = function (event) {  
                  // 2. 接收ets侧发送过来的消息。  
                  var msg = 'ets得到的内容:';  
                  var result = event.data;  
                  if (typeof(result) === 'string') {  
                    console.info(`收到H5的内容, string is: ${result}`);  
                    msg = msg + result;  
                  } else if (typeof(result) === 'object') {  
                    if (result instanceof ArrayBuffer) {  
                      console.info(`收到H5, length is: ${result.byteLength}`);  
                      msg = msg + 'lenght is ' + result.byteLength;  
                    } else {  
                      console.info('not support');  
                    }  
                  } else {  
                    console.info('not support');  
                  }  
                  output.innerHTML = msg;  
                }  
            }  
        }  
    })  
    // 3. 使用h5Port向应用侧发送消息。  
    function PostMsgToEts(data) {  
        if (h5Port) {  
          h5Port.postMessage(data);  
        } else {  
          console.error('H5数据为空');  
        }  
    }  
</script>  
</html>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.

这个是h5端，请在rawfile下方新建一个index.html。

以下是自定义web定义请求的方法：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-resource-interception-request-mgmt-V5

2024-10-24 15:32:33

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS H5和应用侧数据交互

订阅鸿蒙技术特刊，精选内容抢先看