TS語言開發(fā)HarmonyOS應(yīng)用：分布式計(jì)算器開發(fā)教程

最近收到很多小伙伴反饋，想基于擴(kuò)展的TS語言（eTS）進(jìn)行HarmonyOS應(yīng)用開發(fā)，但是不知道代碼該從何處寫起，從0到1的過程讓新手們抓狂。本期我們將帶來“分布式計(jì)算器”的開發(fā)，幫助大家了解聲明式開發(fā)范式的UI描述、組件化機(jī)制、UI狀態(tài)管理、渲染控制語法等核心機(jī)制和功能。下面我們直接進(jìn)入正題。

一、整體介紹

分布式計(jì)算器可以進(jìn)行簡(jiǎn)單的數(shù)值計(jì)算，并支持遠(yuǎn)程拉起另一個(gè)計(jì)算器FA，實(shí)現(xiàn)兩個(gè)FA進(jìn)行協(xié)同計(jì)算。

如圖1所示，分布式計(jì)算器界面主要由“鍵盤”、“顯示”及“標(biāo)題欄”三個(gè)模塊組成。其中，“鍵盤”與“顯示”模塊負(fù)責(zé)響應(yīng)用戶點(diǎn)擊并控制運(yùn)算表達(dá)式及運(yùn)算結(jié)果的顯示，實(shí)現(xiàn)了基礎(chǔ)的計(jì)算功能。“菜單欄”模塊為計(jì)算器頂部的菜單欄，是分布式計(jì)算功能的入口。

那么，如何實(shí)現(xiàn)分布式計(jì)算器各模塊的功能？下面我們將從組件化、聲明式描述和狀態(tài)管理三個(gè)維度來解析分布式計(jì)算器的實(shí)現(xiàn)。

圖1 計(jì)算器界面

1. 組件化

ArkUI開發(fā)框架定義了一些具有特殊含義的

組件管理裝飾器

，如圖2所示：

圖2 組件管理裝飾器

根據(jù)聲明式UI的組件化思想，我們可以將通過組件管理裝飾器將計(jì)算器界面上的各個(gè)模塊組件化為一個(gè)個(gè)獨(dú)立的UI單元。

2. 聲明式描述

通過ArkUI開發(fā)框架提供的一系列基礎(chǔ)組件，如Column、Text、Divider、Button等，以聲明方式進(jìn)行組合和擴(kuò)展來對(duì)各個(gè)模塊進(jìn)行描述，包括參數(shù)構(gòu)造配置、屬性配置、事件配置以及子組件配置等，并通過基礎(chǔ)的數(shù)據(jù)綁定和事件處理機(jī)制實(shí)現(xiàn)各個(gè)模塊的邏輯交互。

3. 狀態(tài)管理

ArkUI開發(fā)框架定義了一些具有特殊含義的狀態(tài)管理裝飾器，如圖3所示:

圖3 狀態(tài)管理裝飾器

通過狀態(tài)管理裝飾器裝飾組件擁有的狀態(tài)屬性，當(dāng)裝飾的變量更改時(shí)，組件會(huì)重新渲染更新UI界面。

以上就是實(shí)現(xiàn)分布式計(jì)算器的核心原理，下面我們將為大家?guī)矸植际接?jì)算器的基礎(chǔ)計(jì)算功能與分布式功能的具體實(shí)現(xiàn)。

二、基礎(chǔ)計(jì)算功能的實(shí)現(xiàn)

上文中提到，分布式計(jì)算器的基礎(chǔ)計(jì)算功能由鍵盤模塊及顯示模塊實(shí)現(xiàn)。

1. 鍵盤模塊

鍵盤模塊響應(yīng)了用戶的點(diǎn)擊，并實(shí)現(xiàn)了計(jì)算器的基本功能。下面我們將介紹鍵盤布局以及鍵盤功能的實(shí)現(xiàn)。

(1) 鍵盤布局

計(jì)算器界面上的鍵盤，其實(shí)是一張張圖片按照 4*5格式排列，如圖4所示：

圖4 鍵盤模塊

首先，我們需要將所有圖片保存至項(xiàng)目的media文件夾下，并初始化為ImageList，代碼如下：

然后，我們需要對(duì)鍵盤模塊進(jìn)行組件化操作。這里我們通過@Component裝飾器讓鍵盤模塊成為一個(gè)獨(dú)立的組件。

最后，使用ArkUI開發(fā)框架提供的內(nèi)置組件及屬性方法進(jìn)行聲明性描述。這里我們使用了Grid組件進(jìn)行布局，并通過ForEach組件來迭代圖片數(shù)組實(shí)現(xiàn)循環(huán)渲染，同時(shí)還為每張圖片添加了ClickButton事件方法。代碼如下：

(2) 功能實(shí)現(xiàn)

按鍵功能包含了“歸零”、“清除”、“計(jì)算”三個(gè)功能。

