json卡片代码(卡片代码生成器)

json卡片代码(卡片代码生成器)

HarmonyOS的服务卡片以直观可视的展现形式、流畅的运行速度、服务直达的舒适体验刷新了人们对以往APP的认识。JS前端界面开发效率更高、页面样式更丰富、能力也更强,今天就为大家介绍如何使用JS开发一张服务卡片。

本次Demo使用的是即将上线的新版IDE,新版IDE将于6月30日上线,敬请期待~

下面我们以运动奖牌榜服务卡片为例,为大家介绍如何使用JS开发一张服务卡片。

1

服务卡片效果及开发思路

首先看一下运动奖牌榜服务卡片的效果和开发思路。

图1是运动奖牌榜服务卡片的效果图,开发这款服务卡片编码思路如下:

(1)卡片生命周期逻辑代码

(2)卡片前端页面代码

(3)配置文件代码

图1效果图

注:奖牌榜卡片的样式的代码建议,请注意不对最终展示负责,仅是代码拟制的示例。

有了思路后,下面我们准备进入编程。

2

服务卡片开发

2.1下载并安装IDE

工欲善其事,必先利其器!在编程之前,需要大家安装新版IDE。

https://developer.huawei.com/consumer/cn/forum/block/deveco-studio

2.2 创建卡片

服务卡片创建后,会出现图2所示的工程目录,同时IDE会自动生成ts的卡片生命周期函数、前端页面css hml json相关代码、以及卡片在config.json中的默认配置(图2红框所示)。开发者仅需要在对应的代码部分修改相应的逻辑即可实现卡片开发。

图2服务卡片工程目录

① form.ts:卡片生命周期逻辑代码。

② index.css:用来定义hml布局结构的样式。

③ index.hml:定义卡片页面的布局结构。

⑤ config.json:配置卡片的名称、描述、尺寸等各种信息。

⑥ RequestData.ts:编写奖牌榜的数据代码。

2.3 卡片生命周期逻辑

服务卡片创建后,在form.ts文件中,IDE会自动生成如下卡片生命周期方法:

// 创建卡片的生命周期方法,可以在该方法中将卡片信息持久化。onCreate(want) {};// 更新卡片数据的生命周期方法,可以在该方法中将数据进行刷新。onUpdate(formId) {};// 删除卡片通知。onDestroy(formId) {};// 将临时卡片转换为常态卡片。onCastToNormal(formId) {};// 处理卡片messageEvent触发事件。onEvent(formId, message) {};// 查询卡片状态的通知。onAcquireFormState(want) {};

(左右滑动查看代码)

对于卡片的生命周期部分,我们需要重写onCreate和onUpdate方法。

在onCreate方法中,我们请求奖牌榜的数据,并将请求到的数据返回给卡片进行展示。

在onUpdate方法中,我们更新奖牌榜的数据,并将更新后的数据返回给卡片进行展示。

代码如下:

// 请求奖牌榜的数据,并将请求到的数据返回给卡片进行展示onCreate(want) { let medalResult = RequestData.getMedalData(); let formData = JSON.parse(medalResult); return formBindingData.createFormBindingData(formData);}// 将更新后的数据发送给卡片进行展示onUpdate(formId) { let medalResult = RequestData.updateMedalData(); let formData = JSON.parse(medalResult); let data = formBindingData.createFormBindingData(formData); formProvider.updateForm(formId, formBindData);}

(左右滑动查看代码)

2.4 卡片的前端页面

服务卡片的前端界面我们用支持基于JS扩展的类Web范式来实现,即使用hml css json来实现。

首先将卡片的前端页面拆分成图3的结构。左边展示了三个省的奖牌信息,因此右边拆分为3个div(红框所示);左边每个省份的信息又可以再拆分成两个部分(蓝框所示),对应右边两个子div(其余两省同理)。

图3卡片前端界面拆分

卡片页面结构拆分后,接下来我们用index.hml文件定义卡片页面的布局结构,用如下代码来表示一个奖牌信息的div(其余div可复制粘贴这一个div的代码)。

