以下文章來源於廣發證券科技金融 ，作者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全場景智慧生態拓展智慧服務新觸點，深入探索研究鴻蒙作業系統帶來的全新技術與服務方式，進一步加快金融產品與鴻蒙作業系統間的融合；從產品、技術、場景聯合發力打造萬物智聯服務新體驗，構建更加開放融合的金融科技新生態，為每一位客戶提供更便利、更具價值的財富管理服務。

掃碼新增開發者小助手微信

獲取更多HarmonyOS開發資源和開發者活動資訊