优酷鸿蒙开发实践 | 鸿蒙卡片开发_鸿蒙元服务卡片怎么开发前端js

作者：苎麻

“ 如标题所述，我们将持续更新《优酷鸿蒙开发实践》系列文章。本文为系列首篇技术文章，后续文章包括：鸿蒙/Android混合打包技术实践，多屏互动技术实践等，欢迎持续关注【阿里巴巴移动技术】。”

背景

随着华为Harmony OS2.0的发布，各大厂商纷纷抢先与华为展开合作。优酷作为国内领先的长视频在线视听平台，与华为公司长期以来保持紧密的合作，共同为消费者带来优质的影音娱乐体验。因此，优酷技术团队也在第一时间投入对鸿蒙系统以及鸿蒙开发者SDK的研究。优酷技术团队经过多轮的头脑风暴，利用鸿蒙的某些新特性展开鸿蒙应用开发的尝试。

鸿蒙OS支持应用以Ability为单位进行部署。Ability分为两种类型：FA（Feature Ability）和PA（Particle Ability）。FA/PA是应用的基本组成单元，能够实现特定的业务功能。FA有UI界面，而PA无UI界面。

每种类型为开发者提供了不同的模板，以便实现不同的业务功能。

鸿蒙OS的应用软件包以APP Pack（Application Package）形式发布，它是由一个或多个HAP（HarmonyOS Ability Package）以及描述每个HAP属性的pack.info组成。HAP是Ability的部署包，HarmonyOS应用代码围绕Ability组件展开。

鸿蒙工程通过鸿蒙打包工具链打包后，其产物格式即为HAP。

当前，包含有鸿蒙FA/PA的优酷鸿蒙版已经在华为鸿蒙应用市场上架，鸿蒙混合包在应用市场上会显示为“含HarmonyOS服务”。如果App是100% Pure鸿蒙App，其Icon右下角会有HMOS字样。

在手机桌面上的优酷Icon轻轻上滑,会弹出一个鸿蒙卡片，向用户推荐最近的热剧，点击卡片能快速拉起半屏落地页显示更多信息，点击落地页则跳转到优酷客户端的相应落页面。

点击卡片上的图钉按钮，还可以将这个FA卡片固定在桌面上。

这个FA是100%利用鸿蒙API编写的，可以脱离优酷主客独立运行。由于FA卡片有极其严格的体积限制，而使用native的库体积则会过大。最终，我们的Widget 通过一个Webview，加载JS版本的前端网络库去请求优酷内部的网络接口，获取到数据后再使用鸿蒙的Native图形图像API去绘制Native界面。

这个桌面Widget与iOS桌面Widget的区别在于，它不依赖于优酷主客即可运作。即使优酷主客不被启动，卡片的数据也能够更新。

鸿蒙卡片的开发模式

在鸿蒙系统上，触摸优酷主客的应用图标向上滑动，可以唤起优酷的鸿蒙卡片。实现这一点需要卡片的实现代码与优酷主客做混合打包，一起提交到应用市场。

而如果要实现服务中心免安装使用，则需要卡片的独立包总大小要小于10M。这一体积限制使得很多Native 库都无法引入，否则无法将体积控制在红线之内。

最终，优酷鸿蒙卡片的代码放在一个工程中，方便跟优酷主客进行混合打包。同时，优酷鸿蒙卡片的代码仅依赖极少数的二、三方库（例如JSON解析、图片缓存等），以减小体积。

卡片样式

鸿蒙系统提供4中大小不同的卡片，根据占用桌面图标数量的不