鴻蒙HarmonyOS實戰-Web元件（基本使用和屬性）

蜀道山QAQ發表於2024-05-28
鴻蒙Web元件

🚀前言

Web是一種基於網際網路的技術和資源的網路服務系統。它是指由許多互連的計算機組成的全球性計算機網路，使使用者能夠透過瀏覽器訪問和互動式使用各種資訊和資源，如網頁、文件、圖片、影片、音訊等。透過Web，使用者可以瀏覽網頁、傳送電子郵件、參與線上社交網路、進行線上購物等各種活動。Web的核心技術包括超文字傳輸協議（HTTP），超文字標記語言（HTML）和統一資源定位器（URL）。

🚀一、Web元件詳解

🔎1.概述

HarmonyOS中的Web元件是一種基於Web技術的元件，可以在HarmonyOS應用程式中嵌入Web內容。透過使用Web元件，開發人員可以將Web頁面或應用程式嵌入到HarmonyOS應用程式中，實現更豐富的使用者介面和功能。

Web元件提供了一系列的API和工具，開發人員可以使用這些API和工具來控制和操作內嵌的Web頁面。例如，開發人員可以使用JavaScript和CSS來操作和樣式化Web頁面的元素，還可以使用HTML5的各種功能來實現各種互動和媒體功能。

Web元件還支援與HarmonyOS應用程式的其他部分進行通訊和互動。開發人員可以使用JavaScript和HarmonyOS的API來實現應用程式的功能，例如訪問裝置的感測器、呼叫系統的功能等。此外，Web元件還可以透過與應用程式的其他元件進行互動來實現更復雜的功能，例如在應用程式的其他元件中顯示Web頁面的內容、傳送和接收訊息等。

image

🔎2.使用Web元件載入頁面

🦋2.1 載入網路頁面

1、許可權配置

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET" // 使用網路許可權
  }
]

image

2、載入網頁

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Button('愚公部落格首頁')
        .onClick(() => {
          try {
            // 點選按鈕時，透過loadUrl，跳轉到www.example1.com
            this.controller.loadUrl('blog.csdn.net/aa2528877987');
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 元件建立時，載入www.example.com
      Web({ src: 'www.baidu.com', controller: this.controller})
    }
  }
}

image

image

🦋2.2 載入本地頁面

1、ets 檔案

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // 點選按鈕時，透過loadUrl，跳轉到local1.html
            this.webviewController.loadUrl($rawfile("local1.html"));
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 元件建立時，透過$rawfile載入本地檔案local.html
      Web({ src: $rawfile("local.html"), controller: this.webviewController })
    }
  }
}

2、本地頁面

<!-- local.html -->
<!DOCTYPE html>
<html>
  <body>
    <p>Hello World</p>
  </body>
</html>

image

🦋2.3 載入HTML格式的文字資料

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            // 點選按鈕時，透過loadData，載入HTML格式的文字資料
            this.controller.loadData(
              "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      // 元件建立時，載入www.example.com
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

image

🔎3.設定基本屬性和事件

🦋3.1 設定深色模式

透過darkMode()介面可以配置不同的深色模式。

  • WebDarkMode.Off模式表示關閉深色模式。

  • WebDarkMode.On表示開啟深色模式，且深色模式跟隨前端頁面。

  • WebDarkMode.Auto表示開啟深色模式，且深色模式跟隨系統。

  • forceDarkAccess()介面可將前端頁面強制配置深色模式，且深色模式不跟隨前端頁面和系統。配置該模式時候，需要將深色模式配置成WebDarkMode.On。

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State mode: WebDarkMode = WebDarkMode.On;
  @State access: boolean = true;
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .darkMode(this.mode)
        .forceDarkAccess(this.access)
    }
  }
}

image

🦋3.2 上傳檔案

HarmonyOS中Web元件的onShowFileSelector()方法用於顯示檔案選擇器，讓使用者選擇檔案。它可以用於在應用中上傳檔案或選擇本地檔案等操作。

// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      // 載入本地local.html頁面
      Web({ src: $rawfile('local.html'), controller: this.controller })
        .onShowFileSelector((event) => {
            // 開發者設定要上傳的檔案路徑
           let fileList: Array<string> = [
              'xxx/test.png',
           ]
           event.result.handleFileList(fileList)
           return true;
        })
    }
  }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>

<body>
// 點選檔案上傳按鈕
<input type="file" value="file"></br>
</body>
</html>

