本篇帖子是參考 Codelab 基于 Stage 模型 JS 服務(wù)卡片，使用最新 ArkTS 元服務(wù)開發(fā)的，實現(xiàn)帶有卡片的計步應(yīng)用，用于介紹卡片的開發(fā)及生命周期實現(xiàn)。

需要完成以下功能：

消息通知欄，通知用戶今天所行走步數(shù)(行走步數(shù)是模擬的)。

元服務(wù)卡片，在桌面上添加 2x2 或 2x4 規(guī)格元服務(wù)卡片，能看到步數(shù)變化，也能看到當(dāng)天所行走的進度。

關(guān)系型數(shù)據(jù)庫，用于查詢，添加用戶行走的數(shù)據(jù)。

知識點

消息通知：提供通知管理的能力，包括發(fā)布、取消發(fā)布通知，創(chuàng)建、獲取、移除通知通道，訂閱、取消訂閱通知，獲取通知的使能狀態(tài)、角標(biāo)使能狀態(tài)，獲取通知的相關(guān)信息等。

關(guān)系型數(shù)據(jù)庫：關(guān)系型數(shù)據(jù)庫基于 SQLite 組件提供了一套完整的對本地數(shù)據(jù)庫進行管理的機制，對外提供了一系列的增、刪、改、查等接口，也可以直接運行用戶輸入的 SQL 語句來滿足復(fù)雜的場景需要。

元服務(wù)卡片開發(fā)：卡片是一種界面展示形式，可以將應(yīng)用的重要信息或操作前置到卡片，以達到服務(wù)直達、減少體驗層級的目的。

卡片提供方：顯示卡片內(nèi)容，控制卡片布局以及控件點擊事件。

卡片使用方：顯示卡片內(nèi)容的宿主應(yīng)用，控制卡片在宿主中展示的位置。

卡片管理服務(wù)：用于管理系統(tǒng)中所添加卡片的常駐代理服務(wù)，包括卡片對象的管理與使用，以及卡片周期性刷新等。

軟件要求：

DevEco Studio版本：DevEco Studio 3.1 Release及以上版本。

HarmonyOS SDK版本：API version 9及以上版本。

硬件要求：

設(shè)備類型：華為手機 3.1 系統(tǒng)或運行在 DevEco Studio 上的遠程模擬器 API9。

HarmonyOS 系統(tǒng)：3.1.0 DeveloperRelease 及以上版本。

講解

卡片更新邏輯和Codelabs是一樣的，詳情可以移步到 Stage 模型卡片（ArkTS）細看，這里主要講解一下 ArKTS 開發(fā)服務(wù)卡片。

Codelabs 開發(fā)的是 JS 服務(wù)卡片，還有在把這個 JS 卡片改為用 ArkTS 過程中，需要注意的地方：

①使用關(guān)系型數(shù)據(jù)庫時，Codelabs 與使用最新版本 API 不同之處：

Codelabs 源碼：

awaitDataRdb.getRdbStore(context,CommonConstants.RDB_STORE_CONFIG)
.then((rdbStore:DataRdb.RdbStore)=>{

awaitDataRdb.getRdbStore(context,CommonConstants.RDB_STORE_CONFIG)
.then((rdbStore)=>{

②使用 Chart 組件和 Polyline 組件：

在 JS 服務(wù)卡片可以使用 Chart 組件來生成曲線圖表：

在 ArkTS 服務(wù)卡片，使用不了 Chart 組件，用 Polyline 組件來代替：

Polyline().width('100%').height('100%').points(this.setPolyLine(this.datasets))

③默認 EntryAbility.ts 和 EntryFormAbility.ts 兩個文件的后輟都是 ts 的，其他文件后輟是 ets 的，當(dāng)想在這兩個文件 import 其它文件時，提示以下信息，于是我把這兩個文件后輟都改為 ets 了。

ImportingArkTSfilestoJSandTSfilesisnotallowed.

④服務(wù)卡片如何接收更新數(shù)據(jù)，卡片頁面如何接收，后臺如何更新。

卡片頁面如何接收，比如步數(shù)參數(shù)如何定義：

letstorage=newLocalStorage();

@Entry(storage)
@Component
structWidgetCard{
@LocalStorageProp('steps')steps:number=0;

后臺如何更新：

//創(chuàng)建卡片
letformData:FormData=newFormData();
formData.percent=0;
formData.steps=0;
returnFormBindingData.createFormBindingData(formData);
//更新卡片
FormProvider.updateForm(formData.formId,FormBindingData.createFormBindingData(formData))

2x2 卡片界面部分代碼：

Stack(){
Image($r("app.media.icon_2x2_card_background"))
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.objectFit(ImageFit.Cover)

Progress({value:this.percent,total:100,type:ProgressType.Ring}).width(100).height(100)
.color(Color.White)//進度條前景色為灰色
.style({strokeWidth:12})//設(shè)置strokeWidth進度條寬度為12vp
Column(){
Text('步數(shù)')
.fontSize(10)
.fontColor($r('app.color.text_font_color'))
Text(this.steps.toString())
.fontSize(26)
.fontColor($r('app.color.text_font_color'))
Text('步')
.fontSize(10)
.fontColor($r('app.color.text_font_color'))
}
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.padding($r('app.float.column_padding'))
}
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.onClick(()=>{
postCardAction(this,{
"action":"router",
"abilityName":"EntryAbility",
"params":{
"message":"adddetail"
}
});
})

2x4 卡片界面部分代碼：

Stack(){
Image($r("app.media.icon_2x4_card_background"))
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)
.objectFit(ImageFit.Cover)
Row(){
Column(){
Text(`今天走了${this.mileage}米`)
.fontSize(16)
.fontWeight(400)
.opacity(0.9)
.fontColor($r('app.color.text_font_color'))
Row(){
Text(this.steps.toString())
.fontSize(40)
.fontWeight(700)
.fontColor($r('app.color.text_font_color'))
Text('步')
.fontSize(16)
.fontWeight(400)
.opacity(0.9)
.fontColor($r('app.color.text_font_color'))
.margin({left:5,bottom:-10})
}
.margin({top:10,bottom:10})
Text(`${this.percent}%`)
.fontSize(16)
.fontWeight(400)
.fontColor($r('app.color.text_font_color'))
Progress({value:this.percent,total:100,type:ProgressType.Linear})
.color('#FFFFFF')
.backgroundColor('#40FFFFFF')
.style({strokeWidth:6})
.margin({top:4})
}
.width('50%')
.height(this.FULL_HEIGHT_PERCENT)
.alignItems(HorizontalAlign.Start)
.justifyContent(FlexAlign.Center)
.padding($r('app.float.column_padding'))
Column(){
Polyline()
.width('100%').height('100%')
.points(this.setPolyLine(this.datasets))
.strokeDashOffset(-50)
.fillOpacity(0)
.strokeOpacity(0.5)
.stroke(Color.White)
.strokeWidth(3)
//設(shè)置折線拐角處為圓弧
.strokeLineJoin(LineJoinStyle.Round)
//設(shè)置折線兩端為半圓
.strokeLineCap(LineCapStyle.Round)
}
.width('50%')
}

}
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)

總結(jié)

通過學(xué)習(xí) Cabelabs 案例，我們可以快速學(xué)到實踐知識，通過查看文檔指南，我們可以了解到更細的知識點。

當(dāng)我們腦子里有了一個應(yīng)用的模型，所以通過 Codelabs 相似案例知識點，加上查看文檔指南、API 參考，平常多看和參加學(xué)堂視頻課程，有了一定的知識量，做項目或回答一些問題，就是這么簡單了。

審核編輯：湯梓紅