HarmonyOS鸿蒙Next万能卡片-Codelabs挑战赛限行日历

应用简介

本文章是参加“【有奖速戳【Codelabs限时挑战赛】和李洋老师手把手开发一个简单的鸿蒙万能卡片”活动写的一个应用介绍，活动地址：

https://developer.huawei.com/consumer/cn/forum/topic/0204119610018312075?fid=0101271690375130218

本文档通过学习服务卡片的开发，自己制作了一个简单的限行日历，主页显示当前日期、星期和限行信息，以及一些随机的谚语，背景会根据不同的星期自动变换。服务卡片支持五种类型，分别为1x2.显示星期，1x2.显示限号，2x2.显示日期，2x4.显示限号和谚语，4x4显示日期和限号。其中星期卡片每天会自动变换颜色，不同颜色代表不同星期。

效果预览

简要介绍

程序的主页面显示当日的星期，日期和限行号码，以及每日一言。不同日期显示的背景图片会自动变化，

星期六背景的主页

星期日背景的主页

长按桌面的图标，进入服务卡片会有五种服务卡片，

1x2 大小/ 2x2大小 / 2x4大小 / 4x4大小

卡片添加到桌面后，会根据当前日期进行变化，

比如星期五，限行为3和8

比如星期日，不限行

代码分析

卡片都是使用的ets语言开发的，

1x2限号卡片的页面布局如下，

@State dayIndex : number = 0
@State bgColor : string = "#000000"
@State curWeekday : string = "星期一"
@State currentLimit : string = "5 和 0"

build() {
  Row() {
    Column() {
      Text("限行：" + this.currentLimit)
        .fontSize($r('app.float.font_size'))
        .fontColor(Color.Red)
        .fontWeight(FontWeight.Bold)
    }
    .width(this.FULL_WIDTH_PERCENT)
  }
  .height(this.FULL_HEIGHT_PERCENT)
  .onClick(() => {
    postCardAction(this, {
      "action": this.ACTION_TYPE,
      "abilityName": this.ABILITY_NAME,
      "params": {
        "message": this.MESSAGE
      }
    });
  })
}

在组件的aboutToAppear函数中进行一些数据的初始话，

aboutToAppear() {
  let date = new Date();
  this.dayIndex = date.getDay()
  this.curWeekday = this.weekday_array[date.getDay()]
  this.currentLimit = this.limit_array[date.getDay()]
}

所有卡片的配置都在resources\base\profile\form_config.json中，

{
  "forms": [
    {
      "name": "widget2x2",
      "description": "当前日期",
      "src": "./ets/widget/pages/WidgetCard_2x2.ets",
      "uiSyntax": "arkts",
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDefault": true,
      "updateEnabled": true,
      "scheduledUpdateTime": "10:30",
      "updateDuration": 1,
      "defaultDimension": "2*2",
      "supportDimensions": [
        "2*2"
      ]
    },
    // 其他卡片配置...
  ]
}

项目总结

服务卡片支持js和ets两种语言的开发，以前只支持js语言，ets语言是新版本3.1中才支持的，以前使用js语言开发过一次服务卡片，这次体验的是采用ets开发的，对比了一下，感觉ets比js开发上要简单方便很多，效率明显提高了。

代码地址

https://gitee.com/droidzxy/servicecard/tree/master/CalendarCard