HarmonyOS 3.1上实现计步卡片

本篇帖子是参考 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 源码：

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

本项目源码：

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

②使用 Chart 组件和 Polyline 组件：

在 JS 服务卡片可以使用 Chart 组件来生成曲线图表：

在 ArkTS 服务卡片，使用不了 Chart 组件，用 Polyline 组件来代替：

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

③默认 EntryAbility.ts 和 EntryFormAbility.ts 两个文件的后辍都是 ts 的，其他文件后辍是 ets 的，当想在这两个文件 import 其它文件时，提示以下信息，于是我把这两个文件后辍都改为 ets 了。

ImportingArkTSfilestoJSandTSfilesisnotallowed.

④服务卡片如何接收更新数据，卡片页面如何接收，后台如何更新。

卡片页面如何接收，比如步数参数如何定义：

letstorage=newLocalStorage();

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

后台如何更新：

//创建卡片
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})//设置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":"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)
//设置折线拐角处为圆弧
.strokeLineJoin(LineJoinStyle.Round)
//设置折线两端为半圆
.strokeLineCap(LineCapStyle.Round)
}
.width('50%')
}

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

总结

通过学习 Cabelabs 案例，我们可以快速学到实践知识，通过查看文档指南，我们可以了解到更细的知识点。

当我们脑子里有了一个应用的模型，所以通过 Codelabs 相似案例知识点，加上查看文档指南、API 参考，平常多看和参加学堂视频课程，有了一定的知识量，做项目或回答一些问题，就是这么简单了。

审核编辑：汤梓红