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

数据库 其他数据库
这里主要讲解一下ArKTS开发服务卡片,Codelabs开发的是JS服务卡片,还有在把这个JS卡片改为用ArkTS过程中。

想了解更多关于开源的内容,请访问:

51CTO 开源基础软件社区

https://ost.51cto.com

前言

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

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

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) => {

本项目源码:

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)
@Component
struct 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 开源基础软件社区
相关推荐

2018-07-18 09:16:39

关系型非关系型数据库

2021-09-06 10:24:12

鸿蒙HarmonyOS应用

2011-05-12 09:51:26

2013-01-25 15:19:42

大数据关系型数据库

2017-03-17 14:44:04

关系型数据库原理

2010-12-10 10:17:21

关系型数据库

2022-06-13 08:30:01

数据库管理系统

2022-05-27 07:37:38

关系型数据库Spanner

2018-01-29 12:56:27

数据库关系型数据库NewSQL

2013-04-26 16:18:29

大数据全球技术峰会

2021-01-26 13:31:48

数据库关系型数据库冗余

2023-05-22 16:10:51

动态共享包数据库

2022-12-27 08:38:45

关系型数据库设计

2021-07-28 14:40:57

鸿蒙HarmonyOS应用

2016-08-23 14:25:19

MySQL约束数据库

2022-07-27 08:32:01

数据库MySQL

2023-05-20 08:11:55

2022-09-05 17:52:44

数据库技术

2015-03-30 10:16:22

2018-03-26 12:58:52

数据库OracleMySQL
点赞
收藏

51CTO技术栈公众号