HarmonyOS 實戰——認識服務卡片及運行第一個服務卡片

本文旨在對 HarmonyOS 新推出的服務卡片進行學習，理解其概念，以及熟悉工具 HUAWEI DevEco Studio，如，如何新建專案、如何新建卡片服務，如何運行專案和卡片服務，以及模擬器上卡片服務的顯示效果，

關于 HarmonyOS 2 中的卡片設計，其實可以從它們推出的概念/廣告視頻中可以了解一二：

原子化服務的理解

這里就基于宣傳視頻和官方檔案，分析一下原子化服務的優勢，

用戶角度

從用戶的角度上來說，以卡片為顯示形式的原子化服務的優勢有：

• 多端可用

  視頻中明確指出了手表、手機、平板均可使用同一個卡片服務，開發者檔案中也明確表明，現在支持的設備包括手機、平板、智能穿戴和智慧屏均可使用，而按斬訓為生態圈的發展，未來也必然能夠推送到智慧屏、智慧家居等設備上，

• 免安裝使用

  我感覺免安裝「免安裝」類似于現在使用非常廣泛的「小程式」，同樣不需要下載就可以安裝，

• 直接布置在手機頁面上

  這就是卡片與「小程式」不同的地方了，「小程式」依托的主體是程式，如果關閉了程式就無法使用「小程式」，但是卡片依托的主體 HarmonyOS，所以卡片可以單獨的作為一個服務布置在首頁上，就像視頻中顯示的這樣：

  

  這個備忘錄就是一個卡片，這就是一種卡片布局，可以直接將其布置在桌面上，對簡單功能的實作，如要顯示待辦事項以及增添待辦事項，也會方便不少，直接點擊卡片服務可以直接打開服務，進行更加復雜的業務操作，

• 自由分享

  在同樣都是華為設備之間分享卡片也很簡單，如圖：

  

  這樣的話，HarmonyOS 之間的分享可以做到不借助第三方應用進行分享，省去了應用間跳轉的麻煩，

  分享的功能是通過 HarmonyOS 設備的 NFC 實作的，這樣兩臺同樣都是 HarmonyOS 的設備可以通過「碰一碰」這個功能，識別手機正在運行的原子化服務，從而進行分享，

• 更多應用場景

  這就是前面特性的結合了，多端+免安裝+自由分享，構建了物聯網的應用場景——萬物皆可連：

  

  我的理解是，卡片的實作是由智能家居實作的，而通過手機可以獲得由智能家居分享得卡片，從而在卡片上完成簡單的功能應用，這樣能夠免去很多的下載，減少對于手機記憶體的負荷，

站在用戶的角度來說，我是很期待鴻蒙的整個生態圈的構建的，畢竟隨著 5G 基建的漸漸普及，物聯網的前景確實是挺可觀的，

開發角度

作為開發的角度，其實實作原子化服務也有一些優勢和挑戰，

• 實作更加簡單

  比起一整套服務的應用來說，專注于一個功能的卡片顯然實作起來會更加簡單，對于初級、中級開發來說，是一個非常友好的事情，

• 適配

  多端適配始終是最煩惱的事情，這一點卡片的實作簡單一些，但是又沒這么簡單，

  卡片的尺寸是固定的，目前包含四種：1 × \times × 2, 2 × \times × 2, 2 × \times × 4, 4 × \times × 4，從卡片尺寸上來說，要適配的尺寸還是比較少的，

  但是，除了卡片尺寸之外，卡片還提供了多個模板去快速構建服務卡片，目前提供的模板有 16 個，具體可以在 開發服務卡片 看到，從這種角度來說，卡片具體實作的復雜度也不小，

  最后，每個 FA 最多可以配置 16 張服務卡片，這對于服務卡片的設計也會產生一定的復雜度，同樣，服務卡片的互動模型和 UX 設計也是說難不難，說簡單又挺扣細節的內容，這點官方也提供了一些設計概念去遵從：卡片類快服務互動模型設計 和 卡片 UX 設計規范，

  目前支持的設備只有手機、平板、智能穿戴和智慧屏，但是未來針對其他的設備，如眼鏡、車機等也會進行功能支持時，卡片的適配是否又會成為新的難題？

• 語言使用

  目前來說，服務卡片的開發可以使用兩種主流語言，Java 和 JavaScript，官方指導的說法是，Java 卡片適合作為一個直達入口，沒有復雜的頁面和事件，而 JavaScript 卡片適合有復雜界面的卡片，

  更具體的細節，包括支持的功能在 卡片開發說明 中有所描述，

  雖然說卡片的開發可以使用 Java 或 JavaScript 進行撰寫，但是本質上整個服務還是通過 Java 去實作的，做了兩年的純前端開發，其實第一時間看教程稍微有點懵逼——現在前端和后端之間的隔閡比較大，當檔案說卡片可以用 JavaScript 進行撰寫的時候，我以為是純 JavaScript，導致卡頓了很久……

  在目前大前端更多的側重于純 JavaScript 開發的情況下，前端開發想要 直接 上手原子化服務開發，比起后端來說挑戰顯然會更大一些，就不是很確定之后會像現在做前后端分離的開發呢，還是要求開發者向全堆疊進發，

• 原子化服務的設計

  原子化服務本身代表著單一的某個功能，那么如何結合多個原子化服務的設定同樣也會具有一定的挑戰性，

  例如說淘寶和天貓，雙方都有購物車功能，雙方都是阿里巴巴旗下的，那么之后淘寶和天貓會不會合并購物車這個功能？如果不合并的話，又要怎么設計才能夠讓淘寶的購物車有別于天貓的購物車？

  對業務的設計也挺有挑戰性的，

