ArkTS元服務與關系型數據庫—計步卡片
作者：狼哥Army
這里主要講解一下ArKTS開發服務卡片，Codelabs開發的是JS服務卡片，還有在把這個JS卡片改為用ArkTS過程中。
前言
本篇帖子是參考Codelab基于Stage模型JS服務卡片，使用最新ArkTS元服務開發的，實現帶有卡片的計步應用，用于介紹卡片的開發及生命周期實現。需要完成以下功能：
- 消息通知欄，通知用戶今天所行走步數(行走步數是模擬的)。
- 元服務卡片，在桌面上添加2x2或2x4規格元服務卡片，能看到步數變化，也能看到當天所行走的進度。
- 關系型數據庫，用于查詢，添加用戶行走的數據。
知識點
- 消息通知：提供通知管理的能力，包括發布、取消發布通知，創建、獲取、移除通知通道，訂閱、取消訂閱通知，獲取通知的使能狀態、角標使能狀態，獲取通知的相關信息等。
- 關系型數據庫：關系型數據庫基于SQLite組件提供了一套完整的對本地數據庫進行管理的機制，對外提供了一系列的增、刪、改、查等接口，也可以直接運行用戶輸入的SQL語句來滿足復雜的場景需要。
- 元服務卡片開發：卡片是一種界面展示形式，可以將應用的重要信息或操作前置到卡片，以達到服務直達、減少體驗層級的目的。
- 卡片提供方：顯示卡片內容，控制卡片布局以及控件點擊事件。
- 卡片使用方：顯示卡片內容的宿主應用，控制卡片在宿主中展示的位置。
- 卡片管理服務：用于管理系統中所添加卡片的常駐代理服務，包括卡片對象的管理與使用，以及卡片周期性刷新等。
- 軟件要求
- DevEco Studio版本：DevEco Studio 3.1 Release及以上版本。
- HarmonyOS SDK版本：API version 9及以上版本。
- 硬件要求
- 設備類型：華為手機3.1系統或運行在DevEco Studio上的遠程模擬器API9。
- HarmonyOS系統：3.1.0 DeveloperRelease及以上版本。
講解
卡片更新邏輯和Codelabs是一樣的，詳情可以移步到Stage模型卡片（ArkTS）細看， 這里主要講解一下ArKTS開發服務卡片，Codelabs開發的是JS服務卡片，還有在把這個JS卡片改為用ArkTS過程中，需要注意的地方：
使用關系型數據庫時，Codelabs與使用最新版本API不同之處：
Codelabs源碼：
await DataRdb.getRdbStore(context, CommonConstants.RDB_STORE_CONFIG)
.then((rdbStore: DataRdb.RdbStore) => {本項目源碼：
await DataRdb.getRdbStore(context, CommonConstants.RDB_STORE_CONFIG)
.then((rdbStore) => {使用Chart組件和Polyline組件：
在JS服務卡片可以使用Chart組件來生成曲線圖表：
<chart type="line" id="Chart" datasets="{{ datasets }}" options="{{ options }}"></chart>在ArkTS服務卡片，使用不了Chart組件，用Polyline組件來代替：
Polyline().width('100%').height('100%').points(this.setPolyLine(this.datasets))默認EntryAbility.ts和EntryFormAbility.ts兩個文件的后輟都是ts的，其他文件后輟是ets的，當想在這兩個文件import其它文件時，提示以下信息，于是我把這兩個文件后輟都改為ets了。
Importing ArkTS files to JS and TS files is not allowed. <etsLint>服務卡片如何接收更新數據，卡片頁面如何接收，后臺如何更新。
卡片頁面如何接收，比如步數參數如何定義：
let storage = new LocalStorage();
@Entry(storage)
@Component
struct WidgetCard {
@LocalStorageProp('steps') steps: number = 0;
......后臺如何更新：
// 創建卡片
let formData: FormData = new FormData();
formData.percent = 0;
formData.steps = 0;
return FormBindingData.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}) // 設置strokeWidth進度條寬度為12vp
Column() {
Text('步數')
.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": "add detail"
}
});
})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)
// 設置折線拐角處為圓弧
.strokeLineJoin(LineJoinStyle.Round)
// 設置折線兩端為半圓
.strokeLineCap(LineCapStyle.Round)
}
.width('50%')
}
}
.width(this.FULL_WIDTH_PERCENT)
.height(this.FULL_HEIGHT_PERCENT)總結
通過學習Cabelabs案例，我們可以快速學到實踐知識，通過查看文檔指南，我們可以了解到更細的知識點，當我們腦子里有了一個應用的模型，所以通過Codelabs相似案例知識點，加上查看文檔指南、API參考，平常多看和參加學堂視頻課程，有了一定的知識量，做項目或回答一些問題，就是這么簡單了。
文章相關附件可以點擊下面的原文鏈接前往下載：
https://ost.51cto.com/resource/2750。
責任編輯：jianghua
來源：
51CTO 開源基礎軟件社區