<div class=”normal-card-style”> <div class=”normal-card-rank”> <div class=”normal-card-province-area”> <text class=”normal-card-province-text-style”>1</text> <text class=”normal-card-province-text-style”>{{ provinceList[0].province }}</text> </div> <div class=”normal-card-medal-area”> <text class=”normal-card-medal-count-text-style”>{{ provinceList[0].gold }}</text> <image class=”normal-card-medal-image-style” src=”/common/ic_medal_gold.png”></image> </div></div>

(左右滑动查看代码)

然后用index.css文件来定义index.hml布局结构的样式。我们用如下代码来表示奖牌榜卡片的样式。

/*整体布局的样式*/.root-layout { flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%;}/*整体卡片的样式*/.normal-card-style { height: 100%; width: 100%; flex-direction: column; padding: 12px; background:linear-gradient(180deg, rgba(219,242,255,1) 0%, rgba(219,242,255,1) 100%);}/*每个省份奖牌信息div的样式*/.normal-card-rank { height: 33%; width: 100%; flex-direction: row;}/*每个省份排名、名称的sub-div1的样式*/.normal-card-province-area { width: 50%; flex-direction: row; align-items: center;}/*每个省份排名、名称的sub-div1中所使用的text控件的样式*/.normal-card-province-text-style { font-size: 16px; margin-right: 6px;}/*每个省份奖牌数量,奖牌图片的sub-div2的样式*/.normal-card-medal-area { width: 50%; flex-direction: row; align-items: center; justify-content: flex-end;}/*每个省份奖牌数量的text控件样式*/.normal-card-medal-count-text-style { font-size: 16px; margin-right: 6px; color: black;}/*每个省份奖牌图片的image控件样式*/.normal-card-medal-image-style { width: 24px; height: 24px;}

(左右滑动查看代码)

(左右滑动查看代码)

2.5 卡片的配置

服务卡片的配置需要在config.json中进行,使系统能够识别该应用为一款卡片应用,并使之与系统进行绑定。卡片配置的部分属性如下所示。

{ “forms”: [ { “name”: “widget”, // 卡片的名称 “description”: “This is a service widget.”, // 卡片的描述 “jsComponentName”: “widget”, // 卡片前端UI代码的component名称 “isDefault”: true, // 表示该卡片是否为默认卡片 “scheduledUpdateTime”: “10:30”, // 卡片定点刷新的时间 “defaultDimension”: “2*2”, // 卡片的默认尺寸 “colorMode”: “auto”, // 卡片的主题样式 “type”: “JS”, // 卡片的类型 “formVisibleNotify”: true, // 是否允许卡片使用可见性通知 “supportDimensions”: [ // 卡片的外观规格:1*2、2*2、2*4、4*4 “2*2” ], “updateEnabled”: true, // 卡片是否支持周期性刷新 “updateDuration”: 1 // 卡片定时刷新的更新周期,单位为30分钟 } ]}

(左右滑动查看代码)

至此,就已经实现了卡片生命周期逻辑、卡片的前端页面和卡片的配置三个重要的部分,最后在RequestData工具类中完成请求的数据代码,以及在common中加入奖牌图标,就可以预览效果啦~

3

结语

以上就是如何用JS开发服务卡片的全部介绍啦,最后再为大家总结一下JS语言的优势:

1. JS语言很适合开发各种形态的终端设备上的应用,而且具有很好的跨平台、跨设备、全栈的特点。

2. JS有非常强大的生态社区,可以非常方便地用于搭建JS应用和服务,可以极大降低JS应用开发的复杂性和技术门槛。

3. 相比静态类型开发语言,JS因为动态类型和类脚本语言的特点,开发类似功能的应用时,JS代码一般行数更少。

基于JS语言的各种优势,HarmonyOS选择将JS作为其应用开发主流语言。另外将于6月30日发布的新版IDE将使JS语言能支持复杂界面绘制,且JS应用启动速度提升50%,敬请期待吧~

获取更多使用JS开发服务卡片内容

发表评论

登录后才能评论