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