快服務卡片樣式完成只需要5分鍾4個步驟？

錯誤操作：

請參考設計規范：
https://developer.huawei.com/consumer/cn/doc/distribution/service/hag_card_ux

正確操作：

5分鍾4個步驟快速完成快服務卡片樣式：

Step1，下載華為快應用IDE：
https://developer.huawei.com/consumer/cn/doc/development/Tools-Guides/quickapp-obtain-ide

Step2，新建工程（可參考GIF1） ：

1. 以管理員身份啟動華為快應用IDE
2. 點擊新建卡片工程菜單（Ctrl+Shift+J）：文件 -> 新建項目 -> 新建卡片項目。
3. 輸入應用名稱和rpk包名，選擇項目工作區間。
4. 選擇卡片模板。
5. 點擊“確定”按鈕，新建卡片工程。

Step3，新建卡片（可參考GIF2）：

1. 選擇新建卡片入口。
   a）在左側資源管理器中，在src文件夾上右鍵選擇“新建卡片”。
   b）在菜單欄“文件”下選擇“新建卡片”。
   c）點擊資源管理器旁邊的圖標按鈕，選擇“新建卡片”。

2. 選擇卡片類型，填寫相關信息，填寫完畢后點擊“確定”。

新建卡片成功后，可在 manifest.json 和 launch.json 文件中看到widgets的相關配置。

Step4，最后一步，在2分鍾內快速完成卡片樣式（可參考GIF3）：

1. 光標聚焦在需要編輯的文件或標簽處。
2. 在組件面板中的自動搜索結果中，選擇組件並拖拽到需要編輯的位置。
3. 出現提示可編輯提示信息時，釋放拖拽動作，被拖拽組件即可編輯到當前文件中，模擬預覽即時刷新。

** 其UX相關信息補充與提供參考：**
基礎樣式庫（可參考GIF4）：

1. basic.scss基礎樣式文件在卡片模板項目的路徑：\src\common\css\basic.scss。
   2. 強烈推薦使用這些樣式聲明，避免卡片UI不適配EMUI的問題。
2. 使用方式如下圖。

變量（可參考GIF5）：
輸入 $ 符號，即可觸發引入的變量提示。

方法（可參考GIF6）：

1. 長度/大小的樣式的值最好引用 dpConvert 方法， 例如 font-weight、 margin、 border-radius、 padding等。
2. 輸入樣式屬性關鍵字后，再輸入 dpConvert 部分關鍵字，即可觸發 dpConvert 的方法提示項，方法的入參也可以是變量。

樣式片段（可參考GIF7）：

看完本文攻略小編帶你少走彎路飛上捷徑，啟動開掛模式，
完成快服務卡片的樣式，只需要5！分！鍾！
如果感興趣了解更詳細，可參考文檔《卡片開發步驟》

完整開發步驟：
下載IDE → 新建卡片 → 組件拖拽 → 配置：添加卡片參數 → 真機：實時預覽 → 調試 → 測試 → 構建打包 → End，恭喜你通關！

如果你覺得本文對你有幫助，麻煩點個贊鴨~

---

原文鏈接：https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202331279062230203&fid=17
原作者：小亭子