如果中国空间站用上了鸿蒙系统会怎么样？
6 月 17 日，神舟十二号发射圆满成功。据了解，中国航天使用的是我国自主研发的麒麟操作系统，“天问一号”成功着陆火星使用的就是该系统。不少网友误认为是华为操作系统，而华为用是鸿蒙系统和麒麟芯片，与航天用的麒麟系统根本没什么关系。
那么假如中国空间站用上了鸿蒙系统会怎么样呢？下面手把手教大家开发中国空间站专属太阳能板鸿蒙小卡片！
01
项目背景
鸿蒙在手机 beta3 中新增了桌面卡片，我也是在第一时间体验了一下新浪新闻鸿蒙版的新闻小卡片，觉得非常有意思。
并且我觉得可以用在物联网项目的污水液位计的液位展示中，可以实现碰一碰获取液位计数据展示在小卡片中。
harmonyos 推出的服务卡片，是 fa（feature ability）的界面展现形式，将 fa 的重要信息或者操作前置到卡片上，以达到服务直达的目的。
02
服务卡片的 ui 设计
①尺寸选择
鸿蒙的服务卡片尺寸分别为：微（1×2）、小（ 2×2 ）、中（ 2×4 ）、大（4×4）4 种尺寸。
污水液位计卡片展示数据比较少，所以我选了 2×2 的小卡片，和 2×4 的小卡片。
2*2 的小卡片主要是展示的是单个液位计的数据，而 2×4 的小卡片展示的是多个液位计的数据的总体展示。
②内容构成
服务卡片由多种设计元素组合而成，以下 7 种常见信息元素可以作为内容选择：图标、数据、文本、按钮、图片、宫格、列表。
污水液位计卡片我觉得主要展示的是当前的液位和液位计的历史曲线，所以我这个污水液位计卡片由数据、文本、曲线图、列表和按钮组成。
③污水液位计卡片原型设计
采用水平垂直居中的布局，因为重要的数据是当前液位，所以当前液位采用 18px 的黑色字体，点击用是 #53a7f3 颜色的 15px 字，曲线使用 #53a7f3 颜色更显科技感。
03
基本概念
①卡片使用方
显示卡片内容的宿主应用，控制卡片在宿主中展示的位置。
②卡片管理服务
用于管理系统中所添加卡片的常驻代理服务，包括卡片对象的管理与使用，以及卡片周期性刷新等。
③卡片提供方
提供卡片显示内容的 harmonyos 应用或原子化服务，控制卡片的显示内容、控件布局以及控件点击事件。
04
运作机制
卡片管理服务包含以下模块：
周期性刷新：在卡片添加后，根据卡片的刷新策略启动定时任务周期性触发卡片的刷新。
卡片缓存管理：在卡片添加到卡片管理服务后，对卡片的视图信息进行缓存，以便下次获取卡片时可以直接返回缓存数据，降低时延。
卡片生命周期管理：对于卡片切换到后台或者被遮挡时，暂停卡片的刷新；以及卡片的升级/卸载场景下对卡片数据的更新和清理。
卡片使用方对象管理：对卡片使用方的 rpc 对象进行管理，用于使用方请求进行校验以及对卡片更新后的回调处理。
通信适配层：负责与卡片使用方和提供方进行 rpc 通信。
卡片提供方包含以下模块：
①卡片服务：由卡片提供方开发者实现，开发者实现 oncreateform、onupdateform 和 ondeleteform 处理创建卡片、更新卡片以及删除卡片等请求，提供相应的卡片服务。
卡片提供方实例管理模块：由卡片提供方开发者实现，负责对卡片管理服务分配的卡片实例进行持久化管理。
②通信适配层：由 harmonyos sdk 提供，负责与卡片管理服务通信，用于将卡片的更新数据主动推送到卡片管理服务。
05
服务卡片开发环境搭建和开发
①开发环境
一台升级了鸿蒙 2.0 的手机/登录华为开发者账号使用远程模拟器。
下载安装 deveco studio 2.1 release，deveco下载安装教程：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/installation_process-0000001071425528
因为本文的重点是卡片，deveco 安装教程和真机调试请看下面我的教程：
https://blog.csdn.net/qq_33259323/article/details/112405157
②新建 harmonyos 手机项目
api 选择 5，show in service senter 打勾
③卡片基础配置
然后打开配置文件 src/main/config.json，配置你所需要的卡片样式，详细配置请看：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-elements-0000000000034463#zh-cn_topic_0000001064016070__table8276925145611
我这边选择的是 2*2 的小卡片，其他的都是默认所以只需要改一下名字和描述，注意文件夹名字要和 name 对应，如果不对应就是白卡片。
④卡片基础界面编写代码
编写 hml，通过 {{}} 绑定 index.json 里面的数据：
《div class=“container”》
《div class=“title”》
《text class=“text_title”》1#液位计： 《/text》
《text class=“text_title”》{{temperature}}《/text》
《text class=“text_title”》 m《/text》
《/div》
《stack class=“chart_region”》
《chart class=“chart_data” type=“line” options=“{{lineops}}” datasets=“{{linedata}}”》《/chart》
《/stack》
《text class=“text_nav”》点击《/text》
《/div》
编写 css：
.container {
flex-direction： column;
justify-content： center;
align-items： center;
}
.title{
width： 100%;
height： 30px;
justify-content： center;
}
.text_title {
font-size： 15px;
}
.chart_region{
height： 90px;
}
.chart_data{
}
.text_nav {
font-size： 15px;
color： #53a7f3;
}
编写 json：
{
“data”： {
“level”： “12”，
“linedata”： ［
{
“strokecolor”： “#7fccde”，
“fillcolor”： “#7fccde”，
“data”： ［0，10，20，12，13，10，40，10，5，9，14，18，20，30，10，20，10，17］，
“gradient”： true
}
］，
“lineops”： {
“xaxis”： {
“min”： 0，
“max”： 15，
“display”： false
}，
“yaxis”： {
“min”： 0，
“max”： 24，
“display”： false
}，
“series”： {
“linestyle”： {
“width”： “1px”，
“smooth”： true
}，
“headpoint”： {
“shape”： “circle”，
“size”： 10，
“strokewidth”： 3，
“fillcolor”： “#ffffff”，
“strokecolor”： “#7fccde”，
“display”： true
}
}
}
}
}
可以先使用预览器看一下界面，或者直接运行。双击打开 index.hml，然后点击右侧的预览器
06
服务卡片基本开发教程
①增加点击跳转页面
在 hml 增加点击事件：
《text class=“text_nav” onclick=“routerevent”》点击《/text》
创建需要跳转的 ability（cardformability）：
编写 index.json 文件，其中 routerevent 就是在 hml 中的 onclick 属性值，action 为 router，abilityname 为需要跳转到的 ability 名字。
编写跳转测试页面：
package com.example.phone.ability;
import ohos.ace.ability.aceability;
import ohos.aafwk.content.intent;
public class cardformability extends aceability {
@override
public void onstart（intent intent） {
setinstancename（“cardform”）;
super.onstart（intent）;
}
@override
public void onstop（） {
super.onstop（）;
}
}
②增加简单的长按编辑页面
创建卡片编辑 ability（levelcardconfigability），点击 file→new→ability→page ability（js）。
在 levelcardconfigability.onstart 中添加 setinstancename（“levelcardconfig”）;
package com.example.phone.ability;
import ohos.ace.ability.aceability;
import ohos.aafwk.content.intent;
public class levelcardconfigability extends aceability {
@override
public void onstart（intent intent） {
setinstancename（“levelcardconfig”）;
super.onstart（intent）;
}
@override
public void onstop（） {
super.onstop（）;
}
}
在 hml 中添加示例代码：
在配置文件中增加属性：formconfigability。
“formconfigability”： “ability://com.example.phone.ability.levelcardconfigability”
污水液位计卡片编辑页面详细开发请看下面。
③数据手动刷新
1. 在卡片编辑小卡片添加手动刷新事件
index.hml：
index.json：
2. 创建 cardformability（如果之前已经创建过了就不用创建了）
在 src/main/config.json 中，如果你的小卡片是写在 mainability 里面的，就不需要创建这个 cardformability，我是为了方便分开来，把卡片配置写在 cardformability 中。
因为是演示代码，所以请求后台服务器获得数据的代码放在 ontriggerformevent 中：
package com.example.phone.ability;
import ohos.aafwk.ability.formbindingdata;
import ohos.aafwk.ability.formexception;
import ohos.ace.ability.aceability;
import ohos.aafwk.content.intent;
import ohos.hiviewdfx.hiloglabel;
import ohos.utils.zson.zsonobject;
public class cardformability extends aceability {
private static final hiloglabel label_log = new hiloglabel（3， 0xd001100， “cardformability”）;
@override
public void onstart（intent intent） {
setinstancename（“cardform”）;
super.onstart（intent）;
}
@override
public void onstop（） {
super.onstop（）;
}
@override
protected void ontriggerformevent（long formid， string message） {
// 解析收到的数据
zsonobject messagejson = zsonobject.stringtozson（message）;
if（messagejson.get（“message”）.equals（“updata”））{ // 更新数据
zsonobject zsonobject = new zsonobject（）;
// 请求后台服务器获得数据
zsonobject.put（“level”， “100”）;
formbindingdata formbindingdata = new formbindingdata（zsonobject）;
try {
// 更新数据
if （！updateform（formid， formbindingdata）） {
}
} catch （formexception e） {
e.printstacktrace（）;
}
}
super.ontriggerformevent（formid， message）;
}
}
这样点击 index.hml 中的标题，就可以更新数据了。
07
服务卡片进阶开发教程
①数据定时刷新
使用鸿蒙自带的定时刷新：数据定时刷新需要在 src/main/config.json 配置文件中配置，是否开启定时刷新和定时刷新的时间：
“updateenabled”： true，
“updateduration”： 1
编写 cardformability，重写 onupdateform 方法：
@overrideprotected void onupdateform（long formid） {
super.onupdateform（formid）;
zsonobject zsonobject = new zsonobject（）;
zsonobject.put（“level”， “1.123”）;
formbindingdata formbindingdata = new formbindingdata（zsonobject）;
// 调用updateform接口去更新对应的卡片，仅更新入参中携带的数据信息，其他信息保持不变
try {
if （！updateform（formid， formbindingdata）） {
// err process
}
} catch （formexception e） {
e.printstacktrace（）;
}
}
自定义刷新策略，请往下看。
②编辑页面开发&编辑更新卡片逻辑开发
页面开发
index.hml：
《div class=“container”》
《text class=“title”》
选择液位计
《/text》
《list class=“todo-wraper”》
《list-item for=“{{todolist}}” class=“todo-item” @click=“choose（{{$item.id}}}）”》
《text class=“todo-title”》{{$item.title}}《/text》
《/list-item》
《/list》
《/div》
index.css：
.container {
flex-direction： column;
justify-content： center;
align-items： center;
}
.title {
font-size： 40px;
color： #000000;
opacity： 0.9;
}
.todo-wraper {
width： 454px;
height： 300px;
margin-top： 20px;
}
.todo-item {
width： 454px;
height： 80px;
flex-direction： column;
}
.todo-title {
width： 454px;
height： 40px;
text-align： center;
}
index.js：
import prompt from ‘@system.prompt’;
const ability_type_external = 0;
const action_sync = 0;
const choose_level = 1001;
// 给cardserviceability发送选择的idexport const cardformability = {
choose： async function（id）{
var action = {};
action.bundlename = ‘com.example.phone’;
action.abilityname = ‘com.example.phone.ability.cardserviceability’;
action.messagecode = choose_level;
action.data = id;
action.abilitytype = ability_type_external;
action.syncoption = action_sync;
var result = await featureability.callability（action）;
var ret = json.parse（result）;
if （ret.code == 0） {
} else {
}
}
}
export default {
data： {
title： “”，
todolist： ［{
title： ‘1#液位计’，
id： 1
}， {
title： ‘2#液位计’，
id： 2
}，{
title： ‘3#液位计’，
id： 3
}］，
}，
oninit（） {
this.title = this.$t（‘strings.world’）;
}，
choose（id） {
cardformability.choose（id）;
}
}
编写 levelcardconfigability 来保存卡片 id：
package com.example.phone.ability;
import ohos.aafwk.ability.abilityslice;
import ohos.aafwk.content.intentparams;
import ohos.ace.ability.aceability;
import ohos.aafwk.content.intent;
public class levelcardconfigability extends aceability {
public static long cardid;
@override
public void onstart（intent intent） {
setinstancename（“levelcard”）;
// 获取卡片id并进行保存
intentparams params = intent.getparams（）;
cardid = （long） params.getparam（abilityslice.param_form_identity_key）;
super.onstart（intent）;
}
@override
public void onstop（） {
super.onstop（）;
}
}
创建 cardserviceability 来获取配置页面的配置信息并且更新卡片：
package com.example.phone.ability;
import ohos.aafwk.ability.ability;
import ohos.aafwk.ability.abilityslice;
import ohos.aafwk.ability.formbindingdata;
import ohos.aafwk.ability.formexception;
import ohos.aafwk.content.intent;
import ohos.aafwk.content.intentparams;
import ohos.app.context;
import ohos.rpc.*;
import ohos.hiviewdfx.hilog;
import ohos.hiviewdfx.hiloglabel;
import ohos.utils.zson.zsonobject;
public class cardserviceability extends ability {
private static final hiloglabel label_log = new hiloglabel（3， 0xd001100， “demo”）;
private cardserviceability.cardserviceremote cardserviceremote;
private static final int choose_level = 1001;
@override
public void onstart（intent intent） {
hilog.error（label_log， “cardserviceability：：onstart”）;
cardserviceremote = new cardserviceremote（）;
super.onstart（intent）;
}
@override
protected iremoteobject onconnect（intent intent） {
super.onconnect（intent）;
return cardserviceremote.asobject（）;
}
@override
public void ondisconnect（intent intent） {
}
class cardserviceremote extends remoteobject implements iremotebroker {
public cardserviceremote（） {
super（“cardserviceremote”）;
}
@override
public boolean onremoterequest（int code， messageparcel data， messageparcel reply， messageoption option） throws remoteexception {
switch （code） {
case choose_level：{
string zsonstr = data.readstring（）;
zsonobject zsonobject = new zsonobject（）;
zsonobject.put（“name”， zsonstr+“#液位计：”）;
formbindingdata formbindingdata = new formbindingdata（zsonobject）;
try {
if （！updateform（levelcardconfigability.cardid， formbindingdata）） {
// err process
}
} catch （formexception e） {
e.printstacktrace（）;
}
break;
}
default： {
reply.writestring（“service not defined”）;
return false;
}
}
return true;
}
@override
public iremoteobject asobject（） {
return this;
}
}
}
③自定义刷新策略
关系型数据库加入包：在对应的 entry 的 build.gradle 中添加包。
dependencies {
implementation filetree（dir： ‘libs’， include： ［‘*.jar’， ‘*.har’］）
testcompile ‘junit4.12’
compile files（orm_annotations_java， orm_annotations_processor_java， javapoet_java）
annotationprocessor files（orm_annotations_java， orm_annotations_processor_java， javapoet_java）
}
在 gradle.properties 中添加 gradle 全局变量：
javapoet_java=c:/users/xx/appdata/local/huawei/sdk/java/2.1.1.21/build-tools/lib/javapoet_java.jar
orm_annotations_processor_java=c:/users/xx/appdata/local/huawei/sdk/java/2.1.1.21/build-tools/lib/orm_annotations_processor_java.jar
orm_annotations_java=c:/users/xx/appdata/local/huawei/sdk/java/2.1.1.21/build-tools/lib/orm_annotations_java.jar
重新构建：创建数据库类和表类。
数据库类：例如，定义了一个数据库类 levelstore.java，数据库包含了“level”表，版本号为“1”。
数据库类的 getversion 方法和 gethelper 方法不需要实现，直接将数据库类设为虚类即可。
package com.example.phone.store;
import com.example.phone.store.from.level;
import ohos.data.orm.ormdatabase;
import ohos.data.orm.annotation.database;
@database（entities = {level.class}， version = 1）public abstract class levelstore extends ormdatabase {
}
创建表类：
package com.example.phone.store.from;
import ohos.data.orm.ormobject;
import ohos.data.orm.annotation.entity;
import ohos.data.orm.annotation.primarykey;
@entity（tablename = “level”）public class level extends ormobject {
public long getid（） {
return id;
}
public void setid（long id） {
this.id = id;
}
public string getname（） {
return name;
}
public level（） {
}
public level（long id， string name） {
this.id = id;
this.name = name;
}
@override
public string tostring（） {
return “levelcard{” +
“id=” + id +
“， name=‘” + name + ’‘’ +
‘}’;
}
public void setname（string name） {
this.name = name;
}
@primarykey（autogenerate = true）
private long id;
private string name;
}
卡片数据将存在数据库并定时刷新：
private static ormcontext ormcontext = null;
private databasehelper helper = new databasehelper（this）;
@override
protected providerforminfo oncreateform（intent intent） {
intentparams params = intent.getparams（）;
if （params == null） {
return null;
}
// 卡片id
long formid = （long） params.getparam（abilityslice.param_form_identity_key）;
// 卡片名称
string formname = （string） params.getparam（abilityslice.param_form_name_key）;
// 卡片规格信息
int specificationid = （int） params.getparam（abilityslice.param_form_dimension_key）;
system.out.println（ “创建卡片： ” + formid + “ ” + formname + “ ” + specificationid）;
if（ormcontext == null）{
createdatabase（getcontext（））;
}
// 存储数据
level newlevel = new level（formid， formname）;
boolean issuccessed = ormcontext.insert（newlevel）;
issuccessed = ormcontext.flush（）;
}
public void createdatabase（context context）{
// 创建数据库
ormcontext = helper.getormcontext（“levelstore”， “levelstore.db”， levelstore.class）;
// 启动定时刷新程序
starttimer（）;
}
private void starttimer（）{
timer timer = new timer（）;
timer.schedule（new timertask（） {
@override
public void run（） {
// 查询数据库获取数据
ormpredicates query = ormcontext.where（level.class）;
list《level》 levelcard = ormcontext.query（query）;
zsonobject zsonobject = new zsonobject（）;
try {
for （level l:levelcard）{
long formid = l.getid（）;
// 设置数据
double randomlevel = math.random（）*10;
decimalformat randomleveldf = new decimalformat（ “0.00”）;
zsonobject.put（“level”， randomleveldf.format（randomlevel））;
formbindingdata formbindingdata = new formbindingdata（zsonobject）;
if （！updateform（formid， formbindingdata）） {
deletelevelcard（formid）;
}
}
} catch （formexception e） {
e.printstacktrace（）;
}
}
}，5，700l）;
}
苹果回应iPhone 13进展：专注硬件、软件和服务结合
典型运算电路分享
新品上线！机智云AI离线语音识别模组，让家电变得更加智能便捷
松下ALPHA阿尔法洗衣机惊艳亮相 将生活美学及健康科技发挥到了极致
AcrelCloud-9000新能源汽车充电桩建设及优化的对策
如果中国空间站用上了鸿蒙系统会怎么样？
运算放大器的类型有哪些?
广和通Cat6模组FM101-CG率先取得FCC认证
高通分享GPU框架特性、移动游戏性能优化，以及3D效果渲染技巧
华为和三思联合设计的LED全彩灯泡发布，这款产品有何特点？
复旦微电超高频芯片可有效提升标签盘点成功率
3G互联网四通道 天语惊爆E339手机参数
基于FPGA的数字核脉冲分析器硬件设计方案
OLED屏和LCD屏对比 OLED屏存在的两大缺陷「瞎眼」和「烧屏」
低压灯带恒流驱动ICSM15101T低成本应用方案
走进人工智能产业基地，了解新兴职业人工智能训练师
孢子捕捉仪的作用及配置的介绍
小鹏汽车智能日:小鹏汽车发布多项智能科技
电流对时间求导出来的是什么
μC/OS的任务调度优化实现方法（编程）
那么假如中国空间站用上了鸿蒙系统会怎么样呢？下面手把手教大家开发中国空间站专属太阳能板鸿蒙小卡片！
01
项目背景
鸿蒙在手机 beta3 中新增了桌面卡片，我也是在第一时间体验了一下新浪新闻鸿蒙版的新闻小卡片，觉得非常有意思。
并且我觉得可以用在物联网项目的污水液位计的液位展示中，可以实现碰一碰获取液位计数据展示在小卡片中。
harmonyos 推出的服务卡片，是 fa（feature ability）的界面展现形式，将 fa 的重要信息或者操作前置到卡片上，以达到服务直达的目的。
02
服务卡片的 ui 设计
①尺寸选择
鸿蒙的服务卡片尺寸分别为：微（1×2）、小（ 2×2 ）、中（ 2×4 ）、大（4×4）4 种尺寸。
污水液位计卡片展示数据比较少，所以我选了 2×2 的小卡片，和 2×4 的小卡片。
2*2 的小卡片主要是展示的是单个液位计的数据，而 2×4 的小卡片展示的是多个液位计的数据的总体展示。
②内容构成
服务卡片由多种设计元素组合而成，以下 7 种常见信息元素可以作为内容选择：图标、数据、文本、按钮、图片、宫格、列表。
污水液位计卡片我觉得主要展示的是当前的液位和液位计的历史曲线，所以我这个污水液位计卡片由数据、文本、曲线图、列表和按钮组成。
③污水液位计卡片原型设计
采用水平垂直居中的布局，因为重要的数据是当前液位，所以当前液位采用 18px 的黑色字体，点击用是 #53a7f3 颜色的 15px 字，曲线使用 #53a7f3 颜色更显科技感。
03
基本概念
①卡片使用方
显示卡片内容的宿主应用，控制卡片在宿主中展示的位置。
②卡片管理服务
用于管理系统中所添加卡片的常驻代理服务，包括卡片对象的管理与使用，以及卡片周期性刷新等。
③卡片提供方
提供卡片显示内容的 harmonyos 应用或原子化服务，控制卡片的显示内容、控件布局以及控件点击事件。
04
运作机制
卡片管理服务包含以下模块：
周期性刷新：在卡片添加后，根据卡片的刷新策略启动定时任务周期性触发卡片的刷新。
卡片缓存管理：在卡片添加到卡片管理服务后，对卡片的视图信息进行缓存，以便下次获取卡片时可以直接返回缓存数据，降低时延。
卡片生命周期管理：对于卡片切换到后台或者被遮挡时，暂停卡片的刷新；以及卡片的升级/卸载场景下对卡片数据的更新和清理。
卡片使用方对象管理：对卡片使用方的 rpc 对象进行管理，用于使用方请求进行校验以及对卡片更新后的回调处理。
通信适配层：负责与卡片使用方和提供方进行 rpc 通信。
卡片提供方包含以下模块：
①卡片服务：由卡片提供方开发者实现，开发者实现 oncreateform、onupdateform 和 ondeleteform 处理创建卡片、更新卡片以及删除卡片等请求，提供相应的卡片服务。
卡片提供方实例管理模块：由卡片提供方开发者实现，负责对卡片管理服务分配的卡片实例进行持久化管理。
②通信适配层：由 harmonyos sdk 提供，负责与卡片管理服务通信，用于将卡片的更新数据主动推送到卡片管理服务。
05
服务卡片开发环境搭建和开发
①开发环境
一台升级了鸿蒙 2.0 的手机/登录华为开发者账号使用远程模拟器。
下载安装 deveco studio 2.1 release，deveco下载安装教程：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/installation_process-0000001071425528
因为本文的重点是卡片，deveco 安装教程和真机调试请看下面我的教程：
https://blog.csdn.net/qq_33259323/article/details/112405157
②新建 harmonyos 手机项目
api 选择 5，show in service senter 打勾
③卡片基础配置
然后打开配置文件 src/main/config.json，配置你所需要的卡片样式，详细配置请看：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-elements-0000000000034463#zh-cn_topic_0000001064016070__table8276925145611
我这边选择的是 2*2 的小卡片，其他的都是默认所以只需要改一下名字和描述，注意文件夹名字要和 name 对应，如果不对应就是白卡片。
④卡片基础界面编写代码
编写 hml，通过 {{}} 绑定 index.json 里面的数据：
《div class=“container”》
《div class=“title”》
《text class=“text_title”》1#液位计： 《/text》
《text class=“text_title”》{{temperature}}《/text》
《text class=“text_title”》 m《/text》
《/div》
《stack class=“chart_region”》
《chart class=“chart_data” type=“line” options=“{{lineops}}” datasets=“{{linedata}}”》《/chart》
《/stack》
《text class=“text_nav”》点击《/text》
《/div》
编写 css：
.container {
flex-direction： column;
justify-content： center;
align-items： center;
}
.title{
width： 100%;
height： 30px;
justify-content： center;
}
.text_title {
font-size： 15px;
}
.chart_region{
height： 90px;
}
.chart_data{
}
.text_nav {
font-size： 15px;
color： #53a7f3;
}
编写 json：
{
“data”： {
“level”： “12”，
“linedata”： ［
{
“strokecolor”： “#7fccde”，
“fillcolor”： “#7fccde”，
“data”： ［0，10，20，12，13，10，40，10，5，9，14，18，20，30，10，20，10，17］，
“gradient”： true
}
］，
“lineops”： {
“xaxis”： {
“min”： 0，
“max”： 15，
“display”： false
}，
“yaxis”： {
“min”： 0，
“max”： 24，
“display”： false
}，
“series”： {
“linestyle”： {
“width”： “1px”，
“smooth”： true
}，
“headpoint”： {
“shape”： “circle”，
“size”： 10，
“strokewidth”： 3，
“fillcolor”： “#ffffff”，
“strokecolor”： “#7fccde”，
“display”： true
}
}
}
}
}
可以先使用预览器看一下界面，或者直接运行。双击打开 index.hml，然后点击右侧的预览器
06
服务卡片基本开发教程
①增加点击跳转页面
在 hml 增加点击事件：
《text class=“text_nav” onclick=“routerevent”》点击《/text》
创建需要跳转的 ability（cardformability）：
编写 index.json 文件，其中 routerevent 就是在 hml 中的 onclick 属性值，action 为 router，abilityname 为需要跳转到的 ability 名字。
编写跳转测试页面：
package com.example.phone.ability;
import ohos.ace.ability.aceability;
import ohos.aafwk.content.intent;
public class cardformability extends aceability {
@override
public void onstart（intent intent） {
setinstancename（“cardform”）;
super.onstart（intent）;
}
@override
public void onstop（） {
super.onstop（）;
}
}
②增加简单的长按编辑页面
创建卡片编辑 ability（levelcardconfigability），点击 file→new→ability→page ability（js）。
在 levelcardconfigability.onstart 中添加 setinstancename（“levelcardconfig”）;
package com.example.phone.ability;
import ohos.ace.ability.aceability;
import ohos.aafwk.content.intent;
public class levelcardconfigability extends aceability {
@override
public void onstart（intent intent） {
setinstancename（“levelcardconfig”）;
super.onstart（intent）;
}
@override
public void onstop（） {
super.onstop（）;
}
}
在 hml 中添加示例代码：
在配置文件中增加属性：formconfigability。
“formconfigability”： “ability://com.example.phone.ability.levelcardconfigability”
污水液位计卡片编辑页面详细开发请看下面。
③数据手动刷新
1. 在卡片编辑小卡片添加手动刷新事件
index.hml：
index.json：
2. 创建 cardformability（如果之前已经创建过了就不用创建了）
在 src/main/config.json 中，如果你的小卡片是写在 mainability 里面的，就不需要创建这个 cardformability，我是为了方便分开来，把卡片配置写在 cardformability 中。
因为是演示代码，所以请求后台服务器获得数据的代码放在 ontriggerformevent 中：
package com.example.phone.ability;
import ohos.aafwk.ability.formbindingdata;
import ohos.aafwk.ability.formexception;
import ohos.ace.ability.aceability;
import ohos.aafwk.content.intent;
import ohos.hiviewdfx.hiloglabel;
import ohos.utils.zson.zsonobject;
public class cardformability extends aceability {
private static final hiloglabel label_log = new hiloglabel（3， 0xd001100， “cardformability”）;
@override
public void onstart（intent intent） {
setinstancename（“cardform”）;
super.onstart（intent）;
}
@override
public void onstop（） {
super.onstop（）;
}
@override
protected void ontriggerformevent（long formid， string message） {
// 解析收到的数据
zsonobject messagejson = zsonobject.stringtozson（message）;
if（messagejson.get（“message”）.equals（“updata”））{ // 更新数据
zsonobject zsonobject = new zsonobject（）;
// 请求后台服务器获得数据
zsonobject.put（“level”， “100”）;
formbindingdata formbindingdata = new formbindingdata（zsonobject）;
try {
// 更新数据
if （！updateform（formid， formbindingdata）） {
}
} catch （formexception e） {
e.printstacktrace（）;
}
}
super.ontriggerformevent（formid， message）;
}
}
这样点击 index.hml 中的标题，就可以更新数据了。
07
服务卡片进阶开发教程
①数据定时刷新
使用鸿蒙自带的定时刷新：数据定时刷新需要在 src/main/config.json 配置文件中配置，是否开启定时刷新和定时刷新的时间：
“updateenabled”： true，
“updateduration”： 1
编写 cardformability，重写 onupdateform 方法：
@overrideprotected void onupdateform（long formid） {
super.onupdateform（formid）;
zsonobject zsonobject = new zsonobject（）;
zsonobject.put（“level”， “1.123”）;
formbindingdata formbindingdata = new formbindingdata（zsonobject）;
// 调用updateform接口去更新对应的卡片，仅更新入参中携带的数据信息，其他信息保持不变
try {
if （！updateform（formid， formbindingdata）） {
// err process
}
} catch （formexception e） {
e.printstacktrace（）;
}
}
自定义刷新策略，请往下看。
②编辑页面开发&编辑更新卡片逻辑开发
页面开发
index.hml：
《div class=“container”》
《text class=“title”》
选择液位计
《/text》
《list class=“todo-wraper”》
《list-item for=“{{todolist}}” class=“todo-item” @click=“choose（{{$item.id}}}）”》
《text class=“todo-title”》{{$item.title}}《/text》
《/list-item》
《/list》
《/div》
index.css：
.container {
flex-direction： column;
justify-content： center;
align-items： center;
}
.title {
font-size： 40px;
color： #000000;
opacity： 0.9;
}
.todo-wraper {
width： 454px;
height： 300px;
margin-top： 20px;
}
.todo-item {
width： 454px;
height： 80px;
flex-direction： column;
}
.todo-title {
width： 454px;
height： 40px;
text-align： center;
}
index.js：
import prompt from ‘@system.prompt’;
const ability_type_external = 0;
const action_sync = 0;
const choose_level = 1001;
// 给cardserviceability发送选择的idexport const cardformability = {
choose： async function（id）{
var action = {};
action.bundlename = ‘com.example.phone’;
action.abilityname = ‘com.example.phone.ability.cardserviceability’;
action.messagecode = choose_level;
action.data = id;
action.abilitytype = ability_type_external;
action.syncoption = action_sync;
var result = await featureability.callability（action）;
var ret = json.parse（result）;
if （ret.code == 0） {
} else {
}
}
}
export default {
data： {
title： “”，
todolist： ［{
title： ‘1#液位计’，
id： 1
}， {
title： ‘2#液位计’，
id： 2
}，{
title： ‘3#液位计’，
id： 3
}］，
}，
oninit（） {
this.title = this.$t（‘strings.world’）;
}，
choose（id） {
cardformability.choose（id）;
}
}
编写 levelcardconfigability 来保存卡片 id：
package com.example.phone.ability;
import ohos.aafwk.ability.abilityslice;
import ohos.aafwk.content.intentparams;
import ohos.ace.ability.aceability;
import ohos.aafwk.content.intent;
public class levelcardconfigability extends aceability {
public static long cardid;
@override
public void onstart（intent intent） {
setinstancename（“levelcard”）;
// 获取卡片id并进行保存
intentparams params = intent.getparams（）;
cardid = （long） params.getparam（abilityslice.param_form_identity_key）;
super.onstart（intent）;
}
@override
public void onstop（） {
super.onstop（）;
}
}
创建 cardserviceability 来获取配置页面的配置信息并且更新卡片：
package com.example.phone.ability;
import ohos.aafwk.ability.ability;
import ohos.aafwk.ability.abilityslice;
import ohos.aafwk.ability.formbindingdata;
import ohos.aafwk.ability.formexception;
import ohos.aafwk.content.intent;
import ohos.aafwk.content.intentparams;
import ohos.app.context;
import ohos.rpc.*;
import ohos.hiviewdfx.hilog;
import ohos.hiviewdfx.hiloglabel;
import ohos.utils.zson.zsonobject;
public class cardserviceability extends ability {
private static final hiloglabel label_log = new hiloglabel（3， 0xd001100， “demo”）;
private cardserviceability.cardserviceremote cardserviceremote;
private static final int choose_level = 1001;
@override
public void onstart（intent intent） {
hilog.error（label_log， “cardserviceability：：onstart”）;
cardserviceremote = new cardserviceremote（）;
super.onstart（intent）;
}
@override
protected iremoteobject onconnect（intent intent） {
super.onconnect（intent）;
return cardserviceremote.asobject（）;
}
@override
public void ondisconnect（intent intent） {
}
class cardserviceremote extends remoteobject implements iremotebroker {
public cardserviceremote（） {
super（“cardserviceremote”）;
}
@override
public boolean onremoterequest（int code， messageparcel data， messageparcel reply， messageoption option） throws remoteexception {
switch （code） {
case choose_level：{
string zsonstr = data.readstring（）;
zsonobject zsonobject = new zsonobject（）;
zsonobject.put（“name”， zsonstr+“#液位计：”）;
formbindingdata formbindingdata = new formbindingdata（zsonobject）;
try {
if （！updateform（levelcardconfigability.cardid， formbindingdata）） {
// err process
}
} catch （formexception e） {
e.printstacktrace（）;
}
break;
}
default： {
reply.writestring（“service not defined”）;
return false;
}
}
return true;
}
@override
public iremoteobject asobject（） {
return this;
}
}
}
③自定义刷新策略
关系型数据库加入包：在对应的 entry 的 build.gradle 中添加包。
dependencies {
implementation filetree（dir： ‘libs’， include： ［‘*.jar’， ‘*.har’］）
testcompile ‘junit4.12’
compile files（orm_annotations_java， orm_annotations_processor_java， javapoet_java）
annotationprocessor files（orm_annotations_java， orm_annotations_processor_java， javapoet_java）
}
在 gradle.properties 中添加 gradle 全局变量：
javapoet_java=c:/users/xx/appdata/local/huawei/sdk/java/2.1.1.21/build-tools/lib/javapoet_java.jar
orm_annotations_processor_java=c:/users/xx/appdata/local/huawei/sdk/java/2.1.1.21/build-tools/lib/orm_annotations_processor_java.jar
orm_annotations_java=c:/users/xx/appdata/local/huawei/sdk/java/2.1.1.21/build-tools/lib/orm_annotations_java.jar
重新构建：创建数据库类和表类。
数据库类：例如，定义了一个数据库类 levelstore.java，数据库包含了“level”表，版本号为“1”。
数据库类的 getversion 方法和 gethelper 方法不需要实现，直接将数据库类设为虚类即可。
package com.example.phone.store;
import com.example.phone.store.from.level;
import ohos.data.orm.ormdatabase;
import ohos.data.orm.annotation.database;
@database（entities = {level.class}， version = 1）public abstract class levelstore extends ormdatabase {
}
创建表类：
package com.example.phone.store.from;
import ohos.data.orm.ormobject;
import ohos.data.orm.annotation.entity;
import ohos.data.orm.annotation.primarykey;
@entity（tablename = “level”）public class level extends ormobject {
public long getid（） {
return id;
}
public void setid（long id） {
this.id = id;
}
public string getname（） {
return name;
}
public level（） {
}
public level（long id， string name） {
this.id = id;
this.name = name;
}
@override
public string tostring（） {
return “levelcard{” +
“id=” + id +
“， name=‘” + name + ’‘’ +
‘}’;
}
public void setname（string name） {
this.name = name;
}
@primarykey（autogenerate = true）
private long id;
private string name;
}
卡片数据将存在数据库并定时刷新：
private static ormcontext ormcontext = null;
private databasehelper helper = new databasehelper（this）;
@override
protected providerforminfo oncreateform（intent intent） {
intentparams params = intent.getparams（）;
if （params == null） {
return null;
}
// 卡片id
long formid = （long） params.getparam（abilityslice.param_form_identity_key）;
// 卡片名称
string formname = （string） params.getparam（abilityslice.param_form_name_key）;
// 卡片规格信息
int specificationid = （int） params.getparam（abilityslice.param_form_dimension_key）;
system.out.println（ “创建卡片： ” + formid + “ ” + formname + “ ” + specificationid）;
if（ormcontext == null）{
createdatabase（getcontext（））;
}
// 存储数据
level newlevel = new level（formid， formname）;
boolean issuccessed = ormcontext.insert（newlevel）;
issuccessed = ormcontext.flush（）;
}
public void createdatabase（context context）{
// 创建数据库
ormcontext = helper.getormcontext（“levelstore”， “levelstore.db”， levelstore.class）;
// 启动定时刷新程序
starttimer（）;
}
private void starttimer（）{
timer timer = new timer（）;
timer.schedule（new timertask（） {
@override
public void run（） {
// 查询数据库获取数据
ormpredicates query = ormcontext.where（level.class）;
list《level》 levelcard = ormcontext.query（query）;
zsonobject zsonobject = new zsonobject（）;
try {
for （level l:levelcard）{
long formid = l.getid（）;
// 设置数据
double randomlevel = math.random（）*10;
decimalformat randomleveldf = new decimalformat（ “0.00”）;
zsonobject.put（“level”， randomleveldf.format（randomlevel））;
formbindingdata formbindingdata = new formbindingdata（zsonobject）;
if （！updateform（formid， formbindingdata）） {
deletelevelcard（formid）;
}
}
} catch （formexception e） {
e.printstacktrace（）;
}
}
}，5，700l）;
}
苹果回应iPhone 13进展：专注硬件、软件和服务结合
典型运算电路分享
新品上线！机智云AI离线语音识别模组，让家电变得更加智能便捷
松下ALPHA阿尔法洗衣机惊艳亮相 将生活美学及健康科技发挥到了极致
AcrelCloud-9000新能源汽车充电桩建设及优化的对策
如果中国空间站用上了鸿蒙系统会怎么样？
运算放大器的类型有哪些?
广和通Cat6模组FM101-CG率先取得FCC认证
高通分享GPU框架特性、移动游戏性能优化，以及3D效果渲染技巧
华为和三思联合设计的LED全彩灯泡发布，这款产品有何特点？
复旦微电超高频芯片可有效提升标签盘点成功率
3G互联网四通道 天语惊爆E339手机参数
基于FPGA的数字核脉冲分析器硬件设计方案
OLED屏和LCD屏对比 OLED屏存在的两大缺陷「瞎眼」和「烧屏」
低压灯带恒流驱动ICSM15101T低成本应用方案
走进人工智能产业基地，了解新兴职业人工智能训练师
孢子捕捉仪的作用及配置的介绍
小鹏汽车智能日:小鹏汽车发布多项智能科技
电流对时间求导出来的是什么
μC/OS的任务调度优化实现方法（编程）