13518219792
根据您的个性需求进行定制 先人一步 抢占小程序红利时代
想了解更多关于开源的内容，请访问：
开源基础软件社区
https://ost.
本篇帖子是参考Codelab基于Stage模型JS服务卡片，使用最新ArkTS元服务开发的，实现带有卡片的计步应用，用于介绍卡片的开发及生命周期实现。需要完成以下功能：
卡片更新逻辑和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)
@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./resource/2750。
想了解更多关于开源的内容，请访问：
开源基础软件社区
https://ost.
