ArkTS元服务与关系型数据库-计步卡片原创精华

狼哥Army

发布于 2023-5-26 14:52

浏览

4收藏

前言

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

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

ArkTS元服务与关系型数据库-计步卡片-鸿蒙开发者社区

知识点

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

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

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

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.