使用Web組件加載頁面

2024-02-16 13:37 更新

頁面加載是Web組件的基本功能。根據(jù)頁面加載數(shù)據(jù)來源可以分為三種常用場景，包括加載網(wǎng)絡(luò)頁面、加載本地頁面、加載HTML格式的富文本數(shù)據(jù)。

頁面加載過程中，若涉及網(wǎng)絡(luò)資源獲取，需要配置ohos.permission.INTERNET網(wǎng)絡(luò)訪問權(quán)限。

加載網(wǎng)絡(luò)頁面

開發(fā)者可以在Web組件創(chuàng)建的時候指定默認(rèn)加載的網(wǎng)絡(luò)頁面 。在默認(rèn)頁面加載完成后，如果開發(fā)者需要變更此Web組件顯示的網(wǎng)絡(luò)頁面，可以通過調(diào)用loadUrl()接口加載指定網(wǎng)絡(luò)網(wǎng)頁。

在下面的示例中，在Web組件加載完“www.example.com”頁面后，開發(fā)者可通過loadUrl接口將此Web組件顯示頁面變更為“www.example1.com”。

  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.       Button('loadUrl')
  12.         .onClick(() => {
  13.           try {
  14.             // 點擊按鈕時，通過loadUrl，跳轉(zhuǎn)到www.example1.com
  15.             this.webviewController.loadUrl('www.example1.com');
  16.           } catch (error) {
  17.             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
  18.           }
  19.         })
  20.       // 組件創(chuàng)建時，加載www.example.com
  21.       Web({ src: 'www.example.com', controller: this.webviewController})
  22.     }
  23.   }
  24. }

加載本地頁面

將本地頁面文件放在應(yīng)用的rawfile目錄下，開發(fā)者可以在Web組件創(chuàng)建的時候指定默認(rèn)加載的本地頁面 ，并且加載完成后可通過調(diào)用loadUrl()接口變更當(dāng)前Web組件的頁面。

在下面的示例中展示加載本地頁面文件的方法：

  • 將資源文件放置在應(yīng)用的resources/rawfile目錄下。
    圖1 資源文件路徑
  • 應(yīng)用側(cè)代碼
    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.       Button('loadUrl')
    12.         .onClick(() => {
    13.           try {
    14.             // 點擊按鈕時，通過loadUrl，跳轉(zhuǎn)到local1.html
    15.             this.webviewController.loadUrl($rawfile("local1.html"));
    16.           } catch (error) {
    17.             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
    18.           }
    19.         })
    20.       // 組件創(chuàng)建時，通過$rawfile加載本地文件local.html
    21.       Web({ src: $rawfile("local.html"), controller: this.webviewController })
    22.     }
    23.   }
    24. }
  • local.html頁面代碼。
    1. <!-- local.html -->
    2. <!DOCTYPE html>
    3. <html>
    4.   <body>
    5.     <p>Hello World</p>
    6.   </body>
    7. </html>

加載HTML格式的文本數(shù)據(jù)

Web組件可以通過loadData接口實現(xiàn)加載HTML格式的文本數(shù)據(jù)。當(dāng)開發(fā)者不需要加載整個頁面，只需要顯示一些頁面片段時，可通過此功能來快速加載頁面。

  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. 

  9.   build() {
  10.     Column() {
  11.       Button('loadData')
  12.         .onClick(() => {
  13.           try {
  14.             // 點擊按鈕時，通過loadData，加載HTML格式的文本數(shù)據(jù)
  15.             this.controller.loadData(
  16.               "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
  17.               "text/html",
  18.               "UTF-8"
  19.             );
  20.           } catch (error) {
  21.             console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
  22.           }
  23.         })
  24.       // 組件創(chuàng)建時，加載www.example.com
  25.       Web({ src: 'www.example.com', controller: this.controller })
  26.     }
  27.   }
  28. }
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號