image

🦋3.3 在新視窗中開啟頁面

開發者可以使用multiWindowAccess()介面來設定網頁是否可以在新視窗中開啟。透過呼叫此介面並傳入相應的引數，可以控制網頁是否允許使用新視窗。

當網頁請求在新視窗中開啟時，應用將收到Web元件的新視窗事件，可以透過onWindowNew()介面來處理此事件。在此介面中，開發者可以根據需要建立新的視窗來處理Web元件的視窗請求。

// xxx.ets
import web_webview from '@ohos.web.webview'

//在同一page頁有兩個web元件。在WebComponent新開視窗時，會跳轉到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
controller?: CustomDialogController
webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
build() {
    Column() {
      Web({ src: "", controller: this.webviewController1 })
        .javaScriptAccess(true)
        .multiWindowAccess(false)
        .onWindowExit(()=> {
          console.info("NewWebViewComp onWindowExit")
          if (this.controller) {
            this.controller.close()
          }
        })
      }
  }
}

@Entry
@Component
struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    dialogController: CustomDialogController | null = null
    build() {
      Column() {
        Web({ src:$rawfile("window.html"), controller: this.controller })
          .javaScriptAccess(true)
         //需要使能multiWindowAccess
          .multiWindowAccess(true)
          .allowWindowOpenMethod(true)
          .onWindowNew((event) => {
          if (this.dialogController) {
            this.dialogController.close()
          }
          let popController:web_webview.WebviewController = new web_webview.WebviewController()
          this.dialogController = new CustomDialogController({
            builder: NewWebViewComp({webviewController1: popController})
          })
          this.dialogController.open()
          //將新視窗對應WebviewController返回給Web核心。
          //如果不需要開啟新視窗請呼叫event.handler.setWebController介面設定成null。
          //若不呼叫event.handler.setWebController介面，會造成render程序阻塞。
          event.handler.setWebController(popController)
        })
    }
  }
}

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WindowEvent</title>
</head>
<body>
<input type="button" value="新視窗中開啟網頁" onclick="OpenNewWindow()">
<script type="text/javascript">
    function OpenNewWindow()
    {
        let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
        openedWindow.document.write("<p>這是我的視窗</p>");
        openedWindow.focus();
    }
</script>
</body>
</html>

🦋3.4 管理位置許可權

對於某個網站進行位置許可權管理的過程中，開發者可以透過onGeolocationShow()介面來向使用者請求位置許可權。該介面會觸發一個位置許可權請求對話方塊，使用者可以選擇是否授權該網站獲取裝置的位置資訊。

Web元件會根據使用者的選擇，將許可權授予或拒絕。如果許可權被授予，前端頁面將能夠獲取裝置的位置資訊。如果許可權被拒絕，前端頁面將無法獲取裝置的位置資訊。

在進行位置許可權請求之前，開發者需要在應用的配置檔案中新增ohos.permission.LOCATION許可權，以確保應用有許可權獲取裝置的位置資訊。

<!DOCTYPE html>
<html>
<body>
<p id="locationInfo">位置資訊</p>
<button onclick="getLocation()">獲取位置</button>
<script>
var locationInfo=document.getElementById("locationInfo");
function getLocation(){
  if (navigator.geolocation) {
    <!-- 前端頁面訪問裝置地理位置 -->
    navigator.geolocation.getCurrentPosition(showPosition);
  }
}
function showPosition(position){
  locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Web({ src:$rawfile('getLocation.html'), controller:this.controller })
        .geolocationAccess(true)
        .onGeolocationShow((event) => {  // 地理位置許可權申請通知
          AlertDialog.show({
            title: '位置許可權請求',
            message: '是否允許獲取位置資訊',
            primaryButton: {
              value: 'cancel',
              action: () => {
                event.geolocation.invoke(event.origin, false, false);   // 不允許此站點地理位置許可權請求
              }
            },
            secondaryButton: {
              value: 'ok',
              action: () => {
                event.geolocation.invoke(event.origin, true, false);    // 允許此站點地理位置許可權請求
              }
            },
            cancel: () => {
              event.geolocation.invoke(event.origin, false, false);   // 不允許此站點地理位置許可權請求
            }
          })
        })
    }
  }
}

🚀寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 更多鴻蒙最新技術知識點，請關注作者部落格：https://t.doruo.cn/14DjR1rEY

image

相關文章