| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> 系统运维 -> 我的HarmonyOS实战 — 一篇文章讲明白什么是鸿蒙2.0服务卡片 -> 正文阅读 |
|
[系统运维]我的HarmonyOS实战 — 一篇文章讲明白什么是鸿蒙2.0服务卡片 |
目录 引言不知道大家有没有这样的经历,上个月的时候,自己的华为P40手机,一大早起来,由安卓系统自动更新成鸿蒙系统,神奇啊!于是赶紧动手试了试,担心自己不会玩鸿蒙系统,从而带来操作上的障碍。果然,华为没有让我失望,一顿操作后,发现鸿蒙系统可以安卓系统完美切换,我的担心是多余的。那么,鸿蒙系统都有哪些安卓系统没有的新特性呢?今天,我们就来聊一聊鸿蒙2.0系统的服务卡片功能。 正文鸿蒙 HarmonyOS 2.0 操作系统有很多新的特性,包括全新智能终端系统、统一控制中心、超级终端、任务流转、鸿蒙智联、文件互通、全新桌面(服务卡片)、性能优化等。本文将围绕全新桌面特性,也就是我们将要介绍的服务卡片功能进行重点介绍。 1. 什么服务卡片?服务卡片其实就是手机应用程序展示页面内容的一种新形式,可以将应用页面的内容前置到卡片上,以达到服务直达、减少体验层级的目的。服务卡片可以摆放到任何位置,用户可以自定义属于自己的桌面风格。 服务卡片功能有三个特征:易用可见、智能可选和多端可变。易用可见,凸显服务信息的内容外露,减少层级跳转导致的用户体验问题。智能可选,全天可变的数据信息,支持自定义类型的服务卡片设计,用户可以自己设置服务卡片的样式。多端可变,适配多端设备的自适应属性,手机、手环、平板都支持服务卡片属性。 ?当我们的手机升级为鸿蒙系统之后,你会发现在桌面应用的图标下方多了一条横线,这样应用都可以在桌面上添加对应的卡片,实现服务卡片的展示。 2. 服务卡片如何设置?鸿蒙2.0操作系统针对部分系统 APP,比如音乐、日历、天气、时钟、运动健康、电子邮件、备忘录、智慧生活、相机、图库、通话以及畅联等,都新增了服务卡片功能。 服务卡片功能的增加,大大的提升了 APP 的使用便利性,很多原本需要打开 APP 才能实现的功能现在可以直接操作服务卡片来实现。设置方式也非常简单,我们只需要在支持服务卡片的 APP 上轻触并上划即可打开。 ??另外,支持服务卡片功能的APP,在使用3次服务卡片之后,图标下面的指示白条就会自动消失,有华为手机的小伙伴可以试一试呦! 3. 如何取消服务卡片?设置服务卡片的时候非常简单,同样,取消设置也非常方便。我们可以双指捏合屏幕,按住卡片,右上角有个移除按钮,点击移除,我们就可以取消服务卡片了。 其实,鸿蒙操作系统的服务卡片功能还是非常不错,不建议取消设置呦,哈哈! 4. 服务卡片的设计探索作为 HarmonyOS 生态设备之间统一交互的载体和语言,服务卡片到哪里,服务就到哪里!服务卡片让应用打破硬件的约束,在所有设备中流转起来,让所有体验所有形式都保持一致。不仅在手机上,在手环、平板上都能有一致的体验。 4.1 创造性的上滑操作上滑,作为创新的操作行为,如何定位这种行为,HarmonyOS开发者们进行了广泛的调研和探索。通过“人因研究”进行分析发现,滑动手势的轨迹有三个关键指标:滑动的角度、滑动的速度(快/慢)、滑动的距离,这三个指标对一次滑动有一个比较完整的定义,能清晰的识别出来这次滑动是怎样的滑动,能够更好的识别用户的手势意图。 大家可以看到,就是在桌面的 APP 上做一个上滑的操作进而展开万能卡片,这个动作看似非常简单,但是这背后的研发过程遇到了很多的问题。最终,通过数据分析,HarmonyOS开发者们找到了用户手指容易触发的区域和困难触发的区域,针对不同的区域,设置不同的触发动作规则,从而让用户在体验服务卡片的时候更加流畅。 4.2 服务卡片的视觉展示通过上面的介绍,我们可以知道,服务卡片的展示是通过新开一个桌面嵌套窗口,其尺寸大小是有一定限制的。那么就产生了一个问题,服务卡片所呈现的视觉效果,就需要考量一下。在视觉设计方面,华为为HarmonyOS特别设计了一套专属的字体 HarmonyOS Sans,这个过程大概花了一年的时间,新字体通俗易懂且特立独行。 在字体设计过程中,设计师们加入了一些华为自己的独特性。比如在笔画上,他们保留了一定的撇捺弯钩的楷书美感,比较明显的是长的曲线、弧线的笔画,进行了曲线优美的调整。 5. 服务卡片提交流程我们开发一个服务卡片并发布到鸿蒙系统上,大概需要五个步骤。这五个步骤分别是设计、开发、配置、测试、发布。其中,开发阶段需要完成设计服务功能和体验、设计交互模型、设计账号绑定、设计内容数据绑定、设计卡片UX,开发阶段需要完成开发实现接口、开发事件推送接口、开发账号绑定、开发内容数据同步、使用IDE开发卡片,配置阶段就是创建并配置快服务,测试阶段是完成模拟测试,发布阶段是完成服务发布工作。 下面是一个内容说明表格:
6. 服务卡片的框架说明6.1 文件组织开发者开发服务卡片,处理卡片的数据处理和显示逻辑时,卡片可以是快应用程序的一部分,也可以单独存在。一个卡片类快服务中可以包含多张卡片,每个卡片仅且只能对应一个页面(page)。卡片的定义通过manifest.json中的widgets字段定义,其中,widgets字段说明如下表所示:
6.2 卡片能力说明一个卡片是一段嵌入在其他应用中可执行、渲染的页面脚本,因此必须能够独立渲染和运行;卡片具有的能力是快应用页面能力的子集,按照负面清单的方式对卡片能力进行约束。 卡片开发整体原则如下: 1)不能使用app.ux中定义的公共能力组件,也不能引用本地图片资源文件,确保卡片编译后生成的的jsbundle文件能够独立渲染。 2)快应用的主体程序不能路由到卡片对应的页面,但在卡片的页面中获取外部输入参数的方式与普通页面保持一致,通过this.paramName即可获取对应的参数值,其中paramName为外部传入的参数名。 3)卡片涉及的权限通过预授权(例如在添加卡片时明确告知用户)的方式授予,卡片运行过程中调用权限相关的接口(例如获取位置信息)时,均会默认授予相关权限而不会动态弹授权框。 4)在某些极端场景下,可能会出现用户使用的卡片是由快应用的版本1提供,但从卡片跳转到快应用的页面路径时快应用的版本已经是版本2,需要确保快应用对老版本(至少兼容一个版本)卡片跳转路径的兼容。 5)卡片不允许使用global对象进行数据的存储,global可以被其他卡片访问到,使用不当会存在安全隐患。 6)卡片在需要跳转到快应用或APK时统一通过router.push进行跳转,不支持的schema:internal://,同时也不支持基于filter模式下的快应用跳转。 7. 服务卡片开发体验7.1 服务卡片开发说明卡片的开发和快应用使用同样的IDE,开发语法也完全一致,只是对卡片中能够使用的资源、控件、接口等有一些限制: 1)资源:不能使用app.ux中定义的公共能力组件,也不能引用本地图片资源文件,确保卡片对应的jsbundle文件能够独立渲染。 2)华为快服务组件库:控件、接口、IDE下载。 3)快应用开发规范。 4)卡片文件的扩展名为ux,文件也是由template模板、style样式和script脚本三个部分组成。 7.2 服务卡片开发步骤步骤一、注册华为开发者账号并启动IDE 可以使用华为手机,点击系统设置,然后进入华为账号,使用扫一扫登陆开发者账号,过程中还需要提供身份信息才能完成注册。? 步骤二、选择服务卡片模版工程并创建 步骤三、填写项目名称,包名,工程路径以及API版本 当然在设置过程中,我们也可以使用默认值,但是不推荐,因为这样操作,当存在多个工程时,很容易混淆。 步骤四、进入工程,查看卡片工程文件组织 具体可以参考如下:
步骤五、选择新建卡片入口 1)在左侧资源管理器中,在src文件夹上右键选择“新建卡片”。 2)在菜单栏“文件”下选择“新建卡片”。 3)点击资源管理器旁边的+图标按钮,选择“新建卡片”。 步骤六、选择卡片类型,填写相关信息 在下面填写卡片名称、ID、路径等参数,选择卡片模版。 点击“高级选项”可选填其中参数。填写完毕后点击“确定”。 步骤七、组件拖拽 1)光标聚焦在需要编辑的文件或标签处。 2)在组件面板中的自动搜索结果中,选择组件并拖拽到需要编辑的位置。 3)出现提示可编辑提示信息时,释放拖拽动作,被拖拽组件即可编辑到当前文件中,模拟预览即时刷新。 步骤八、添加卡片参数 1)点击工具栏的运行下拉选项框的 “配置” 选项,打开配置窗口。 2)点击工程,设置签名;点击卡片,设置宽度及点击卡片名称右侧的进行配置参数。 3)添加卡片参数,完成后保存。 步骤九、编辑卡片参数 1)点击上方菜单栏下拉选项“配置”,进入卡片列表页面。 2)进入卡片列表,选择对应卡片。点击工程,修改签名;点击卡片,修改宽度及参数,点击参数列表中参数右侧进行配置参数。 3)修改卡片参数,完成后保存。 步骤十、卡片实时预览 只有当前打开的工程里有卡片页面时,无设备预览才会启动。 预览区默认使用模拟预览,支持即时预览、切换主题、调节字体和显示大小;可在预览下拉框中切换到其他可用设备预览,及相应的gif动图。?也可以通过连接本地真机,预览区自动切换到真机。 运行实例: 结尾鸿蒙 HarmonyOS 2.0 操作系统的众多新特性中,服务卡片应该是非常亮眼的功能,给用户带来的体验也更加直接,因为服务卡片是直接和用户打交道的。服务卡片功能的增加,大大的提升了 APP 的使用便利性,很多原本需要打开 APP 才能实现的功能现在可以直接操作服务卡片来实现。最后,期待鸿蒙 HarmonyOS 操作系统未来给国人带来更多更好的新功能。 【本文正在参与“有奖征文 | HarmonyOS征文大赛”活动】,本活动页面链接:https://marketing.csdn.net/p/ad3879b53f4b8b31db27382b5fc65bbc |
|
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/25 19:49:43- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |