婷婷五月天av,你懂的一区二区三区

【HarmonyOS 5】鴻蒙Web組件和內(nèi)嵌網(wǎng)頁(yè)雙向通信DEMO示例

##鴻蒙開(kāi)發(fā)能力 ##HarmonyOS SDK應(yīng)用服務(wù)##鴻蒙金融類應(yīng)用（金融理財(cái)#

一、前言

在 ArkUI 開(kāi)發(fā)中，Web 組件（Web）允許開(kāi)發(fā)者在應(yīng)用內(nèi)嵌入網(wǎng)頁(yè)，實(shí)現(xiàn)混合開(kāi)發(fā)場(chǎng)景。

本文將通過(guò)完整 DEMO，詳解如何通過(guò)WebviewController實(shí)現(xiàn) ArkUI 與內(nèi)嵌網(wǎng)頁(yè)的雙向通信，涵蓋 ArkUI 調(diào)用網(wǎng)頁(yè) JS、網(wǎng)頁(yè)調(diào)用 ArkUI 對(duì)象的核心技術(shù)點(diǎn)。

二、雙向通信實(shí)現(xiàn)原理

1、雙向通信概念
Web 到 ArkUI（反向通信）通過(guò)registerJavaScriptProxy將 ArkUI 對(duì)象注冊(cè)到網(wǎng)頁(yè)的window對(duì)象，允許網(wǎng)頁(yè)通過(guò)window.xxx調(diào)用 ArkUI 暴露的方法。?

ArkUI 到 Web（正向通信）通過(guò)runJavaScript執(zhí)行網(wǎng)頁(yè) JS 代碼，支持回調(diào)獲取返回值，實(shí)現(xiàn)原生代碼調(diào)用網(wǎng)頁(yè)函數(shù)。

2、雙向通信流程圖
ArkUI Web
┌──────────────┐ ┌──────────────┐
│ registerJS ├─────────────? window.objName │
│ (反向注冊(cè)) │ ├──────────────┤
├──────────────┤ │ call test() │
│ runJavaScript├─────────────? execute JS code │
│ (正向調(diào)用) │ ├──────────────┤
└──────────────┘ └──────────────┘

三、雙向通信實(shí)現(xiàn)步驟

1、ArkUI 定義可被網(wǎng)頁(yè)調(diào)用的對(duì)象
創(chuàng)建一個(gè)TestObj類，聲明允許網(wǎng)頁(yè)調(diào)用的方法（白名單機(jī)制）：

class TestObj {
  // 網(wǎng)頁(yè)可調(diào)用的方法1：返回字符串
  test(): string {
    return "ArkUI Web Component";
  }

  // 網(wǎng)頁(yè)可調(diào)用的方法2：打印日志
  toString(): void {
    console.log('Web Component toString');
  }

  // 網(wǎng)頁(yè)可調(diào)用的方法3：接收網(wǎng)頁(yè)消息
  receiveMessageFromWeb(message: string): void {
    console.log(`Received from web: ${message}`);
  }
}

2、ArkUI 組件核心代碼
初始化控制器與狀態(tài)

@Entry
@Component
struct WebComponent {
  // Webview控制器
  controller: webview.WebviewController = new webview.WebviewController();
  // 注冊(cè)到網(wǎng)頁(yè)的ArkUI對(duì)象
  @State testObj: TestObj = new TestObj();
  // 注冊(cè)名稱（網(wǎng)頁(yè)通過(guò)window.[name]訪問(wèn)）
  @State regName: string = 'objName';
  // 接收網(wǎng)頁(yè)返回?cái)?shù)據(jù)
  @State webResult: string = '';

  build() { /* 組件布局與交互邏輯 */ }
}

布局與交互按鈕，添加三個(gè)核心功能按鈕：

Column() {
  // 顯示網(wǎng)頁(yè)返回?cái)?shù)據(jù)
  Text(`Web返回?cái)?shù)據(jù)：${this.webResult}`).fontSize(16).margin(10);

  // 1. 注冊(cè)ArkUI對(duì)象到網(wǎng)頁(yè)
  Button('注冊(cè)到Window')
    .onClick(() = > {
      this.controller.registerJavaScriptProxy(
        this.testObj,  // ArkUI對(duì)象
        this.regName,  // 網(wǎng)頁(yè)訪問(wèn)名稱
        ["test", "toString", "receiveMessageFromWeb"]  // 允許調(diào)用的方法白名單
      );
    })

  // 2. ArkUI調(diào)用網(wǎng)頁(yè)JS
  Button('調(diào)用網(wǎng)頁(yè)函數(shù)')
    .onClick(() = > {
      this.controller.runJavaScript(
        'webFunction("Hello from ArkUI!")',  // 執(zhí)行網(wǎng)頁(yè)JS代碼
        (error, result) = > {  // 回調(diào)處理返回值
          if (!error) this.webResult = result || '無(wú)返回值';
        }
      );
    })

  // 3. Web組件加載
  Web({ src: $rawfile('index.html'), controller: this.controller })
    .javaScriptAccess(true)  // 開(kāi)啟JS交互權(quán)限
    .onPageEnd(() = > {  // 頁(yè)面加載完成時(shí)觸發(fā)
      // 頁(yè)面加載后自動(dòng)調(diào)用網(wǎng)頁(yè)測(cè)試函數(shù)
      this.controller.runJavaScript('initWebData()');
    })
}

