一文看懂HarmonyOS服務(wù)卡片運(yùn)行原理和開發(fā)方法
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
服務(wù)卡片概述
1、什么是服務(wù)卡片
HarmonyOS 2的到來，讓很多開發(fā)者眼前一亮。HarmonyOS 2推出的服務(wù)卡片，是FA(Feature Ability)的界面展現(xiàn)形式，將FA的重要信息或者操作前置到卡片上，以達(dá)到服務(wù)直達(dá)的目的。
卡片實(shí)際界面如下圖所示。
圖1 具有服務(wù)卡片的桌面
如圖所示，桌面上混合著服務(wù)卡片和應(yīng)用圖標(biāo)。如上面的天氣服務(wù)卡片，展示了多時(shí)段天氣;運(yùn)動(dòng)健康的服務(wù)卡片，展示了運(yùn)動(dòng)步數(shù)等重要信息。如果應(yīng)用圖標(biāo)下方有提示條，則表示該應(yīng)用嵌有服務(wù)卡片，可以通過手指在該圖標(biāo)上滑呼出服務(wù)卡片，如上圖的天氣、圖庫、運(yùn)動(dòng)健康、備忘錄等，均可以上滑圖標(biāo)呼出服務(wù)卡片。
服務(wù)卡片有三個(gè)特征：易用可見、智能可選和多端可變。
易用可見：凸顯服務(wù)信息的內(nèi)容外露，減少層級(jí)跳轉(zhuǎn)。
智能可選：全天可變的數(shù)據(jù)信息，支持自定義類型的服務(wù)卡片設(shè)計(jì)。
多端可變：適配多端設(shè)備的自適應(yīng)屬性。
2、服務(wù)卡片設(shè)計(jì)規(guī)范
數(shù)量選擇
【每個(gè)應(yīng)用均能配置多個(gè)服務(wù)卡片，但是每個(gè)Page Ability配置的服務(wù)卡片總數(shù)不能超過16個(gè)】
例如：一個(gè)天氣的應(yīng)用可以制作當(dāng)?shù)靥鞖?、多時(shí)段天氣、多天天氣、穿衣提醒等不同內(nèi)容的卡片信息，但如果將這些卡片配置在同一個(gè)Page Ability上，總數(shù)量不可以超過16個(gè)。
【每個(gè)服務(wù)卡片可以選擇4種服務(wù)卡片尺寸】
例如：系統(tǒng)為每個(gè)應(yīng)用提供4種尺寸規(guī)格以供選擇，小尺寸的卡片尺寸為必選項(xiàng)。
【每個(gè)服務(wù)卡片被用戶使用時(shí)可以創(chuàng)建多個(gè)實(shí)例】
例如：用戶手動(dòng)添加了當(dāng)?shù)靥鞖獾姆?wù)卡片，可以通過對(duì)單個(gè)服務(wù)卡片的重復(fù)添加來實(shí)現(xiàn)多個(gè)實(shí)例。
尺寸選擇
每個(gè)應(yīng)用在選擇服務(wù)卡片時(shí)，按需選擇對(duì)應(yīng)尺寸，保證內(nèi)容效益最大化。
服務(wù)卡片尺寸分為：微(1×2)、小( 2×2 )、中( 2×4 )、大(4×4)4種尺寸，其中小尺寸為必選尺寸。
同一種尺寸還支持多個(gè)不同內(nèi)容布局的卡片，可以通過服務(wù)卡片管理界面進(jìn)行選擇，應(yīng)用方可以指定某一個(gè)服務(wù)卡片作為默認(rèn)展示。
【微尺寸】
圖2 微尺寸服務(wù)卡片
微尺寸卡片能提供簡(jiǎn)單的數(shù)據(jù)信息，快捷指令和快捷入口。比如一個(gè)音樂應(yīng)用可以提供一個(gè)微尺寸卡片，僅展示歌曲名字和歌手名字，以及歌曲縮略圖，運(yùn)動(dòng)健康展示步數(shù)數(shù)據(jù)，行程信息提供航班號(hào)和登機(jī)時(shí)間等。
【小尺寸】
圖3 小尺寸服務(wù)卡片
小尺寸卡片能提供精簡(jiǎn)的服務(wù)信息內(nèi)容、豐富的展示特性信息、即時(shí)信息或操作提示等。比如行程信息除了提供航班信息，還提供了查看詳情的操作。
【中尺寸和大尺寸】
圖4 中尺寸服務(wù)卡片
圖5 大尺寸服務(wù)卡片
中尺寸和大尺寸卡片能提供兩種以上緯度的服務(wù)信息展示和多個(gè)可交互的熱區(qū)展示，展示更加沉浸豐富的視覺圖片以及采用多個(gè)宮格和列表內(nèi)容展示。比如運(yùn)動(dòng)健康采用中尺寸卡片展示了步數(shù)和運(yùn)動(dòng)強(qiáng)度兩個(gè)緯度的信息。玩機(jī)技巧采用宮格方式推薦了多個(gè)應(yīng)用入口。
內(nèi)容構(gòu)成
服務(wù)卡片由多種設(shè)計(jì)元素組合而成，以下7種常見信息元素可以作為內(nèi)容選擇：
圖標(biāo)、數(shù)據(jù)、文本、按鈕、圖片、宮格、列表
在組織服務(wù)卡片內(nèi)容的時(shí)候可以按照尺寸的大小來判斷應(yīng)當(dāng)選擇哪種元素，包括元素組合的數(shù)量。
圖6 卡片尺寸和元素對(duì)應(yīng)關(guān)系圖
如上圖所示，對(duì)于微尺寸卡片，建議卡片上內(nèi)容元素不超過2種，可以在“圖標(biāo)、數(shù)據(jù)、文本、圖片”中選擇最多兩種元素進(jìn)行組合，以達(dá)內(nèi)容收益盡可能多且不顯得繁雜。對(duì)于小尺寸卡片，建議卡片上的內(nèi)容不超過3種，可以在“圖標(biāo)、數(shù)據(jù)、文本、按鈕、圖片”中選擇最多3種元素進(jìn)行組合。中/大尺寸卡片可根據(jù)業(yè)務(wù)需要自由選擇。
服務(wù)卡片運(yùn)行機(jī)制
1、服務(wù)卡片整體框架
服務(wù)卡片整體框架主要包含三部分：卡片使用方、卡片管理服務(wù)和卡片提供方。
● 卡片使用方
顯示卡片內(nèi)容的宿主應(yīng)用，控制卡片在宿主中展示的位置，如桌面、服務(wù)中心、搜索等。
● 卡片管理服務(wù)
用于管理系統(tǒng)中所添加卡片的常駐代理服務(wù)，包括卡片對(duì)象的管理與使用，以及卡片周期性刷新等。
● 卡片提供方
提供卡片顯示內(nèi)容的HarmonyOS應(yīng)用或原子化服務(wù)，控制卡片的顯示內(nèi)容、控件布局以及控件點(diǎn)擊事件。
圖7 服務(wù)卡片整體框架
說明
卡片使用方和提供方不要求常駐運(yùn)行，在需要添加/刪除/請(qǐng)求更新卡片時(shí)，卡片管理服務(wù)會(huì)拉起卡片提供方獲取卡片信息。
當(dāng)卡片主動(dòng)刷新時(shí)候，具體流程如下：
- 當(dāng)卡片使用方如“桌面”，呼出服務(wù)卡片時(shí)，通過Java kit中的SDK客戶端向卡片管理服務(wù)請(qǐng)求卡片對(duì)象。
- 卡片管理服務(wù)會(huì)檢查其緩存管理模塊是否存在該卡片對(duì)象實(shí)例，如果存在，則會(huì)立即返回該卡片對(duì)象給卡片使用方;
- 如果不存在，則會(huì)通過卡片提供方kit，向卡片提供方索取該卡片數(shù)據(jù)，并生成卡片對(duì)象;
- 卡片管理服務(wù)會(huì)拉起服務(wù)卡片F(xiàn)A，回調(diào)刷新函數(shù)更新卡片數(shù)據(jù)，并將刷新數(shù)據(jù)返回給卡片管理服務(wù);
- 卡片管理服務(wù)會(huì)檢查是否存在卡片使用方宿主，存在則會(huì)將卡片提供方數(shù)據(jù)刷新到卡片使用方宿主實(shí)例緩存中，不存在則可能是系統(tǒng)異常無法刷新;
- 卡片管理服務(wù)通過服務(wù)接口將卡片數(shù)據(jù)傳到卡片使用方(如“桌面”)，宿主應(yīng)用界面顯示數(shù)據(jù)。
圖8 服務(wù)卡片主動(dòng)刷新流程圖
當(dāng)卡片定時(shí)/定點(diǎn)刷新時(shí)候，具體流程如下：
- 當(dāng)一個(gè)服務(wù)卡片在config.json中配置了定時(shí)或者定點(diǎn)刷新時(shí)，timer事件會(huì)通知卡片管理服務(wù);
- 卡片管理服務(wù)會(huì)去卡片提供方對(duì)象管理模塊中找到對(duì)應(yīng)的卡片提供方;通過卡片提供方kit，回調(diào)卡片提供方的刷新函數(shù)，卡片提供方刷新數(shù)據(jù)返回給卡片管理服務(wù)。
- 卡片管理服務(wù)根據(jù)卡片名稱查找卡片使用方宿主，并刷新卡片使用方宿主對(duì)象緩存數(shù)據(jù)。
- 接著通過服務(wù)接口將卡片數(shù)據(jù)傳到卡片使用方中，宿主應(yīng)用界面顯示數(shù)據(jù)。
圖9 服務(wù)卡片定時(shí)/定點(diǎn)刷新流程圖
服務(wù)卡片根據(jù)開發(fā)方式可以分為Java服務(wù)卡片和JS服務(wù)卡片，Java服務(wù)卡片返回的實(shí)例采用ComponentProvider方式顯示在服務(wù)卡片使用方上，JS服務(wù)卡片是通過ACE引擎加載和解析hap包的卡片資源，如hml、css和config.json文件，解析引擎解析完hml和css后進(jìn)行渲染，結(jié)合數(shù)據(jù)生成InstantView顯示在服務(wù)卡片使用方指定的位置上。
2、服務(wù)卡片生命周期回調(diào)函數(shù)
卡片提供方控制卡片實(shí)際顯示的內(nèi)容、控件布局以及控件點(diǎn)擊事件。應(yīng)用或原子化服務(wù)想要成為一個(gè)卡片提供方，需要實(shí)現(xiàn)卡片相關(guān)的回調(diào)函數(shù)：
服務(wù)卡片關(guān)鍵回調(diào)函數(shù)如下：
服務(wù)卡片生命周期回調(diào)函數(shù)時(shí)序如下：
圖10 服務(wù)卡片生命周期回調(diào)函數(shù)時(shí)序圖
卡片管理服務(wù)不負(fù)責(zé)卡片應(yīng)用進(jìn)程?；?，卡片管理服務(wù)在相應(yīng)的時(shí)機(jī)拉起卡片提供方進(jìn)程，調(diào)用創(chuàng)建、更新、刪除卡片等回調(diào)。
服務(wù)卡片開發(fā)過程
下面以JS服務(wù)卡片開發(fā)為例，介紹服務(wù)卡片的開發(fā)過程。
1、服務(wù)卡片開發(fā)環(huán)境
華為近期發(fā)布了最新的HarmonyOS IDE版本：DevEco Studio 2.1 Release，該版本已經(jīng)支持了服務(wù)卡片的開發(fā)。DevEco Studio 開發(fā)卡片環(huán)境如下圖所示：
圖11 DevEco Studio 開發(fā)卡片環(huán)境圖
【創(chuàng)建服務(wù)卡片項(xiàng)目步驟】
1.新建一個(gè)Project，根據(jù)項(xiàng)目需要選擇JS或者Java的項(xiàng)目模板，建議選擇JS項(xiàng)目工程。
2.在“Configure your project”中，打開“Show In Service Center”，表示在服務(wù)中心中展示。
圖12 DevEco Studio 開發(fā)卡片設(shè)置圖
3.Finish之后就能創(chuàng)建一個(gè)帶有服務(wù)卡片的項(xiàng)目。
說明
如果在步驟1中采用Java項(xiàng)目，則默認(rèn)創(chuàng)建Java服務(wù)卡片，如果采用JS項(xiàng)目，則默認(rèn)創(chuàng)建JS服務(wù)卡片。
詳細(xì)創(chuàng)建項(xiàng)目過程可以參考官網(wǎng)資料【開發(fā)服務(wù)卡片】。
● 開發(fā)服務(wù)卡片
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_service_widget-0000001078566997
2、JS服務(wù)卡片開發(fā)過程
JS服務(wù)卡片開發(fā)主要分為四步：
配置config.json
實(shí)現(xiàn)生命周期回調(diào)方法
開發(fā)卡片界面元素
實(shí)現(xiàn)卡片界面交互
1.配置config.json
config.json整體結(jié)構(gòu)
采用DevEco Studio創(chuàng)建帶有服務(wù)卡片的Project之后，會(huì)生成下面的config.json的配置文件。
圖13 config.json文件內(nèi)容
如上圖所示，config.json文件是項(xiàng)目創(chuàng)建之后生成的配置文件，其中”js”配置了兩個(gè)json對(duì)象，第一個(gè)name屬性值為”default”是JS UI的界面配置。name屬性值為“service_widget”的是服務(wù)卡片的配置，type的屬性值是form表示該JS配置是一個(gè)服務(wù)卡片。
JS服務(wù)卡片的工程目錄如下：
圖14 JS服務(wù)卡片工程目錄圖
● common目錄主要存放公共資源;
● i18n目錄是存放國際化資源;
● pages.index目錄(實(shí)際是pages/index)存放服務(wù)卡片界面開發(fā)主要文件，里面采用hml+css+json文件組合，構(gòu)成JS服務(wù)卡片界面。
config.json中abilities配置forms細(xì)節(jié)
在abilities的json配置中，配置了forms屬性值，如下圖所示：
圖15 forms屬性值配置
forms配置在哪個(gè)Ability上，服務(wù)卡片聲明周期回調(diào)方法就會(huì)在哪個(gè)Ability上回調(diào)執(zhí)行。
● formsEnable的值若設(shè)置為true，則表示該Ability支持服務(wù)卡片顯示。
● forms的值是一個(gè)json 數(shù)組，表示可配置多張服務(wù)卡片。
● jsComponentName是JS服務(wù)卡片名字，僅JS服務(wù)卡片上需要配置(Java卡片不需要配置)，其名字需要和js配置的name一致，表示js組件實(shí)例。
● isDefault為true表示該卡片是一個(gè)默認(rèn)卡片。Ability可以配置多張服務(wù)卡片，其中僅有一張是默認(rèn)卡片，即在圖標(biāo)上滑呼出的卡片。
● scheduledUpdateTime表示卡片定時(shí)/定點(diǎn)觸發(fā)更新的時(shí)間。
● defaultDimension表示默認(rèn)卡片的尺寸是22，其他的可選12，24，44尺寸。對(duì)于需要在服務(wù)中心露出的卡片，默認(rèn)規(guī)格必須設(shè)置成2*2。
● type表示服務(wù)卡片類型，有JS和Java兩種，本次配置選擇為JS。
● updateDuration表示服務(wù)卡片刷新的時(shí)間間隔，以30min作為單位，1表示30min，2表示1個(gè)小時(shí)，以此類推。
forms的其他屬性參考官網(wǎng)資料【服務(wù)卡片-JS卡片開發(fā)】。
● 服務(wù)卡片-JS卡片開發(fā)
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-service-widget-provider-js-0000001150602175
配置卡片編輯功能(可選功能)
有些服務(wù)卡片需要具備可編輯能力，如天氣App需要編輯所在城市。具體實(shí)現(xiàn)方法如下：
在config.json中，對(duì)某一個(gè)form的配置增加formConfigAbility的屬性配置，可實(shí)現(xiàn)編輯功能。formConfigAbility的值是一個(gè)url格式的Ability名稱。若不配置formConfigAbility，則不顯示編輯菜單。示例代碼如下：
圖16 示例代碼
實(shí)現(xiàn)效果如下圖所示：
長按服務(wù)卡片，會(huì)彈出編輯菜單選項(xiàng)：
圖17 JS服務(wù)卡片效果圖
2.實(shí)現(xiàn)生命周期回調(diào)方法
創(chuàng)建一個(gè)Form Ability，并覆寫Ability在服務(wù)卡片上相應(yīng)的回調(diào)函數(shù)：
● onCreateForm(Intent intent)
● onUpdateForm(long formId)
● onDeleteForm(long formId)
● onCastTempForm(long formId)
● onEventNotify(Map
● onTriggerFormEvent(long formId, String message)
下面重點(diǎn)給大家介紹onCreatForm和onUpdateForm的使用方法，其他回調(diào)函數(shù)以此類推。
onCreateForm方法
當(dāng)卡片使用方請(qǐng)求獲取卡片時(shí)，卡片提供方會(huì)被拉起并調(diào)用onCreateForm(Intent intent)回調(diào)，intent中會(huì)帶有卡片ID，卡片名稱和卡片外觀規(guī)格信息，可按需獲取使用。onCreateForm方法代碼示例如下：
圖18 onCreateForm方法代碼示例
可以通過intent變量獲取到卡片相關(guān)的信息，intent中攜帶的信息如下表：
首先，可以通過卡片名字區(qū)分不同的卡片，根據(jù)不同的卡片執(zhí)行不同的業(yè)務(wù)邏輯。其次可以根據(jù)卡片的尺寸設(shè)置不同的卡片內(nèi)容。最終需要刷新卡片數(shù)據(jù)時(shí)，需要?jiǎng)?chuàng)建一個(gè)ZSONObject對(duì)象，將key-value設(shè)置進(jìn)去，其中key需要和index.json中的data數(shù)據(jù)中的key保持一致。然后創(chuàng)建一個(gè)ProviderFormInfo對(duì)象，將ZSONObject對(duì)象設(shè)置進(jìn)去，返回ProviderFormInfo對(duì)象給onCreateForm方法。
onUpdateForm方法
當(dāng)config.json中配置了定點(diǎn)更新或者定時(shí)更新，卡片服務(wù)會(huì)拉起卡片執(zhí)行界面更新。系統(tǒng)會(huì)回調(diào)onUpdateForm方法，應(yīng)用則調(diào)用updateForm去更新卡片內(nèi)容。onUpdateForm方法代碼示例如下：
圖19 onUpdateForm方法代碼示例
將需要更新的數(shù)據(jù)設(shè)置到ZSONObject對(duì)象中，然后通過FormBindingData對(duì)象攜帶ZSONObject對(duì)象，調(diào)用updateForm()方法去更新界面。
當(dāng)定時(shí)/定點(diǎn)觸發(fā)之后，以上代碼生效的效果界面如下：
圖20 定時(shí)觸發(fā)效果界面圖
同時(shí)日志輸出：
3.開發(fā)卡片界面元素
JS卡片頁面需要開發(fā)三個(gè)文件：hml、css、json，json文件主要配置數(shù)據(jù)和點(diǎn)擊事件。詳情請(qǐng)參考官網(wǎng)資料【JSON語法參考】。
● JSON語法參考
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-service-widget-syntax-json-0000001106228840
hml、css和json文件示例內(nèi)容如下：
index.hml文件
圖21 index.hml
index.json
圖22 index.json
index.css文件：
圖22 index.css
其中hml文件中聲明了服務(wù)卡片布局：
● 如果json文件中mini屬性為true，則顯示class=”mini_container”的text控件。
否則不顯示該控件，從而顯示class="items_container"的div布局，該布局從上到下顯示了一張圖片，兩個(gè)文本。所以if語句可以作為多張卡片時(shí)的判斷條件，用于顯示不同的布局。
● css文件則定義hml布局中的樣式，如寬高度、顏色等。
● json文件中定義卡片支持的數(shù)據(jù)和點(diǎn)擊事件。
實(shí)例代碼運(yùn)行效果如下(運(yùn)行在模擬器上的顯示效果)：
圖23 模擬器效果顯示圖
4.實(shí)現(xiàn)卡片界面交互
服務(wù)卡片json文件提供數(shù)據(jù)綁定和界面交互。
卡片僅支持click觸發(fā)的事件，事件的定義只能是直接命令式，事件定義必須包含action字段，用以說明事件類型。卡片支持兩種事件類型：跳轉(zhuǎn)事件(router)和消息事件(message)。跳轉(zhuǎn)事件可以跳轉(zhuǎn)到卡片提供方的組件;消息事件可以將開發(fā)者自定義信息傳遞給卡片提供方。
跳轉(zhuǎn)事件格式如下：
消息事件的格式如下：
json的樣例代碼如下：
圖24 json的樣例代碼
其中定義了一個(gè)routerEvent事件和imageEvent事件，這兩個(gè)事件在hml文件中應(yīng)用代碼如下：
圖25 routerEvent事件和imageEvent事件應(yīng)用代碼
routerEvent事件表示點(diǎn)擊卡片后跳轉(zhuǎn)到其他界面過去，而imageEvent是給圖片賦予了點(diǎn)擊事件，該點(diǎn)擊事件會(huì)通過onTriggerFormEvent方法，回調(diào)到Ability中過去。
在跳轉(zhuǎn)事件中，params參數(shù)在onStart()中的intent中可以提取，如下所示：
圖26 params參數(shù)在onStart()中的intent中的提取
json文件中params中定義的json對(duì)象字符串是通過intent.getStringParam(“params”)獲得，是一個(gè)json格式的字符串，可以通過構(gòu)建ZSONObject對(duì)象，獲取對(duì)應(yīng)的value值。
在消息事件中，params參數(shù)可以在onTriggerFormEvent的message中提取，如下所示：
圖27 params參數(shù)在onTriggerFormEvent中的提取
json文件中params定義的json對(duì)象字符串通過message變量傳遞到Java側(cè)的Ability中，在onTriggerFormEvent方法中可以根據(jù)該json字符串，去做對(duì)應(yīng)的業(yè)務(wù)邏輯。
如上面實(shí)例代碼所示，運(yùn)行出來的卡片界面效果如下：
圖28 卡片界面效果
若點(diǎn)擊了服務(wù)卡片上的圖片，則圖片下面的文字會(huì)變成“點(diǎn)擊后的標(biāo)題”和“這是通過json文件傳遞的內(nèi)容”，該字符串是在index.json的params中定義的。
3、服務(wù)卡片模板
為了方便開發(fā)者快速開發(fā)服務(wù)卡片，DevEco Studio中推出了服務(wù)卡片模板，分為“Basic”和“Advance”兩類，開發(fā)者可以根據(jù)業(yè)務(wù)需要選擇不同的模板。
圖29 DevEco Studio中的服務(wù)卡片模板圖
Grid Pattern(宮格卡片模板)
宮格卡片模板在大尺寸的卡片上特征較為明顯，能夠有規(guī)律進(jìn)行布局排列。例如展示多排應(yīng)用圖標(biāo)，每個(gè)熱區(qū)獨(dú)立可點(diǎn)擊，或展示影視海報(bào)等信息，以凸顯圖片為主，描述文本為輔。
Image With Info(圖文卡片模板)
圖文卡片模板主要在于展現(xiàn)圖片和一定數(shù)量文本的搭配，在這種布局下，圖片和文本屬于同等重要的信息。在不同尺寸下，圖片大小和文本數(shù)量會(huì)發(fā)生一定變化，用于凸顯關(guān)鍵信息。
Immersive Pattern(沉浸布局卡片模板)
圖片內(nèi)容是更能夠吸引用戶的展現(xiàn)形式，因此，沉浸式的布局能夠擁有更好的代入感和展現(xiàn)形式。相比較圖文和宮格類，這種布局在造型上的制約會(huì)更小，設(shè)計(jì)形式上的發(fā)揮空間更大，但在不同設(shè)備下的適配需要注意展示效果。
List Pattern(列表卡片模板)
列表卡片模板是展示信息時(shí)的常用界面組件，通常會(huì)在列表的左側(cè)或右側(cè)帶有圖片或點(diǎn)綴元素。這類布局的優(yōu)勢(shì)在于可以集中的展示較多信息量，并遵循有序的排列。常用于新聞?lì)悺⑺阉黝悜?yīng)用，方便用戶獲取關(guān)鍵的文本信息。
Call(通話卡片模板)
通話卡片模板主要用于在桌面顯示自定義的聯(lián)系人圖片和通話按鈕，在這種場(chǎng)景下，可以直接點(diǎn)擊卡片上的通話按鈕進(jìn)行快速呼叫。
Contact(聯(lián)系人卡片模板)
聯(lián)系人卡片模板主要用于在桌面顯示聯(lián)系人快捷按鈕，點(diǎn)擊某個(gè)聯(lián)系人快捷按鈕可快速進(jìn)入聯(lián)系人詳情頁，實(shí)現(xiàn)通過卡片快速跳轉(zhuǎn)聯(lián)系人詳情頁的功能。
DataPattern(數(shù)據(jù)內(nèi)容卡片模板)
數(shù)據(jù)內(nèi)容卡片模板主要用于在桌面展示自定義內(nèi)容的百分占比，這種卡片主體是一個(gè)環(huán)形百分比圖，用于凸顯關(guān)鍵的百分比信息。
Functions(功能卡片模板)
功能卡片模板主要用于在桌面上聚合不同功能的快捷入口，通過點(diǎn)擊卡片的某個(gè)功能，能夠?qū)崿F(xiàn)快速跳轉(zhuǎn)至對(duì)應(yīng)功能頁面。
MusicPlayer(音樂播放器卡片模板)
音樂播放器卡片模板主要用于在桌面展示一個(gè)音樂播放的控制界面，通過點(diǎn)擊卡片上的對(duì)應(yīng)功能按鈕，能夠?qū)崿F(xiàn)對(duì)音樂播放的控制。
Schedule(行程卡片模板)
行程卡片模板布局主要用于在卡片上展示行程關(guān)鍵信息，并帶有功能圖標(biāo)，可通過點(diǎn)擊功能圖標(biāo)查看詳細(xì)行程信息。
Shortcuts(捷徑卡片模板)
捷徑卡片模板布局主要用于在桌面展示多個(gè)快捷功能圖標(biāo)，在這種布局下，每個(gè)熱區(qū)獨(dú)立可點(diǎn)擊，可快速進(jìn)入相關(guān)功能。
更多卡片模板詳情和卡片模板使用方法可以參考官網(wǎng)資料【開發(fā)服務(wù)卡片】。
● 開發(fā)服務(wù)卡片
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_service_widget-0000001078566997
4、服務(wù)卡片部署
上述的服務(wù)卡片代碼和資源，可與App一起打包成一個(gè)entry hap進(jìn)行部署。同時(shí)，服務(wù)卡片還可以獨(dú)立成一個(gè)Module，作為HarmonyOS應(yīng)用的feature進(jìn)行獨(dú)立編譯和部署。無論是打包部署還是獨(dú)立部署，兩種方式構(gòu)建的服務(wù)卡片都可在 AGC和HAG市場(chǎng)上架和更新。
卡片代碼部署工程界面如下圖所示：
圖30 DevEco Studio中的卡片代碼部署工程界面圖
小Tips：調(diào)試安裝時(shí)，需要和Entry一起安裝，參考以下命令行：
總結(jié)
服務(wù)卡片作為HarmonyOS應(yīng)用和原子化服務(wù)的一部分對(duì)外呈現(xiàn)重要的信息，具有易用、智能、多端部署特性，能給用戶帶來嶄新的交互體驗(yàn)。
本文整體介紹了HarmonyOS服務(wù)卡片的運(yùn)行原理和開發(fā)方法，服務(wù)卡片運(yùn)行過程中主要是卡片管理服務(wù)作為中間樞紐，連接著卡片使用方和卡片提供方。服務(wù)卡片開發(fā)過程主要分為配置config.json、實(shí)現(xiàn)生命周期回調(diào)方法、開發(fā)卡片界面元素和界面交互，基于HarmonyOS提供的回調(diào)函數(shù)方法，簡(jiǎn)單的幾步就能開發(fā)出業(yè)務(wù)所需的服務(wù)卡片。
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
