OpenHarmony SystemUI開發記錄

背景介紹

最近學習OpenHarmony應用開發， SDK版本是3.2.9.2 Beta4，IDE版本是3.1.0.200。參考官方檔案，做了個Demo應用，偵錯、執行非常順利。啟動應用後，狀態列和導航欄佔用的高度過高，顯得很奇怪，嘗試修改一下系統應用。

摸石頭過河

因為沒做過行動端開發，最初以為狀態列和導航欄是由Launcher控制的，從範例中找了個launcher，按照檔案進行編譯，放在裝置上怎麼也起不來，Google查了半天，最後發現該版本中檔案描述不全，參考最新版本檔案進行編譯，執行成功。

有了經驗之後，使用系統Launcher進行編譯，報了一堆錯誤，哪裡報錯改哪裡，修改完之後編譯成功，因為是系統應用，不能使用自動簽名。根據官方提供的簽名方式進行簽名，放到裝置中無法顯示應用中心和Dock。

看了系統Launcher程式碼，感覺狀態列和導航欄並不是由Launcher控制的，又下載了系統SystemUI程式碼，編譯時也有幾個報錯，不知道怎麼解決，後來發現下載的程式碼不對，應該從分支中選擇版本，從標籤中選擇的版本程式碼可能不全或者有問題。

編譯安裝

替換系統應用方法：

// 獲取系統目錄讀寫許可權
hdc shell "mount -o remount,rw /"
// 拷貝應用到SystemUI目錄
hdc file send phone_statusbar-phone_entry-default-signed.hap /system/app/com.ohos.systemui/SystemUI-StatusBar.hap
// 應用放在/data目錄下，刪除/data目錄下的所有檔案，系統會重新安裝系統應用。
hdc shell "rm -rf /data/*"
// 重啟裝置
hdc shell reboot

1.系統應用簽名

環境

SDK：Beta4，程式碼：Beta4
現象

系統應用無法使用自動簽名。

解決方案

參考連結：系統應用簽名，我使用的是標準簽名。

下載material資料夾、OpenHarmony.p12檔案、OpenHarmonyApplication.pem檔案，放在signature目錄下，修改專案中的build-profile.json5檔案，新增以下資訊，重新編譯即可。

    "products": [
      {
        "name": "default",
        "signingConfig": "default"
      }
    ],
    "signingConfigs": [{
      "name": "default",
      "material": {
        "storePassword": "00000016D9DCF063F0FC4BBD0E7FE1E3B06A67C07BECE1BDD4E2A3EFDAE20F890810EC02AA2A",
        "certpath": "signature/OpenHarmonyApplication.pem",
        "keyAlias": "OpenHarmony Application Release",
        "keyPassword": "00000016FD3897FD4C46940ED39FFC652872B7B18BEDCCA07400A6EBEE307C9C41B96DB6B64D",
        "profile": "signature/systemui.p7b",
        "signAlg": "SHA256withECDSA",
        "storeFile": "signature/OpenHarmony.p12"
      }
    }]

2.SystemUI編譯報錯（SDK問題）

環境

SDK：Beta4，程式碼：Beta4

現象

編譯報錯，資訊如下：

> hvigor ERROR: Failed :phone_statusbar:default@CompileArkTS... 
> hvigor ERROR: Tools execution failed.
 ArkTS:ERROR File: /xxx/applications_systemui-OpenHarmony-3.2-Beta4/features/batterycomponent/src/main/ets/default/batteryModel.ts:16:25
 Cannot find module '@ohos.batteryinfo' or its corresponding type declarations.
 Module not found: Error: Can't resolve 'bundle/extensionAbilityInfo' in '/xxx/applications_systemui-OpenHarmony-3.2-Beta4/common/src/main/ets/plugindatasource'
 Module not found: Error: Can't resolve 'bundle/extensionAbilityInfo' in '/xxx/applications_systemui-OpenHarmony-3.2-Beta4/common/src/main/ets/plugindatasource/common'
 Module not found: Error: Can't resolve 'bundle/metadata' in '/xxx/applications_systemui-OpenHarmony-3.2-Beta4/common/src/main/ets/plugindatasource/common'

排查

檢視API發現bundle目錄下沒有extensionAbilityInfo和metadata檔案，而bundleManager中有這兩個檔案。
解決方案

