想了解更多关于开源的服务内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com

前言

本篇帖子是关系参考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) => {1.2.

本项目源码：

复制await DataRdb.getRdbStore(context, CommonConstants.RDB_STORE_CONFIG) .then((rdbStore) => {1.2.

使用Chart组件和Polyline组件：

在JS服务卡片可以使用Chart组件来生成曲线图表： 复制<chart type="line" id="Chart" datasets="{{ datasets}}" options="{{ options}}"></chart>1.

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

复制Polyline().width(100%).height(100%).points(this.setPolyLine(this.datasets))1.

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

复制Importing ArkTS files to JS and TS files is not allowed. <etsLint>1.

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

卡片页面如何接收，IT技术网比如步数参数如何定义： 复制let storage = new LocalStorage(); @Entry(storage) @Component struct WidgetCard { @LocalStorageProp(steps) steps: number = 0; ......1.2.3.4.5.6.7.

后台如何更新：

复制// 创建卡片 let formData: FormData = new FormData(); formData.percent = 0; formData.steps = 0; return FormBindingData.createFormBindingData(formData); // 更新卡片 FormProvider.updateForm(formData.formId, FormBindingData.createFormBindingData(formData))1.2.3.4.5.6.7.

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" } }); })1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.

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)1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50.51.52.53.54.55.56.57.58.59.60.

总结

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

文章相关附件可以点击下面的原文链接前往下载：

 https://ost.51cto.com/resource/2750。

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com

(责任编辑：IT科技类资讯)