以下文章来源于广发证券科技金融，作者 GFS
本期咱们给大家带来的是广发证券前端开发工程师黄钦佳的分享，心愿能给你的 HarmonyOS 开发之旅带来启发~
10 月 22 日，华为开发者大会 2021（Together）在东莞松山湖揭幕。广发证券受邀作为技术论坛嘉宾参加大会，在 HarmonyOS 利用与服务开发的论坛上，信息技术部前端开发工程师黄钦佳分享了广发证券原子化服务的利用开发案例。
图 1 黄钦佳 HDC 大会分享
一、广发证券接入鸿蒙生态
随着数字时代的倒退，泛终端场景下的智能化信息服务将成为公众日益迫切的需要，在一些特定场景中如跑步、健身等，客户不便应用手机，无奈即时享受投资服务。
针对此类场景，广发证券基于 HarmonyOS 原子化服务轻量化的特点，推出“行情服务”、“开户服务”、“秒答服务”三个原子化服务，其中“行情服务”笼罩智能手机、智能手表，“开户服务”和“秒答服务”仅限于手机端应用。
投资者只需在搭载 HarmonyOS 的手机服务中心搜寻“广发”，将原子化服务卡片增加至“我的服务”或手机桌面，点击相应卡片便可享受到各类投资服务，包含一键查看寰球实时行情、免装置实现疾速开户、学习投资理财课程、连贯投顾秒答等。
用户点击“同步自选”，抉择设施，可将自选行情一键流转至手表中，实现广发行情服务的无缝流转，给用户晦涩残缺的沉迷式体验。
- 丰盛的服务卡片
服务卡片是将原子化服务 / 利用的重要信息以卡片的模式展现在桌面，用户可在不同终端通过快捷手势应用卡片，通过轻量交互行为实现服务中转。
对此，广发证券开发了 4 类服务卡片，涵盖证券开户、广发秒答、股票行情和投资课程等多种规格，实用于手表、手机等不同场景，为客户提供多样化共性服务。
图 2 服务卡片
- 跨终端流转及自适应
HarmonyOS 采纳服务流转的分布式操作形式，通过流转能力突破设施界线，实现多设施联动，使原子化服务可流转，实现如邮件跨设施编辑、多设施协同健身、多屏游戏等分布式业务。
通过嵌入流转性能，能够便捷地将服务流转到不同的 HarmonyOS 设施，包含但不限于手表等设施，也可灵便地切换和治理流转工作，实现多设施的协同联动，为客户提供全场景多终端的服务体验。
针对不同终端的特点，广发证券提供了不同的展现布局。如图 3 所示，手机屏大，可展现信息的全貌，手表小屏，则展现精炼行情信息。将来拓展智慧屏等大屏幕，则可利用横屏同时展现更多内容。
图 3 跨终端 UX 自适应
同时，用户也能够通过手机终端受权进行登录，同步用户的自选股列表，实现多终端服务流转，随时随地查看股票行情。如图 4 所示，在手表端点击同步自选股的时候，手机端能够间接弹出受权提示框，点击确认后，即可将手机中自选股票同步流转至手表，整体流程便捷晦涩。
图 4 跨端协同
丰盛的服务卡片和跨终端的互联互通，组成一个虚构的超级终端，将人、设施、场景有机地关联在一起，让客户能在全场景生存中接触的多种智能终端实现极简连贯、极简交互、硬件互助等体验，用最合适的设施提供最佳的金融服务体验。
二、HarmonyOS 利用与服务开发技术分享
以下是从架构设计到具体代码交付过程中的一些思考及实际。
- Java or JS？
首先介绍一下技术选型。“HarmonyOS 的 Java UI 提供了细粒度的 UI 编程接口，使利用开发更加灵便；JS UI 提供了绝对高层的 UI 形容，使利用开发更加简略。”
在后期调研的时候，广发证券发现 HarmonyOS 利用反对 JS UI，并且提供了不少的组件和能力，看起来挺像小程序的开发过程；且反对 CSS 的应用，在前端开发的过程中，CSS 布局是非常灵活和高效的，也间接反对 npm 的海量资源，所以广发证券决定优先用 JS。
图 5 Java 和 JS 比照
- 模块设计
对于模块设计的心路历程，如图 6 所示，广发证券最后的构想是将多终端类型共用一个 entry，但随着开发过程的逐步深刻发现有些配置必须依照模块进行，比如说图标和横竖屏模式的设置。
图 6 模块设计
于是他们将模块关系更改为：一个公共模块（common）+ 多个 Entry（对应不同终端）+ 多个 FA（如图 7 所示）。绝大部分的业务逻辑代码甚至图片资源，都集中在 common 中。
图 7 common 模块
在 common 中，他们通过 Java 和 JS 常量共享、图片同步、npm 本地依赖等这几项设计，实现了 JS 组件在开发体验中比拟残缺的闭环。对此，他们还编写了 gradle 脚本，实现 JS 组件图片从 common 到援用模块的主动同步，构建的也会主动运行 npm install，保障 JS 组件在指标模块的更新。
- 一次开发，多端部署
在后面成果展现时，手机、平板里的服务卡片都有雷同的性能，其实它们是同一套代码（如图 8 所示），只是在不同终端部署时，依据设施类型和屏幕状态将 CSS 做出调整，如手表利用只应用了自选股局部的性能。
图 8 一次开发，多端部署
- 鸿蒙操作系统的能力在实践中的利用
接下来看看下开发过程中，广发证券是如何应用鸿蒙操作系统的一些能力的。
（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 全场景智慧生态拓展智能服务新触点，深刻摸索钻研鸿蒙操作系统带来的全新技术与服务形式，进一步放慢金融产品与鸿蒙操作系统间的交融；从产品、技术、场景联结发力打造万物智联服务新体验，构建更加凋谢交融的金融科技新生态，为每一位客户提供更便当、更具价值的财产治理服务。