ArkTS元服务与关系型数据库—计步卡片

作者：狼哥Army 2023-05-29 16:51:06数据库 其他数据库 这里主要讲解一下ArKTS开发服务卡片，服务Codelabs开发的关系是JS服务卡片，还有在把这个JS卡片改为用ArkTS过程中。型数

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

51CTO 开源基础软件社区

https://ost.51cto.com

前言

本篇帖子是卡片参考Codelab基于Stage模型JS服务卡片，使用最新ArkTS元服务开发的服务，实现带有卡片的关系计步应用，用于介绍卡片的型数开发及生命周期实现。需要完成以下功能：

1. 消息通知栏，据库计步通知用户今天所行走步数(行走步数是卡片模拟的)。
2. 元服务卡片，服务在桌面上添加2x2或2x4规格元服务卡片，关系能看到步数变化，型数也能看到当天所行走的据库计步进度。
3. 关系型数据库，卡片用于查询，添加用户行走的数据。

知识点

• 消息通知：提供通知管理的能力，包括发布、取消发布通知，创建、获取、移除通知通道，订阅、取消订阅通知，获取通知的使能状态、角标使能状态，获取通知的相关信息等。
• 关系型数据库：关系型数据库基于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)@Componentstruct 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。

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

51CTO 开源基础软件社区

https://ost.51cto.com

责任编辑：jianghua 来源： 51CTO 开源基础软件社区 ArKTS开发服务卡片

(责任编辑：时尚)