# 開發(fā)者說 #

【開發(fā)者說】欄目是為HarmonyOS開發(fā)者提供的展示和分享平臺，在這里，大家可以發(fā)表自己的技術(shù)洞察和見解，也可以展示自己的開發(fā)心得和成果。

歡迎大家積極投稿，后臺回復【投稿】，即可獲得投稿渠道。期待你們的分享~

本期我們給大家?guī)淼氖菑V發(fā)證券前端開發(fā)工程師黃欽佳的分享，希望能給你的HarmonyOS開發(fā)之旅帶來啟發(fā)~

10月22日，華為開發(fā)者大會2021（Together）在東莞松山湖開幕。廣發(fā)證券受邀作為技術(shù)論壇嘉賓參與大會，在HarmonyOS應用與服務開發(fā)論壇上，信息技術(shù)部前端開發(fā)工程師黃欽佳分享了廣發(fā)證券原子化服務的應用開發(fā)案例。

一、廣發(fā)證券接入鴻蒙生態(tài)

隨著數(shù)字時代的發(fā)展，泛終端場景下的智能化信息服務將成為大眾日益迫切的需求，在一些特定場景中如跑步、健身等，客戶不便使用手機，無法即時享受投資服務。

針對此類場景，廣發(fā)證券基于HarmonyOS原子化服務輕量化的特點，推出“行情服務”、“開戶服務”、“秒答服務”三個原子化服務，其中“行情服務”覆蓋智能手機、智能手表，“開戶服務”和“秒答服務”僅限于手機端使用。

投資者只需在搭載HarmonyOS 的手機服務中心搜索“廣發(fā)”，將原子化服務卡片添加至“我的服務”或手機桌面，點擊相應卡片便可享受到各類投資服務，包括一鍵查看全球?qū)崟r行情、免安裝完成快速開戶、學習投資理財課程、連接投顧秒答等。用戶點擊“同步自選”，選擇設備，可將自選行情一鍵流轉(zhuǎn)至手表中，實現(xiàn)廣發(fā)行情服務的無縫流轉(zhuǎn)，給用戶流暢完整的沉浸式體驗。

1

豐富的服務卡片

服務卡片是將原子化服務/應用的重要信息以卡片的形式展示在桌面，用戶可在不同終端通過快捷手勢使用卡片，通過輕量交互行為實現(xiàn)服務直達。

對此，廣發(fā)證券開發(fā)了4類服務卡片，涵蓋證券開戶、廣發(fā)秒答、股票行情和投資課程等多種規(guī)格，適用于手表、手機等不同場景，為客戶提供多樣化個性服務。

2

跨終端流轉(zhuǎn)及自適應

HarmonyOS 采用服務流轉(zhuǎn)的分布式操作方式，通過流轉(zhuǎn)能力打破設備界限，實現(xiàn)多設備聯(lián)動，使原子化服務可流轉(zhuǎn)，實現(xiàn)如郵件跨設備編輯、多設備協(xié)同健身、多屏游戲等分布式業(yè)務。

通過嵌入流轉(zhuǎn)功能，可以便捷地將服務流轉(zhuǎn)到不同的 HarmonyOS 設備，包括但不限于手表等設備，也可靈活地切換和管理流轉(zhuǎn)任務，實現(xiàn)多設備的協(xié)同聯(lián)動，為客戶提供全場景多終端的服務體驗。

針對不同終端的特點，廣發(fā)證券提供了不同的展示布局。手機屏大，可展示信息的全貌，手表小屏，則展示精煉行情信息。未來拓展智慧屏等大屏幕，則可利用橫屏同時展示更多內(nèi)容。

同時，用戶也可以通過手機終端授權(quán)進行登錄，同步用戶的自選股列表，實現(xiàn)多終端服務流轉(zhuǎn)，隨時隨地查看股票行情。在手表端點擊同步自選股的時候，手機端可以直接彈出授權(quán)提示框，點擊確認后，即可將手機中自選股票同步流轉(zhuǎn)至手表，整體流程便捷流暢。

豐富的服務卡片和跨終端的互聯(lián)互通，組成一個虛擬的超級終端，將人、設備、場景有機地聯(lián)系在一起，讓客戶能在全場景生活中接觸的多種智能終端實現(xiàn)極簡連接、極簡交互、硬件互助等體驗，用最合適的設備提供最佳的金融服務體驗。

二、HarmonyOS應用與服務開發(fā)技術(shù)分享

以下是從架構(gòu)設計到具體代碼交付過程中的一些思考及實踐。

1

Java or JS ？

首先介紹一下技術(shù)選型?！癏armonyOS的Java UI提供了細粒度的UI編程接口，使應用開發(fā)更加靈活；JS UI提供了相對高層的UI描述，使應用開發(fā)更加簡單。”