3. registerJavaScriptProxy的實(shí)際作用是，將 ArkUI 對(duì)象綁定到網(wǎng)頁(yè)window，實(shí)現(xiàn)反向通信。

registerJavaScriptProxy(
  obj: Object,        // ArkUI中定義的對(duì)象
  name: string,       // 網(wǎng)頁(yè)訪問(wèn)的名稱（如window.name）
  methods: string[]   // 允許調(diào)用的方法白名單（嚴(yán)格匹配方法名）
);

源碼示例

完整代碼已上傳至Gitee 倉(cāng)庫(kù)，歡迎下載調(diào)試！如果有任何問(wèn)題，歡迎在評(píng)論區(qū)留言交流～

項(xiàng)目結(jié)構(gòu)
├── xxx.ets # ArkUI組件代碼
└── index.html # 內(nèi)嵌網(wǎng)頁(yè)文件
圖像 20.jpeg

WebViewPage.ets

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

class TestObj {
  constructor() {
  }

  test(): string {
    return "ArkUI Web Component";
  }

  toString(): void {
    console.log('Web Component toString');
  }

  receiveMessageFromWeb(message: string): void {
    console.log(`Received message from web: ${message}`);
  }
}

@Entry
@Component
struct WebViewPage {
  controller: webview.WebviewController = new webview.WebviewController();
  @State testObjtest: TestObj = new TestObj();
  @State name: string = 'objName';
  @State webResult: string = '';

  build() {
    Column() {
      Text(this.webResult).fontSize(20)
      Button('refresh')
        .onClick(() = > {
          try {
            this.controller.refresh();
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Button('Register JavaScript To Window')
        .onClick(() = > {
          try {
            this.controller.registerJavaScriptProxy(this.testObjtest, this.name, ["test", "toString", "receiveMessageFromWeb"]);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Button('deleteJavaScriptRegister')
        .onClick(() = > {
          try {
            this.controller.deleteJavaScriptRegister(this.name);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Button('Send message to web')
        .onClick(() = > {
          try {
            this.controller.runJavaScript(
              'receiveMessageFromArkUI("Hello from ArkUI!")',
              (error, result) = > {
                if (error) {
                  console.error(`run JavaScript error, ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
                  return;
                }
                console.info(`Message sent to web result: ${result}`);
              }
            );
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Button('Get data from web')
        .onClick(() = > {
          try {
            this.controller.runJavaScript(
              'getWebPageData()',
              (error, result) = > {
                if (error) {
                  console.error(`run JavaScript error, ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
                  return;
                }
                if (result) {
                  this.webResult = result;
                  console.info(`Data from web: ${result}`);
                }
              }
            );
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
        .onPageEnd(e = > {
          try {
            this.controller.runJavaScript(
              'test()',
              (error, result) = > {
                if (error) {
                  console.error(`run JavaScript error, ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
                  return;
                }
                if (result) {
                  this.webResult = result;
                  console.info(`The test() return value is: ${result}`);
                }
              }
            );
            if (e) {
              console.info('url: ', e.url);
            }
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
        .width("100%")
        .height("50%")
    }
    .width("100%")
    .height("100%")
    .backgroundColor(Color.Black)
  }
}

index.html

< !DOCTYPE html >
< html lang="en" >

< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < title >Web Communication< /title >
< /head >


"callArkUIMethod()"< /span?> >Call ArkUI Method< /button >
"sendMessageToArkUI()"< /span?> >Send message to ArkUI< /button >
"messageFromArkUI">
< script >
    function callArkUIMethod() {
        const result = window.objName.test();
        console.log("Result from ArkUI: ", result);
    }

    function sendMessageToArkUI() {
        window.objName.receiveMessageFromWeb('Hello from web!');
    }

    function receiveMessageFromArkUI(message) {
        const messageDiv = document.getElementById('messageFromArkUI');
        messageDiv.textContent = `Received message from ArkUI: ${message}`;
    }

    function getWebPageData() {
        return "Data from web page";
    }

    function test() {
        return "Test function result from web";
    }
< /script >
< /body >

< /html >

注意

組件銷(xiāo)毀時(shí)調(diào)用deleteJavaScriptRegister(name)取消注冊(cè)，避免內(nèi)存泄漏：

onDestroy() {
  this.controller.deleteJavaScriptRegister(this.regName);
}

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