鴻蒙HarmonyOS實戰-Web元件（請求響應和頁面除錯）

蜀道山QAQ發表於2024-06-01
鴻蒙Web元件除錯

🚀前言

請求響應是指客戶端傳送請求給伺服器，伺服器接收到請求後返回的響應。響應包含了伺服器處理請求的結果，並將結果返回給客戶端。

頁面除錯是指在開發過程中，透過除錯工具分析頁面的執行狀況，查詢問題和修復錯誤。常用的頁面除錯工具包括瀏覽器的開發者工具和除錯外掛，可以檢查頁面的網路請求、HTML程式碼、CSS樣式和JavaScript程式碼等，並對其進行除錯和修改。

請求響應和頁面除錯在Web開發中都非常重要。透過分析請求和響應的資訊，開發人員可以瞭解每個請求的狀態、資料和處理結果，有助於排查和解決問題。而頁面除錯則可以幫助開發人員快速定位和修復頁面上的錯誤，最佳化頁面的效能和使用者體驗。

🚀一、請求響應和頁面除錯

🔎1.請求響應

🦋1.1 前端程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>example</title>
</head>
<body>
<!-- 頁面資源請求 -->
<a href="https://www.example.com/test.html">intercept test!</a>
</body>
</html>

🦋1.2 應用側程式碼

在HarmonyOS中，onInterceptRequest()是一個介面，用於攔截網路請求並進行處理。它是HarmonyOS的網路框架提供的一種擴充套件機制，可以在網路請求發起之前攔截請求，並進行一些自定義的操作。

當一個網路請求發起時，HarmonyOS的網路框架會首先呼叫onInterceptRequest()介面。在該介面中，你可以對請求進行一些處理，例如修改請求的URL、新增請求頭、修改請求引數等。還可以在此處攔截請求，返回自定義的響應結果，以實現一些常見的操作，如模擬網路請求，攔截廣告請求等。

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  responseResource: WebResourceResponse = new WebResourceResponse()
  // 開發者自定義響應資料
  @State webdata: string = "<!DOCTYPE html>\n" +
  "<html>\n"+
  "<head>\n"+
  "<title>intercept test</title>\n"+
  "</head>\n"+
  "<body>\n"+
  "<h1>intercept test</h1>\n"+
  "</body>\n"+
  "</html>"
  build() {
    Column() {
      Web({ src: $rawfile('local.html'), controller: this.controller })
        .onInterceptRequest((event?: Record<string, WebResourceRequest>): WebResourceResponse => {
          if (!event) {
            return new WebResourceResponse();
          }
          let mRequest: WebResourceRequest = event.request as WebResourceRequest;
          console.info('TAGLee: url:'+ mRequest.getRequestUrl());
          //攔截頁面請求，如果載入的url判斷與目標url一致則返回自定義載入結果webdata
          if(mRequest.getRequestUrl() === 'https://www.example.com/test.html'){
            // 構造響應資料
            this.responseResource.setResponseData(this.webdata);
            this.responseResource.setResponseEncoding('utf-8');
            this.responseResource.setResponseMimeType('text/html');
            this.responseResource.setResponseCode(200);
            this.responseResource.setReasonMessage('OK');
            return this.responseResource;
          }
          return;
        })
    }
  }
}

image

🔎2.頁面除錯

1、開啟除錯

在HarmonyOS中，setWebDebuggingAccess()介面用於設定是否允許除錯Web檢視。

setWebDebuggingAccess()介面的語法如下：

setWebDebuggingAccess(boolean debuggable);

引數debuggable為boolean型，表示是否允許除錯Web檢視。如果debuggable為true，則允許除錯Web檢視；如果debuggable為false，則禁止除錯Web檢視。

此介面需要在合適的地方呼叫，例如在應用程式的入口Activity中或者WebView的初始化程式碼中呼叫。呼叫該方法後，系統將根據引數的值來決定是否允許除錯Web檢視。

2、 配置埠

// 新增對映 
hdc fport tcp:9222 tcp:9222 
// 檢視對映 
hdc fport ls

3、在PC端chrome瀏覽器位址列中輸入chrome://inspect/#devices，頁面識別到裝置後，就可以開始頁面除錯

image

🚀寫在最後

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

image

相關文章