在前期調(diào)研的時候，廣發(fā)證券發(fā)現(xiàn)HarmonyOS應用支持JS UI，并且提供了不少的組件和能力，看起來挺像小程序的開發(fā)過程；且支持CSS的使用，在前端開發(fā)的過程中，CSS布局是非常靈活和高效的，也直接支持npm的海量資源，所以廣發(fā)證券決定優(yōu)先用JS。

2

模塊設計

關(guān)于模塊設計的心路歷程，廣發(fā)證券最初的構(gòu)想是將多終端類型共用一個entry，但隨著開發(fā)過程的逐漸深入發(fā)現(xiàn)有些配置必須按照模塊進行，比如說圖標和橫豎屏模式的設置。

于是他們將模塊關(guān)系更改為：一個公共模塊（common）+多個Entry（對應不同終端）+多個FA。絕大部分的業(yè)務邏輯代碼甚至圖片資源，都集中在common中。

在common中，他們通過Java 和 JS 常量共享、圖片同步、npm本地依賴等這幾項設計，實現(xiàn)了JS組件在開發(fā)體驗中比較完整的閉環(huán)。對此，他們還編寫了gradle腳本，實現(xiàn)JS組件圖片從common到引用模塊的自動同步，構(gòu)建的也會自動運行npm install，保證JS組件在目標模塊的更新。

3

一次開發(fā)，多端部署

在前面效果展示時，手機、平板里的服務卡片都有相同的功能，其實它們是同一套代碼（如圖所示），只是在不同終端部署時，根據(jù)設備類型和屏幕狀態(tài)將CSS做出調(diào)整，如手表應用只使用了自選股部分的功能。

一次開發(fā)，多端部署

4

鴻蒙操作系統(tǒng)的能力在實踐中的應用

接下來看看下開發(fā)過程中，廣發(fā)證券是如何使用鴻蒙操作系統(tǒng)的一些能力的。

（1）組件

廣發(fā)證券進行JS開發(fā)時，主要依靠SDK提供的UI組件。除了常用的div， text， image 組件，還有l(wèi)ist、swiper、chart、tabs這些交互較為復雜的組件（如圖9所示）。

在這些組件中，list組件，用來展示自選股列表；swiper 和 tabs 提供了常見的滑動切換效果，用起來很方便，其中swiper用在了自選tab和直播tab的切換，tabs則用于課程內(nèi)容的切換。與tabs關(guān)聯(lián)的tab-bar容納了他們的課程類別列表，tab-content用來展示每個類別下的視頻列表；chart組件展示簡單的行情分時曲線也是沒問題的。

（2）JS 調(diào)用PA

其次，JS UI需要配套的JS API提供一些底層系統(tǒng)能力，如果當前SDK還不支持，就會選擇PA的方式，自行實現(xiàn)并提供給JS。比如說以下幾個場景：

●掃碼功能用的是Java實現(xiàn)，掃碼結(jié)果如何傳遞給JS UI？這就需要一個數(shù)據(jù)中轉(zhuǎn)（代碼如圖10所示）；

● 獲取設備名字和APP安裝狀態(tài)等能力需要通過Java代碼實現(xiàn)來實現(xiàn)；

JS調(diào)用PA

此外，前面提到的Java 和 JS 代碼共享功能在圖11也得到應用：左邊是JS調(diào)用PA，通過ShareConst的使用，從編碼上實現(xiàn)請求碼（code）的統(tǒng)一，避免可能的人為錯誤導致與Java功能對應不一致。

Java和JS代碼共享

（3）跨端協(xié)同

最后分享一下鴻蒙操作系統(tǒng)值得一提的特性——跨端協(xié)同。跨端協(xié)同通過分布式軟總線，把不同類型的設備連接起來，并通過簡單的API進行靈活的相互調(diào)用。

需要先注意它的使用條件：相同華為賬號，動態(tài)申請權(quán)限，指定設備ID，指定跨端Flags。

三、展望

鴻蒙操作系統(tǒng)的超級終端及輕量化原子服務理念將給整個金融生態(tài)帶來巨大的變革。因此，廣發(fā)證券將堅持開放融合的理念，圍繞1+8+N全場景智慧生態(tài)拓展智能服務新觸點，深入探索研究鴻蒙操作系統(tǒng)帶來的全新技術(shù)與服務方式，進一步加快金融產(chǎn)品與鴻蒙操作系統(tǒng)間的融合；從產(chǎn)品、技術(shù)、場景聯(lián)合發(fā)力打造萬物智聯(lián)服務新體驗，構(gòu)建更加開放融合的金融科技新生態(tài)，為每一位客戶提供更便利、更具價值的財富管理服務。

編輯：jq