HarmonyOS開發案例：【Web組件實戰】

介紹

使用ArkTS語言實現一個簡單的免登錄過程，向大家介紹基本的cookie管理操作。主要包含以下功能：

1. 獲取指定url對應的cookie的值。
2. 設置cookie。
3. 清除所有cookie。
4. 免登錄訪問賬戶中心。

原理說明

本應用旨在說明Web組件中cookie的管理操作。結合應用彈框和免登錄兩種方式進行講解。

• 應用彈框
  若用戶已通過“設置cookie”完成cookie寫操作，點擊應用首頁的“獲取cookie”按鈕，則應用彈窗中會帶有“info=測試cookie寫入”的信息。若用戶未進行寫操作，則彈窗信中無對應信息。
• 免登錄
  若用戶在應用首頁完成登錄操作，則點擊“驗證cookies”按鈕，界面會跳轉至“關于”界面；若用戶此前未完成登錄操作，則會跳轉至登錄界面。這里借助真實的登錄過程，體現了Web組件自動存儲登錄后的會話cookie，并在整個應用中生效的能力。

流程如圖所示：

相關概念

• [Web]：提供網頁顯示能力的組件。
• [WebCookie]：WebCookie可以控制Web組件中的cookie的各種行為，其中每個應用中的所有Web組件共享一個WebCookie。通過controller方法中的getCookieManager方法可以獲取WebCookie對象，進行后續的cookie管理操作。

相關權限

本篇Codelab使用的是在線網頁，需添加網絡權限：ohos.permission.INTERNET。在配置文件module.json5中添加對應信息：

{
  "module": {
    "name": "entry",
    ...
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]
  }
}

環境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。

硬件要求

• 開發板類型：[潤和RK3568開發板]。
• OpenHarmony系統：3.2 Release。

環境搭建

完成本篇Codelab我們首先要完成開發環境的搭建，本示例以RK3568開發板為例，參照以下步驟進行：

1. [獲取OpenHarmony系統版本]：標準系統解決方案（二進制）。以3.2 Release版本為例：
   
2. 搭建燒錄環境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發板的燒錄]
3. 搭建開發環境。
   1. 開始前請參考[工具準備]，完成DevEco Studio的安裝和開發環境配置。
   2. 開發環境配置完成后，請參考[使用工程向導]創建工程（模板選擇“Empty Ability”）。
   3. 工程創建完成后，選擇使用[真機進行調測]。
   4. 鴻蒙開發指導文檔：[qr23.cn/FBD4cY]

代碼結構解讀

本篇Codelab只對核心代碼進行講解，完整代碼可以直接從gitee獲取。

├──entry/src/main/ets               // 代碼區
│  ├──common                         
│  │  ├──constants                   
│  │  │  └──CommonConstant.ets      // 常量類
│  │  └──utils                       
│  │     ├──DialogUtil.ets          // 彈框工具類 
│  │     └──Logger.ets              // 日志工具類
│  ├──entryability                    
│  │  └──EntryAbility.ts            // 程序入口類
│  ├──pages                          
│  │  ├──Verify.ets                 // 免登錄驗證界面
│  │  └──WebIndex.ets               // 應用首頁
│  └──view                                
│     └──LinkButton.ets             // 鏈接按鈕組件
└──entry/src/main/resources         // 應用資源目錄

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

實現步驟

應用首頁

首次打開應用時，應用首頁的Web組件內呈現的是登錄界面。用戶完成登錄操作后，會跳轉至賬號中心界面。在用戶不點擊“刪除cookies”按鈕的情況下，用戶關閉并再次打開應用，首頁仍會跳轉至賬號中心界面。Web組件會自動存儲所加載界面的cookie信息，包括登錄的cookie信息。用戶可以通過點擊“刪除cookies”按鈕，清除所有cookie信息。首頁呈現效果如圖：