① 當(dāng)用戶點(diǎn)擊C按鈕后，運(yùn)算表達(dá)式與運(yùn)算結(jié)果“歸零”，代碼如下：

注：計(jì)算功能的實(shí)現(xiàn)依賴于JavaScript的math.js庫(kù)，使用前需通過npm install mathjs--save命令下載并安裝math.js庫(kù)。

2. 顯示模塊

顯示模塊實(shí)現(xiàn)了“

鍵入的運(yùn)算表達(dá)式

”與“

運(yùn)算結(jié)果

”的顯示，本質(zhì)上是Text文本，如圖5所示：

圖5顯示模塊

首先我們通過@Component裝飾器使該模塊具有組件化能力，然后在build方法里描述UI結(jié)構(gòu)，最后使用@Link狀態(tài)裝飾器管理組件內(nèi)部的狀態(tài)數(shù)據(jù)，當(dāng)這些狀態(tài)數(shù)據(jù)被修改時(shí)，將會(huì)調(diào)用所在組件的build方法進(jìn)行UI刷新。代碼如下：

至此，一個(gè)初具計(jì)算功能的計(jì)算器就實(shí)現(xiàn)了。下面我們將實(shí)現(xiàn)計(jì)算器的分布式功能。

三、分布式功能的實(shí)現(xiàn)

計(jì)算器的分布式功能以菜單欄模塊為入口，并基于分布式設(shè)備管理與分布式數(shù)據(jù)管理技術(shù)實(shí)現(xiàn)。

1. 菜單欄模塊

“

菜單欄

”模塊為計(jì)算器頂部菜單欄，是計(jì)算器分布式功能的入口。

圖6菜單欄模塊

如圖6所示，當(dāng)用戶點(diǎn)擊圖標(biāo)

時(shí)，執(zhí)行terminate()方法，退出計(jì)算器應(yīng)用。當(dāng)用戶點(diǎn)擊按鈕時(shí)，執(zhí)行showDialog()方法，界面上彈出的分布式設(shè)備列表彈窗，選擇設(shè)備后將獲取分布式數(shù)據(jù)管理的權(quán)限，最后實(shí)現(xiàn)遠(yuǎn)端設(shè)備的拉起。代碼如下：

2. 分布式設(shè)備管理

在分布式計(jì)算器應(yīng)用中，分布式設(shè)備管理包含了分布式設(shè)備搜索、分布式設(shè)備列表彈窗、遠(yuǎn)端設(shè)備拉起三部分。首先在分布式組網(wǎng)內(nèi)搜索設(shè)備，然后把設(shè)備展示到分布式設(shè)備列表彈窗中，最后根據(jù)用戶的選擇拉起遠(yuǎn)端設(shè)備。

(1) 分布式設(shè)備搜索

通過SUBSCRIBE_ID搜索分布式組網(wǎng)內(nèi)的遠(yuǎn)端設(shè)備，代碼如下：

(2) 分布式設(shè)備列表彈窗

分布式設(shè)備列表彈窗實(shí)現(xiàn)了遠(yuǎn)端設(shè)備的選擇，如圖7所示，用戶可以根據(jù)設(shè)備名稱選擇相應(yīng)的設(shè)備進(jìn)行協(xié)同計(jì)算。

圖7 分布式設(shè)備列表彈窗

這里我們使用@CustomDialog裝飾器來裝飾分布式設(shè)備列表彈窗，代碼如下：

(3) 遠(yuǎn)端設(shè)備拉起

通過startAbility(deviceId)方法拉起遠(yuǎn)端設(shè)備的FA，代碼如下：

3. 分布式數(shù)據(jù)管理

分布式數(shù)據(jù)管理用于實(shí)現(xiàn)協(xié)同計(jì)算時(shí)數(shù)據(jù)在多端設(shè)備之間的相互同步。我們需要?jiǎng)?chuàng)建一個(gè)分布式數(shù)據(jù)庫(kù)來保存協(xié)同計(jì)算時(shí)數(shù)據(jù)，并通過分布式數(shù)據(jù)通信進(jìn)行同步。

(1) 管理分布式數(shù)據(jù)庫(kù)

創(chuàng)建一個(gè)KVManager對(duì)象實(shí)例，用于管理分布式數(shù)據(jù)庫(kù)對(duì)象。代碼如下：

(2) 訂閱分布式數(shù)據(jù)變化

通過訂閱分布式數(shù)據(jù)庫(kù)所有（本地及遠(yuǎn)端）數(shù)據(jù)變化實(shí)現(xiàn)數(shù)據(jù)協(xié)同，代碼如下：

至此，具有分布式能力的計(jì)算器就實(shí)現(xiàn)了。期待廣大開發(fā)者能基于TS擴(kuò)展的聲明式開發(fā)范式開發(fā)出更多有趣的應(yīng)用。

來源：HarmonyOS開發(fā)者