以下文章来源于广发证券科技金融 ，作者GFS
本期我们给大家带来的是广发证券前端开发工程师黄钦佳的分享，希望能给你的HarmonyOS开发之旅带来启发~
10月22日，华为开发者大会2021（Together）在东莞松山湖开幕。广发证券受邀作为技术论坛嘉宾参与大会，在HarmonyOS应用与服务开发的论坛上，信息技术部前端开发工程师黄钦佳分享了广发证券原子化服务的应用开发案例。 图1 黄钦佳HDC大会分享
一、广发证券接入鸿蒙生态
随着数字时代的发展，泛终端场景下的智能化信息服务将成为大众日益迫切的需求，在一些特定场景中如跑步、健身等，客户不便使用手机，无法即时享受投资服务。针对此类场景，广发证券基于HarmonyOS原子化服务轻量化的特点，推出“行情服务”、“开hu服务”、“秒答服务”三个原子化服务，其中“行情服务”覆盖智能手机、智能手表，“开hu服务”和“秒答服务”仅限于手机端使用。
投资者只需在搭载HarmonyOS 的手机服务中心搜索“广发”，将原子化服务卡片添加至“我的服务”或手机桌面，点击相应卡片便可享受到各类投资服务，包括一键查看全球实时行情、免安装完成快速开hu、学习投资理财课程、连接投顾秒答等。
用户点击“同步自选”，选择设备，可将自选行情一键流转至手表中，实现广发行情服务的无缝流转，给用户流畅完整的沉浸式体验。
1. 丰富的服务卡片
服务卡片是将原子化服务/应用的重要信息以卡片的形式展示在桌面，用户可在不同终端通过快捷手势使用卡片，通过轻量交互行为实现服务直达。
对此，广发证券开发了4类服务卡片，涵盖证券开hu、广发秒答、股票行情和投资课程等多种规格，适用于手表、手机等不同场景，为客户提供多样化个性服务。
图2 服务卡片
2. 跨终端流转及自适应
HarmonyOS 采用服务流转的分布式操作方式，通过流转能力打破设备界限，实现多设备联动，使原子化服务可流转，实现如邮件跨设备编辑、多设备协同健身、多屏游戏等分布式业务。
通过嵌入流转功能，可以便捷地将服务流转到不同的 HarmonyOS 设备，包括但不限于手表等设备，也可灵活地切换和管理流转任务，实现多设备的协同联动，为客户提供全场景多终端的服务体验。
针对不同终端的特点，广发证券提供了不同的展示布局。如图3所示，手机屏大，可展示信息的全貌，手表小屏，则展示精炼行情信息。未来拓展智慧屏等大屏幕，则可利用横屏同时展示更多内容。
图3 跨终端UX自适应
同时，用户也可以通过手机终端授权进行登录，同步用户的自选股列表，实现多终端服务流转，随时随地查看股票行情。如图4所示，在手表端点击同步自选股的时候，手机端可以直接弹出授权提示框，点击确认后，即可将手机中自选股票同步流转至手表，整体流程便捷流畅。
图4 跨端协同
丰富的服务卡片和跨终端的互联互通，组成一个虚拟的超级终端，将人、设备、场景有机地关联在一起，让客户能在全场景生活中接触的多种智能终端实现极简连接、极简交互、硬件互助等体验，用最合适的设备提供最佳的金融服务体验。
二、HarmonyOS应用与服务开发技术分享
以下是从架构设计到具体代码交付过程中的一些思考及实践。
1. Java or JS ？
首先介绍一下技术选型。“HarmonyOS的Java UI提供了细粒度的UI编程接口，使应用开发更加灵活；JS UI提供了相对高层的UI描述，使应用开发更加简单。”
在前期调研的时候，广发证券发现HarmonyOS应用支持JS UI，并且提供了不少的组件和能力，看起来挺像小程序的开发过程；且支持CSS的使用，在前端开发的过程中，CSS布局是非常灵活和高效的，也直接支持npm的海量资源，所以广发证券决定优先用JS。
图5 Java和JS对比
2. 模块设计
关于模块设计的心路历程，如图6所示，广发证券最初的构想是将多终端类型共用一个entry，但随着开发过程的逐渐深入发现有些配置必须按照模块进行，比如说图标和横竖屏模式的设置。
图6 模块设计
于是他们将模块关系更改为：一个公共模块（common）+多个Entry（对应不同终端）+多个FA（如图7所示）。绝大部分的业务逻辑代码甚至图片资源，都集中在common中。
图7 common模块
在common中，他们通过Java 和 JS 常量共享、图片同步、npm本地依赖等这几项设计，实现了JS组件在开发体验中比较完整的闭环。对此，他们还编写了gradle脚本，实现JS组件图片从common到引用模块的自动同步，构建的也会自动运行npm install，保证JS组件在目标模块的更新。
3. 一次开发，多端部署
在前面效果展示时，手机、平板里的服务卡片都有相同的功能，其实它们是同一套代码（如图8所示），只是在不同终端部署时，根据设备类型和屏幕状态将CSS做出调整，如手表应用只使用了自选股部分的功能。
图8 一次开发，多端部署
4. 鸿蒙操作系统的能力在实践中的应用
接下来看看下开发过程中，广发证券是如何使用鸿蒙操作系统的一些能力的。
（1）组件
广发证券进行JS开发时，主要依靠SDK提供的UI组件。除了常用的div, text, image 组件，还有list、swiper、chart、tabs这些交互较为复杂的组件（如图9所示）。
图9 UI组件
在这些组件中，list组件，用来展示自选股列表；swiper 和 tabs 提供了常见的滑动切换效果，用起来很方便，其中swiper用在了自选tab和直播tab的切换，tabs则用于课程内容的切换。
与tabs关联的tab-bar容纳了他们的课程类别列表，tab-content用来展示每个类别下的视频列表；chart组件展示简单的行情分时曲线也是没问题的。
（2）JS 调用PA
其次，JS UI需要配套的JS API提供一些底层系统能力，如果当前SDK还不支持，就会选择PA的方式，自行实现并提供给JS。比如说以下几个场景：
- 扫码功能用的是Java实现，扫码结果如何传递给JS UI？这就需要一个数据中转（代码如图10所示）；
- 获取设备名字和APP安装状态等能力需要通过Java代码实现来实现；
图10 JS调用PA
此外，前面提到的Java 和 JS 代码共享功能在图11也得到应用：左边是JS调用PA，通过ShareConst的使用，从编码上实现请求码（code）的统一，避免可能的人为错误导致与Java功能对应不一致。
图11 Java和JS代码共享
（3）跨端协同
最后分享一下鸿蒙操作系统值得一提的特性——跨端协同。跨端协同通过分布式软总线，把不同类型的设备连接起来，并通过简单的API进行灵活的相互调用。
需要先注意它的使用条件：相同华为账号，动态申请权限，指定设备ID，指定跨端Flags。
三、展望
鸿蒙操作系统的超级终端及轻量化原子服务理念，将给整个金融生态带来巨大的变革。
因此，广发证券将坚持开放融合的理念，围绕1+8+N全场景智慧生态拓展智能服务新触点，深入探索研究鸿蒙操作系统带来的全新技术与服务方式，进一步加快金融产品与鸿蒙操作系统间的融合；从产品、技术、场景联合发力打造万物智联服务新体验，构建更加开放融合的金融科技新生态，为每一位客户提供更便利、更具价值的财富管理服务。
长按上方图片保存到相册
复制链接