首頁布局簡單，由應用標題“Web組件”、內部標題“Web組件內”、中間加載的網頁和底部一排按鈕組成。分別對應兩個Text組件、一個Web組件以及一個Row容器組件。Row容器組件內包含四個鏈接按鈕，為LinkButton自定義組件。

// WebIndex.ets
Column() {
  Text($r('app.string.navigator_name'))
    ...

  Text($r('app.string.title_name'))
    ...

  Web({
    src: CommonConstants.USER_CENTER_URL,
    controller: this.controller
  })
    ...

  Row() {
    LinkButton({ buttonType: CookieOperation.GET_COOKIE, isNeedDivider: true })
    LinkButton({ buttonType: CookieOperation.SET_COOKIE, isNeedDivider: true })
    LinkButton({ buttonType: CookieOperation.DELETE_COOKIE, isNeedDivider: true })
    LinkButton({ buttonType: CookieOperation.VERIFY_COOKIE, isNeedDivider: false })
  }
  ...
}
...

自定義組件LinkButton由Text組件和Divider分隔器組件組成。最后一個按鈕沒有分隔器，通過isNeedDivider標識符判斷是否需要添加Divider分隔器組件。

// LinkButton.ets
Row() {
  Text(this.buttonType)
    ...

  if (this.isNeedDivider) {
    Divider()
      ...
  }
}

每個按鈕被點擊時，都是調用operationMethod函數。函數根據不同操作，執行不同的代碼內容。包括cookie的讀、寫和刪除操作，以及頁面跳轉操作。

// LinkButton.ets
operationMethod() {
  switch (this.buttonType) {
    case CookieOperation.GET_COOKIE:
      try {
        let originCookie = web_webview.WebCookieManager.getCookie(CommonConstants.USER_CENTER_URL);
        showDialog(originCookie);
      } catch (error) {
        showDialog(`ErrorCode: ${error.code},  Message: ${error.message}`);
      }
      break;
    case CookieOperation.SET_COOKIE:
      try {
        web_webview.WebCookieManager.setCookie(CommonConstants.USER_ABOUT_URL, 'info=測試cookie寫入');
        showDialog($r('app.string.write_success'));
      } catch (error) {
        showDialog(`ErrorCode: ${error.code},  Message: ${error.message}`);
      }
      break;
    case CookieOperation.DELETE_COOKIE:
      web_webview.WebCookieManager.deleteEntireCookie();
      let deleteMessage = $r('app.string.delete_success');
      showDialog(deleteMessage);
      break;
    case CookieOperation.VERIFY_COOKIE:
      router.pushUrl({
        url: CommonConstants.PAGE_VERIFY
      }).catch((err: Error) = > {
        Logger.error('[LinkButton] push url fail: ' + JSON.stringify(err));
      });
      break;
    default:
      break;
  }
}

免登錄驗證頁

當用戶在應用內已完成登錄操作，在應用的其他位置使用Web組件訪問需要相同授權的頁面時，可免去多余的登錄操作。一個應用中的所有Web組件共享一個WebCookie，因此一個應用中Web組件存儲的cookie信息，也是可以共享的。界面呈現效果如圖：

該頁面布局同樣簡單，由應用導航標題“Web組件”、內部標題“Web組件內”、加載的網頁組成。分別對應一個Navigator導航組件、一個Text組件和一個Web組件。Navigator導航組件類型設置為返回（NavigationType.Back），內容由返回圖標和應用標題組成，呈水平排列展示。

// Verify.ets
Column() {
  Navigator({ target: CommonConstants.PAGE_INDEX, type: NavigationType.Back }) {
    Row() {
      Image($r('app.media.ic_back'))
        ...

      Text($r('app.string.navigator_name'))
        ...
    }
    ...
  }
  ...

  Text($r('app.string.title_name'))
    ...

  Web({
    src: CommonConstants.USER_ABOUT_URL,
    controller: this.controller
  })
    ...
}
...

審核編輯 黃宇