在報錯的地方將bundle/extensionAbilityInfo改為bundleManager/extensionAbilityInfo，bundle/metadata改為bundleManager/metadata，編譯通過。
環境

SDK：Beta2，程式碼：Beta4

現象

編譯報錯，資訊如下：

> hvigor ERROR: Failed :pc_statusbar:default@CompileArkTS... 
> hvigor ERROR: Tools execution failed.
 ETS:ERROR File: /xxx/applications_systemui-OpenHarmony-3.2-Beta4/features/batterycomponent/src/main/ets/default/batteryModel.ts:16:25
 Cannot find module '@ohos.batteryInfo' or its corresponding type declarations.

排查

api中info的i為小寫，而檔案中匯入包的時候是大寫I
解決方案

將batteryModel.ts檔案中大寫I改為小寫i，即可編譯成功，如下：
```
import BatteryInfo from "@ohos.batteryinfo";
```

3.SystemUI應用安裝失敗

環境

SDK：Beta4，程式碼：Beta4
現象

替換狀態列應用後，狀態列消失

排查

使用bm命令手動安裝應用報錯：

手動安裝應用
bm install -p /system/app/com.ohos.systemui/SystemUI-Status.hap -u 0
// 報錯資訊
error: failed to install bundle.
error: install releaseType not same

報錯資訊意思是裝置中SystemUI中SDK版本與我自己編譯的SystemUI SDK版本不一致，檢視一下裝置中SystemUI的SDK版本：

hdc shell cat /data/app/el1/bundle/public/com.ohos.systemui/phone_statusbar/module.json

解決方案：

系統中使用的是SDK Beta2，而我編譯使用的是SDK Beta4，所以需要將SDK切換到Beta2版本（Beta2編譯Beta4版本程式碼也會有問題，參考：SystemUI編譯報錯（SDK問題））。

4.安裝導航欄後狀態列消失

環境

SDK：Beta4，程式碼：Beta2
現象

單獨安裝狀態列正常，安裝導航欄後狀態列消失
排查

檢視狀態列紀錄檔，發現有很多紀錄檔沒有打出來，追蹤了一下，定位到features/statusbarcomponent/src/main/ets/com/ohos/common/StatusBarConfiguration.ts檔案中，發現卡在這裡

status_bar_size_landscape搜尋一下這個欄位，發現base/element/string.json檔案中存在該欄位，zh_CN/element/string.json檔案中不存在該欄位。（zh_CN/element/string.json新增欄位後狀態列正常顯示，是什麼原因不清楚）

解決方案

product/phone/statusbar/src/main/resources/zh_CN/element/string.json檔案中新增以下內容：

    {
      "name": "status_bar_size_portrait",
      "value": "16"
    },
    {
      "name": "status_bar_size_landscape",
      "value": "16"
    },
    {
      "name": "phone_status_bar_size_portrait",
      "value": "16"
    },
    {
      "name": "phone_status_bar_size_landscape",
      "value": "16"
    },

客製化化開發

經過摸索，狀態列和導航欄佈局在視窗管理中控制，可以修改模組下的ServiceExtAbility.ts檔案來自定義實現，也可以修改組態檔resources/zh_CN/element/string.json中的以下欄位，來控制狀態列和導航欄的高度（這裡高度不能加單位，按照官網檔案的說法預設使用的VP單位）。

    {
      "name": "nav_bar_size_portrait",
      "value": "26"
    },
    {
      "name": "nav_bar_size_landscape",
      "value": "26"
    },
    {
      "name": "status_bar_size_portrait",
      "value": "16"
    },
    {
      "name": "status_bar_size_landscape",
      "value": "16"
    },

總結

做普通應用Demo上手容易，ArkTS做頁面佈局方便，使用元件點點點即可得到想要的樣式。因為使用的是Beta版本，修改SystemUI過程中遇到很多坑，比如編譯報錯，應用安裝失敗，應用消失等問題，在Google上基本搜不出來解決方案，只能在官方檔案、51CTO社群、華為開發者聯盟上搜尋、提問來解決。像是安裝導航欄後狀態列消失問題，解決起來很容易，但是尋找解決方法要花很長時間，這也是寫這篇文章的原因，希望可以幫助開發者解決問題，同時也希望OpenHarmony社群能夠建立起來，為開發者答疑解惑。
最後，感謝Haoc_小源同學的幫助，感謝TiZizzz的OpenHarmony應用簽名 - 系統應用簽名文章。