|
@@ -0,0 +1,76 @@
|
|
|
+// xxx.ets
|
|
|
+import web_webview from '@ohos.web.webview';
|
|
|
+import business_error from '@ohos.base';
|
|
|
+
|
|
|
+@Entry
|
|
|
+@Component
|
|
|
+struct WebComponent {
|
|
|
+ controller: web_webview.WebviewController = new web_webview.WebviewController();
|
|
|
+ ports: web_webview.WebMessagePort[] = [];
|
|
|
+ @State sendFromEts: string = 'Send this message from ets to HTML';
|
|
|
+ @State receivedFromHtml: string = 'Display received message send from HTML';
|
|
|
+
|
|
|
+ build() {
|
|
|
+ Column() {
|
|
|
+ // 展示接收到的来自HTML的内容
|
|
|
+ Text(this.receivedFromHtml)
|
|
|
+ // 输入框的内容发送到html
|
|
|
+ TextInput({ placeholder: 'Send this message from ets to HTML' })
|
|
|
+ .onChange((value: string) => {
|
|
|
+ this.sendFromEts = value;
|
|
|
+ })
|
|
|
+
|
|
|
+ Button('initPorts')
|
|
|
+ .onClick(() => {
|
|
|
+ // 1、创建两个消息端口。
|
|
|
+ this.ports = this.controller.createWebMessagePorts();
|
|
|
+ })
|
|
|
+
|
|
|
+ Button('postMessage')
|
|
|
+ .onClick(() => {
|
|
|
+ try {
|
|
|
+
|
|
|
+ // 2、在应用侧的消息端口(如端口1)上注册回调事件。
|
|
|
+ this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
|
|
|
+ let msg = 'Got msg from HTML:';
|
|
|
+ if (typeof (result) == "string") {
|
|
|
+ console.log("received string message from html5, string is:" + result);
|
|
|
+ msg = msg + result;
|
|
|
+ } else if (typeof (result) == "object") {
|
|
|
+ if (result instanceof ArrayBuffer) {
|
|
|
+ console.log("received arraybuffer from html5, length is:" + result.byteLength);
|
|
|
+ msg = msg + "length is " + result.byteLength;
|
|
|
+ } else {
|
|
|
+ console.log("not support");
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log("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}`);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 4、使用应用侧的端口给另一个已经发送到html的端口发送消息。
|
|
|
+ Button('SendDataToHTML')
|
|
|
+ .onClick(() => {
|
|
|
+ try {
|
|
|
+ if (this.ports && this.ports[1]) {
|
|
|
+ this.ports[1].postMessageEvent(this.sendFromEts);
|
|
|
+ } else {
|
|
|
+ console.error(`ports is null, Please initialize first`);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ let e: business_error.BusinessError = error as business_error.BusinessError;
|
|
|
+ console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ Web({ src: $rawfile('message.html'), controller: this.controller })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|