HarmonyOS 3.1上实现计步卡片
本篇帖子是参考 codelab 基于 stage 模型 js 服务卡片，使用最新 arkts 元服务开发的，实现带有卡片的计步应用，用于介绍卡片的开发及生命周期实现。
需要完成以下功能：
消息通知栏，通知用户今天所行走步数(行走步数是模拟的)。
元服务卡片，在桌面上添加 2x2 或 2x4 规格元服务卡片，能看到步数变化，也能看到当天所行走的进度。
关系型数据库，用于查询，添加用户行走的数据。
知识点
消息通知：提供通知管理的能力，包括发布、取消发布通知，创建、获取、移除通知通道，订阅、取消订阅通知，获取通知的使能状态、角标使能状态，获取通知的相关信息等。
关系型数据库：关系型数据库基于 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 组件来生成曲线图表：
在 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.
④服务卡片如何接收更新数据，卡片页面如何接收，后台如何更新。
卡片页面如何接收，比如步数参数如何定义：
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 参考，平常多看和参加学堂视频课程，有了一定的知识量，做项目或回答一些问题，就是这么简单了。
基于RFID技术的猪舍门读卡器
一加5什么时候上市？一加5这次终于跑不掉了！继小米6以来首发骁龙835
PLC如何快速上手学习
虹科小课堂 | 如何在介质密度高于最大值时精确测定液体密度？
瑞芯微联合Arm和OPEN AI LAB共同发布AI开发平台
HarmonyOS 3.1上实现计步卡片
努比亚方糖充电器可以为iPhone供电
碱性电池充电器电路图
FPGA电路必须遵循的原则和技巧
都有哪些企业被美国列入“实体清单”?
区块链到底有多火？有人放弃“金领”改行区块链
新式无镜头相机瞄准物联网应用
广州今年下半年将全面布局5G网络力争建成5G宏基站1万座
iphone7惊现姨妈红，就问库克这是不是你的新套路？
新型断条光电自停装置的设计
首届“95公益周”启动 用人工智能种下你们的蚂蚁森林
最新研究证明波长为222nm的远UVC光可灭99.9%的活冠状病毒
PWM调制的控制方式
小型耳机放大器的DIY图解
高精度电流传感器选型指南
需要完成以下功能：
消息通知栏，通知用户今天所行走步数(行走步数是模拟的)。
元服务卡片，在桌面上添加 2x2 或 2x4 规格元服务卡片，能看到步数变化，也能看到当天所行走的进度。
关系型数据库，用于查询，添加用户行走的数据。
知识点
消息通知：提供通知管理的能力，包括发布、取消发布通知，创建、获取、移除通知通道，订阅、取消订阅通知，获取通知的使能状态、角标使能状态，获取通知的相关信息等。
关系型数据库：关系型数据库基于 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 组件来生成曲线图表：
在 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.
④服务卡片如何接收更新数据，卡片页面如何接收，后台如何更新。
卡片页面如何接收，比如步数参数如何定义：
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 参考，平常多看和参加学堂视频课程，有了一定的知识量，做项目或回答一些问题，就是这么简单了。
基于RFID技术的猪舍门读卡器
一加5什么时候上市？一加5这次终于跑不掉了！继小米6以来首发骁龙835
PLC如何快速上手学习
虹科小课堂 | 如何在介质密度高于最大值时精确测定液体密度？
瑞芯微联合Arm和OPEN AI LAB共同发布AI开发平台
HarmonyOS 3.1上实现计步卡片
努比亚方糖充电器可以为iPhone供电
碱性电池充电器电路图
FPGA电路必须遵循的原则和技巧
都有哪些企业被美国列入“实体清单”?
区块链到底有多火？有人放弃“金领”改行区块链
新式无镜头相机瞄准物联网应用
广州今年下半年将全面布局5G网络力争建成5G宏基站1万座
iphone7惊现姨妈红，就问库克这是不是你的新套路？
新型断条光电自停装置的设计
首届“95公益周”启动 用人工智能种下你们的蚂蚁森林
最新研究证明波长为222nm的远UVC光可灭99.9%的活冠状病毒
PWM调制的控制方式
小型耳机放大器的DIY图解
高精度电流传感器选型指南