0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

如何在OpenHarmony上开发服务卡片

OpenHarmony技术社区 来源:OpenHarmony技术社区 2023-04-10 11:12 次阅读

本篇文章我们将分享如何在 OpenHarmony 上开发服务卡片。

洞察鸿蒙软件开发

APPGallery Connect 的该软件需要通过在 APPGallery Connect 中创建项目后添加应用从而获取 Json 文件。

然后把此文件放在码云中下载的 FA 源码中:

DistSchedule
etconfigsrcmain
esources

按照文档开发 UI 界面,点击构建的 Generate Key and CSR 创建用户名与密钥进行签名。

①创建项目

在华为开发官网的“我的项目”中,选择 HarmonyOS 平台等完成填写:

https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/

②用户操作界面

在 slice 目录下新建 xxxSlice.java文件,通过 addActionRoute 方法为此 AbilitySlice 配置一条路由规则,并且在在应用配置文件(config.json)中注册。

在 resources/base/layout 下新建对应 xml 布局文件,在上述两个文件中编写相应的 UI。

③软件数据处理

从 slice 获取 deviceId:在 onStart 中通过调用 DeviceID 等,获取设备的名称等方便该软件识别设备。

从 slice 页面获取状态:开关锁可以直接调用 intent.getBooleanParam 来确定是进行开关锁还是对门锁的日程进行编排。

④配置设备端信息

在 entrysrcmainjsdefaultpagesindex 中为主要修改的内容:

f30d4f18-d6a4-11ed-bfe3-dac502259ad0.png

上图为项目信息,另外还要看一下手机应用侧的 netconfig 配网模块。

主要目录框架分析

开发文件目录:

`--src
`--main
|--config.json//应用配置文件
|--js
|`--default
||--app.js//应用程序入口
||--common//公共资源
|||--ic_back.png
|||--icon_faqi.png
|||--icon_faxian.png
|||--icon_jia_sel.png
|||--icon_jian_sel.png
|||--icon_jingbao.png
|||--icon_liuzhuan.png
|||--icon_shuru.png
|||--icon_wifi_off.png
|||--icon_wifi_on.png
||`--icon_yunxu.png
||--i18n//多语言文件
|||--en-US.json
||`--zh-CN.json
|`--pages//存放所有组件页面
||--dm//设备认证界面
|||--dm.css
|||--dm.hml
||`--dm.js
||--index//首页界面
|||--index.css
|||--index.hml
||`--index.js
|`--app.js//生命周期管理
`--resources
|--base
||--element
||`--string.json
|`--media
||--icon.png
|`--icon_small.png
`--config.json

设置事件(js)

智能门锁为案例:

exportdefault{
data:{
isPowerOn:false,//属性001
isWifi:true,//属性002
},
onInit(){
setTimeout(()=>{
setInterval(()=>this.GetKey(),500)//事件
},6000);
},
clickPower(){
this.isPowerOn=!this.isPowerOn
if(this.isPowerOn){
this.SetKey('key_f1','on');//状态001
}else{
this.SetKey('key_f1','off');//状态002
}
}

上面代码为事件设置,以智能门锁为例。或者是用另一种方法:把 Fa 文档中和产品对口的 smart 源码拷贝到 team_X 中。

华为云注册软件产品

软件与嵌入式设备连接原理:

f32f83e4-d6a4-11ed-bfe3-dac502259ad0.png

根据华为云要求注册嵌入式设备与软件,即可云端提供服务:

f347d08e-d6a4-11ed-bfe3-dac502259ad0.jpg

上图表面设备已经在线

服务卡片开发

①用户操作界面

通过桌面可以在卡片中点击相关服务,卡片中可以呈现一个或多个服务。

②卡片工作原理

通过嵌入到 UI 界面拉起那款应用的服务(可以通过缓存实现快速打开)从而起到交互功能的原子化服务。

f35250cc-d6a4-11ed-bfe3-dac502259ad0.png

③生命周期管理

对设备使用方的 RPC 对象进行管理,请求进行校验以及对更新后的进行回调处理。

④卡片尺寸支持

目前官方有四种尺寸,可以在 new 中自己选中喜欢的尺寸。

f365e3da-d6a4-11ed-bfe3-dac502259ad0.png

这里以经典开发的音乐卡片举例:

f388fffa-d6a4-11ed-bfe3-dac502259ad0.png

创建一个卡片(这里大小是固定的),然后点击 finish:

f3b6cff2-d6a4-11ed-bfe3-dac502259ad0.png 然后就可以看到在原有的 subject 中生成了 config.json 文件。由上图可得 js 默认配置了卡片大小等信息,froms 下的是 ability 中生命周期管理的核心部分(用于回调),会在主函数中实现调用。

有是自动生成的,要在这里把 false 改成 true。

f3fe4742-d6a4-11ed-bfe3-dac502259ad0.png

上图为 index 下的文件包,可以看到开发者要用的 index 下的三个文件包,在构建好后需要点击 Deveco Studo 左下角后再点击 OhosBuild Varinants 对文件包进行签名。

f447b292-d6a4-11ed-bfe3-dac502259ad0.png

完成签名之后在在线调试的实验机器上运行后就会产生一张纯的 FA 卡片了,此时环境已经搭建完毕。

f454a092-d6a4-11ed-bfe3-dac502259ad0.png

在卡片制作中可以自定义卡片上音乐播放的图片等,从 media 直接写到 hml 中即可。 音乐本地调取:src 在 main 下的 resources 中建 rawfile 用于存放音频,在编译时候打包进 hap 中写到鸿蒙设备中即可 get 到。 下面以开发 1*2 的 mini 卡片为例,在本地预置了音频文件后我们目光转向卡片,继续把播放按钮与卡片解耦开,通过 hml 塞入显示信息等。 isWidget 当 true 时,card_containerdiv 就会变为 div 布局。Ispause 为 true 时,按钮呈现播放;为 false 时,显示暂停按钮。 在 css 文件采用原子布局的 display-index。display-index 的值越大,则越优先显示。 在 main 中的 onCreateForm 里 isMiniWidget 的 data 设置为 true。 在.json 和 main 中相对应的地方添加点击事件,到此为止就可以通过点击卡片就可以得到播放与暂停的互动了。 做完显示界面以后,接入界面与预先本地的音频,然后封装音乐播放即可。

下面是生命周期的部分布置和实现:

f465b724-d6a4-11ed-bfe3-dac502259ad0.png

更新(onUpdateForm),卡片更新与持久化储存卡片,定时更新与请求更新时进行调用。

f48fb0a6-d6a4-11ed-bfe3-dac502259ad0.png

删除(onDeleteForm),用于删除卡片时调用。

f4b2b89e-d6a4-11ed-bfe3-dac502259ad0.png 事件消息(message),formid&massage,接收通知。 一张 Fa 卡片创建时需要满足的基本功能:布局加载–请求数据(ohos&intent)–产生卡片(long&生成 ID 用于调用){通过枚举值得到}。按照以上步骤一个音乐服务卡片就完成了。  

签名与编译

f4dddc7c-d6a4-11ed-bfe3-dac502259ad0.png

最后开发完在开发完成之后我们要对文件进行签名即可:

Alias:密钥的名称信息,用于签名的配置。

Password:密钥的密码(系统自动填入)

Certificate:证书的具体信息、名称、组织与国家代码等等

f4dddc7c-d6a4-11ed-bfe3-dac502259ad0.png

上图为新建签名密钥 我们点击 new 然后新建密钥包,并且输入密码等信息进行生成。 注意:这里的密码必须由大小写和数字与符号组成以保证安全性。

另外一种签名方式:

f52c021c-d6a4-11ed-bfe3-dac502259ad0.png

应用调试助手:通过华为应用市场下载应用调试助手,点击并申请 Product ID 并选择。

再根据 APPGallery Connect 的指示完成页面填写后手机贴近 NFC 扩展板或 NFC 射频贴纸点击<置入缓存区即可>。

f53c29d0-d6a4-11ed-bfe3-dac502259ad0.png

上图要注意申请 Product ID 开发完成之后点击选中华为实验室远程真机可以在线调试进行软件开发实验,如需手机实验请点击手机版本号七次进入开发者模式(会有您正处于开发者模式的提醒)。 然后我们找到设置的系统与更新的开发者人员调试选项打开 USB 调试即可,当手机与电脑通过数据线连接时会出现弹窗,选择连接方式为传输文件。 以上就是基础 HarmonyOS 的基础教程内容,感谢各位的支持。

审核编辑:汤梓红
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 华为
    +关注

    关注

    215

    文章

    33619

    浏览量

    247150
  • ui
    ui
    +关注

    关注

    0

    文章

    198

    浏览量

    21184
  • 鸿蒙
    +关注

    关注

    55

    文章

    1629

    浏览量

    42119
  • HarmonyOS
    +关注

    关注

    79

    文章

    1827

    浏览量

    29261
  • OpenHarmony
    +关注

    关注

    23

    文章

    3284

    浏览量

    15159

原文标题:OpenHarmony上开发“服务卡片”

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:OpenHarmony技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    鸿蒙OS开发实例:【手撸服务卡片

    服务卡片指导文档位于“**开发/应用模型/Stage模型开发指导/Stage模型应用组件**”路径下,说明其极其重要。本篇文章将分享实现服务
    的头像 发表于 03-28 22:11 724次阅读
    鸿蒙OS<b class='flag-5'>开发</b>实例:【手撸<b class='flag-5'>服务</b><b class='flag-5'>卡片</b>】

    OpenHarmony开发案例:【计步器卡片

    基于Stage模型实现带有卡片的计步应用,用于介绍卡片开发及生命周期实现。
    的头像 发表于 04-15 09:22 374次阅读
    <b class='flag-5'>OpenHarmony</b><b class='flag-5'>开发</b>案例:【计步器<b class='flag-5'>卡片</b>】

    OpenHarmony开发案例:【电影卡片

    基于元服务卡片的能力,实现带有卡片的电影应用,介绍卡片开发过程和生命周期实现。
    的头像 发表于 04-15 17:53 936次阅读
    <b class='flag-5'>OpenHarmony</b><b class='flag-5'>开发</b>案例:【电影<b class='flag-5'>卡片</b>】

    HarmonyOS服务卡片快速开发

    HarmonyOS服务卡片快速开发
    发表于 06-19 13:52

    一文看懂HarmonyOS服务卡片运行原理和开发方法

    “Basic”和“Advance”两类,开发者可以根据业务需要选择不同的模板。图29 DevEco Studio中的服务卡片模板图Grid Pattern(宫格卡片模板)宫格
    发表于 07-27 17:21

    完整服务卡片项目开发,为Bilibili添加服务卡片

    已经被鸿蒙刷屏了。从安卓到鸿蒙,最直观的变化应该就是服务卡片了。我也是在学习鸿蒙的同时,实际体验一下服务卡片开发。给大家看看最终的效果。接
    发表于 09-03 20:49

    HarmonyOS原子化服务卡片开发-主要过程梳理

    方式,定时更新、手动更新。服务内容页面的数据如何进行更新。6.功能实现包括页面加载、卡片编辑、跳转事件、消息通知、下滑事件、留言评论、分布式体验、流转、分享等。7.数据库的保存与读取管理后台的开发,连接数据库,使用第三方组件等。
    发表于 09-08 13:40

    HarmonyOS卡片开发--服务卡片概述

    卡片提供方包含以下模块:卡片服务:由卡片提供方开发者实现,开发者实现onCreateForm
    发表于 09-22 14:10

    HarmonyOS与OpenHarmony应用开发差异

    OpenHarmony相比HarmonyOS不支持的功能说明特性名称HarmonyOS版本OpenHarmony版本创建Module√X服务卡片√X自动化签名√X远程模拟器√X本地模拟
    发表于 10-22 10:35

    HarmonyOS之服务卡片(Java)开发步骤

    服务卡片的组件单独添加点击事件(Java)Java卡片通过componentProvider.setIntentAgent方法设置点击事件。封装IntentAgentInfo时,第一个参数“200
    发表于 07-26 16:17

    HarmonyOS/OpenHarmony应用开发-FA卡片开发体验

    在宿主中展示的位置。卡片管理服务: 用于管理系统中所添加卡片的常驻代理服务,包括卡片对象的管理与使用,以及
    发表于 12-06 14:48

    HarmonyOS/OpenHarmony服务开发-配置卡片的配置文件

    ;supportDimensions\": [ \"2*2\" ] } ] } *附件:HarmonyOSOpenHarmony服务开发-配置卡片的配置文件.docx
    发表于 08-01 11:45

    B站添加鸿蒙服务卡片教程

    ‍‍‍‍‍‍‍‍ 6 月 2 日鸿蒙发布,今年的六月已经被鸿蒙刷屏了。从安卓到鸿蒙,最直观的变化应该就是服务卡片了。我也是在学习鸿蒙的同时,实际体验一下服务卡片
    的头像 发表于 08-12 10:07 2362次阅读
    B站添加鸿蒙<b class='flag-5'>服务</b><b class='flag-5'>卡片</b>教程

    用Java开发HarmonyOS服务卡片

    卡片服务:由卡片提供方开发者实现,开发者实现 onCreateForm、onUpdateForm 和 onDeleteForm 处理创建
    的头像 发表于 04-26 11:04 1243次阅读

    OpenHarmony上使用服务卡片

    服务卡片是一种界面展示形式,将服务的重要信息以卡片的形式展示给用户,用户可通过轻量交互行为实现服务直达、减少层级跳转的目的。
    的头像 发表于 06-25 15:12 338次阅读
    <b class='flag-5'>OpenHarmony</b>上使用<b class='flag-5'>服务</b><b class='flag-5'>卡片</b>