ArkTS元服務與關系型數(shù)據(jù)庫—計步卡片

作者：狼哥Army 2023-05-29 16:51:06

數(shù)據(jù)庫其他數(shù)據(jù)庫

這里主要講解一下ArKTS開發(fā)服務卡片，Codelabs開發(fā)的是JS服務卡片，還有在把這個JS卡片改為用ArkTS過程中。

想了解更多關于開源的內(nèi)容，請訪問：

51CTO 開源基礎軟件社區(qū)

https://ost.51cto.com

前言

本篇帖子是參考Codelab基于Stage模型JS服務卡片，使用最新ArkTS元服務開發(fā)的，實現(xiàn)帶有卡片的計步應用，用于介紹卡片的開發(fā)及生命周期實現(xiàn)。需要完成以下功能：

消息通知欄，通知用戶今天所行走步數(shù)(行走步數(shù)是模擬的)。
元服務卡片，在桌面上添加2x2或2x4規(guī)格元服務卡片，能看到步數(shù)變化，也能看到當天所行走的進度。
關系型數(shù)據(jù)庫，用于查詢，添加用戶行走的數(shù)據(jù)。

ArkTS元服務與關系型數(shù)據(jù)庫-計步卡片-開源基礎軟件社區(qū)

知識點

消息通知：提供通知管理的能力，包括發(fā)布、取消發(fā)布通知，創(chuàng)建、獲取、移除通知通道，訂閱、取消訂閱通知，獲取通知的使能狀態(tài)、角標使能狀態(tài)，獲取通知的相關信息等。
關系型數(shù)據(jù)庫：關系型數(shù)據(jù)庫基于SQLite組件提供了一套完整的對本地數(shù)據(jù)庫進行管理的機制，對外提供了一系列的增、刪、改、查等接口，也可以直接運行用戶輸入的SQL語句來滿足復雜的場景需要。
元服務卡片開發(fā)：卡片是一種界面展示形式，可以將應用的重要信息或操作前置到卡片，以達到服務直達、減少體驗層級的目的。

卡片提供方：顯示卡片內(nèi)容，控制卡片布局以及控件點擊事件。
卡片使用方：顯示卡片內(nèi)容的宿主應用，控制卡片在宿主中展示的位置。
卡片管理服務：用于管理系統(tǒng)中所添加卡片的常駐代理服務，包括卡片對象的管理與使用，以及卡片周期性刷新等。

軟件要求

DevEco Studio版本：DevEco Studio 3.1 Release及以上版本。
HarmonyOS SDK版本：API version 9及以上版本。

硬件要求

設備類型：華為手機3.1系統(tǒng)或運行在DevEco Studio上的遠程模擬器API9。
HarmonyOS系統(tǒng)：3.1.0 DeveloperRelease及以上版本。

講解

卡片更新邏輯和Codelabs是一樣的，詳情可以移步到Stage模型卡片（ArkTS）細看，這里主要講解一下ArKTS開發(fā)服務卡片，Codelabs開發(fā)的是JS服務卡片，還有在把這個JS卡片改為用ArkTS過程中，需要注意的地方：

使用關系型數(shù)據(jù)庫時，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>

服務卡片如何接收更新數(shù)據(jù)，卡片頁面如何接收，后臺如何更新。
卡片頁面如何接收，比如步數(shù)參數(shù)如何定義：

let storage = new LocalStorage();

@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp('steps') steps: number = 0;
  ......

后臺如何更新：

// 創(chuàng)建卡片
    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('步數(shù)')
          .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)