• 分布式開發

  這是來自教程中 原子化服務流轉 中的一張圖：

  

  比起純粹的投屏，并且遭受延遲度的折磨，如果能夠享受來自系統和應用本身的「流轉」功能，免受通過第三方應用帶來的延遲就是再好不過的事情了，

  同樣，我覺得這種設計也挺適合玩桌游的……畢竟線下聚會很有趣，但是拆東西布局或是收拾東西，還是要花時間，并且有的時候覺得非常的麻煩，

  除此之外，例如說游戲王這種游戲，要使用店家提供的卡片也不現實，畢竟卡組肯定是要自己組的，如果能夠結合線上版——游戲王 Duel Links 已經出了很久了——加上線下版的聯動，那么找幾個基友吃吃喝喝玩玩組個局也挺好的，

  這樣的話，對于應用本身和卡片的設計也會變得更復雜，自然，實作起來的復雜度也同樣會增加，

工具配置

工具使用的是 HUAWEI DevEco Studio，頁面其實還挺熟悉的，是基于 Intellij IDEA Community 開源版本實作的 IDE，所以如果有使用過 Intellij 家族工具的開發，對這個頁面應該是太熟悉了，

安裝 Java

我的電腦上本來就適配了 Java，用的是 Java11，也能夠運行 HUAWEI DevEco Studio，在 HUAWEI DevEco Studio 使用 java --version 輸出的版本是 11，所以我覺得 Java 的版本應該不會造成決定性的差異，

Java 的安裝可以到 https://www.java.com/download/ie_manual.jsp 去下載安裝器去安裝，默認下載的依舊是 version8，從 2019 年 4 月 16 號開始，個人開發使用 Java 依舊是免費的，但是其他的就不好說了，如果是企業使用 Java 一定要注意這一點，

下載和安裝 HUAWEI DevEco Studio

下載地址在這里：https://developer.harmonyos.com/cn/develop/deveco-studio#download，目前的穩定版本是 DevEco Studio 2.1 Release，支持 Windows 和 Mac，

下載后直接就是的檔案通過解壓后，就能獲得 deveco-studio-xxxx.exe 的安裝向導后，跟著配置走就行了，基本上就是點下一步、下一步、下一步這種操作，

需要注意的是，SDK 的安裝是需要聯網的，

創建以及運行工程

這里的參考檔案是：創建一個新的工程， 開發服務卡片 和 使用模擬器運行應用，

創建工程

1. 創建一個新的專案

   第一次安裝成功的可以通過歡迎頁面去創建，或是通過 File -> New -> New Project... 去創建，

2. 這里會選擇 JavaScript 做開發語言

   

3. 填寫相關資訊

   

   注意，如果沒有安裝 SDK4 的話——最新的 SKD 版本是 5，默認會安裝最新的 SKD，需要通過 Tools -> SDK Manager 去下載 SDK4：

   

4. 專案完成后，DevEco Studio 會自動進行打包，完成后即可進行下一步

創建卡片服務

1. 創建新的卡片模板

   有兩種方式：

   • 選擇模塊（如 entry 模塊）下的任意檔案，點擊選單欄 File > New > Service Widget 創建服務卡片
   • 選擇模塊（如 entry 模塊）下的任意檔案，單機右鍵選擇 New > Service Widget 創建服務卡片，

2. 選擇卡片模板

3. 配置服務資訊

   這里只是測驗用，所以所有的資訊都會使用默認的資訊

4. 點擊 Finish 完成卡片服務的創建

運行工程

直接點擊運行會碰到下面這個報錯：

HarmonyOS Launch: The Huawei Lite Simulator supports only Lite projects.

原因就是到目前為止，HUAWEI DevEco Studio 還沒有開啟本機運行的支持，想要運行卡片服務，現在只能使用 模擬器(目前只能一個小時一個小時的運行) 運行應用，根據教程，步驟是這樣的：

1. 點擊 Tools > Device Manager

2. 選擇登錄

3. 如果沒有實名認證的話，需要先進行實名認證，否則無法使用遠程的設備

   支持的認證方式有兩種：

   • 個人銀行卡實名認證(3 分鐘)
   • 人工認證(1-2 個作業日)

4. 認證完了重新登錄，就能看到虛擬設備了

   

   選擇 Phone 下面的設備打開即可

5. 選擇使用 Debug 模式運行程式

   這點非常重要，如果選擇 Run 去運行的話會跑不起來，初步推測是因為沒有 HAP 的認證，沒有證書導致的，

   選擇 Debug 模式就能夠開啟專案了：

   

到這個步驟為止，因為還沒有實作卡片服務，所以桌面上并不會顯示剛剛創建的空白頁面，所以下一步就是拉取已有的專案，進行學習分析，這里用的案例是官方實作的 JsFACard，下載地址在：https://gitee.com/openharmony/app_samples/tree/master/UI/JsFACard，

鑒于整個專案包含多個 HarmonyOS 的專案，直接在 IDE 中匯入會出現報錯：

最終只能選擇手動復制粘帖，然后將代碼移植進之前創建好的專案中，展示效果如下：

下一步就準備開始學習官方案例中的原始碼了，

本文正在參與“有獎征文 | HarmonyOS 征文大賽”活動，活動鏈接為：https://marketing.csdn.net/p/ad3879b53f4b8b31db27382b5fc65bbc