IT之家 6 月 25 日消息 6 月 25 日，華為 DevEco Studio 發(fā)布新版本 2.2 Beta 1，推出低代碼開發(fā)和遠(yuǎn)程真機(jī)兩大新特性。下面是更新內(nèi)容介紹。
亮點(diǎn)一：面向 JS 框架的低代碼開發(fā)
低代碼開發(fā)是 DevEco Studio 2.2 Beta1 新增的一種面向 JS 框架的可視化界面開發(fā)方式，遵循 HarmonyOS JS 開發(fā)規(guī)范，具有豐富的頁(yè)面編輯功能。開發(fā)者可通過組件的拖拽和復(fù)制等方式，在低代碼頁(yè)面完成界面開發(fā)及 JS 邏輯關(guān)聯(lián)，大大降低開發(fā)者上手成本，提高用戶界面開發(fā)效率。
官網(wǎng)開發(fā)規(guī)范：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-js-overview-0000000000500376
開發(fā)者可在工程中”js>pages 目錄下，單擊鼠標(biāo)右鍵，選擇 New > JS Visual”新建低代碼頁(yè)面。
創(chuàng)建低代碼頁(yè)面時(shí)（如圖 1 所示），系統(tǒng)會(huì)自動(dòng)生成對(duì)應(yīng)的 visual 文件和 js 文件，兩種文件的目錄結(jié)構(gòu)一致。其中，visual 文件存儲(chǔ)低代碼頁(yè)面的數(shù)據(jù)模型，雙擊該文件即可打開低代碼頁(yè)面，進(jìn)行可視化開發(fā)。而 js 文件描述了低代碼頁(yè)面的行為邏輯，定義了頁(yè)面里所用到的所有的邏輯關(guān)系，比如數(shù)據(jù)、事件等。
注意：使用低代碼頁(yè)面開發(fā)時(shí)，其關(guān)聯(lián) js 文件的同級(jí)目錄，即 js>default>pages>page 目錄下不能包含 hml 或 css 文件，否則編譯報(bào)錯(cuò)。
圖 1 創(chuàng)建低代碼頁(yè)面演示圖
低代碼頁(yè)面創(chuàng)建成功后的界面如圖 2 所示，由組件欄、組件樹、畫布、功能面板以及屬性樣式欄五部分組成。開發(fā)者在低代碼頁(yè)面進(jìn)行的相關(guān)操作，均會(huì)保存到 visual 文件中。
圖 2 低代碼頁(yè)面
1. 低代碼頁(yè)面組成：
① 組件欄（UI Control）
位于低代碼頁(yè)面的左上方，選中組件欄中的組件，將其拖至中間畫布，即可實(shí)現(xiàn)一個(gè)組件的添加。
② 組件樹（Component Tree）
位于低代碼頁(yè)面的左下方，開發(fā)者可通過組件樹，直觀地看到組件的層級(jí)結(jié)構(gòu)、摘要信息以及錯(cuò)誤提示。開發(fā)者選中組件樹中的組件，即實(shí)現(xiàn)畫布內(nèi)組件的快速定位。
搜索框：在搜索框內(nèi)輸入控件類型，如“Image”，組件樹內(nèi)顯示所有“Image”類型的組件。
下拉框：點(diǎn)擊嵌套組件的下拉框，可在組件樹中顯示/隱藏嵌套組件內(nèi)的子組件。
眼睛圖標(biāo)：點(diǎn)擊非嵌套組件的眼睛圖標(biāo)，該組件將在畫布中被隱藏，眼睛圖標(biāo)變?yōu)?img src="http://img.ithome.com/images/v2/t.png" w="15" h="12" class="lazy" title="鴻蒙 HarmonyOS 開發(fā)必備工具，華為 DevEco Studio 2.2 Beta 1 發(fā)布：支持低代碼開發(fā)、遠(yuǎn)程真機(jī)" data-original="https://img.ithome.com/newsuploadfiles/2021/6/acc41ad5-913a-48fd-989e-d62ee85d931c.png" width="15" height="12">；再次點(diǎn)擊圖標(biāo)，該組件將在畫布中重現(xiàn)，眼睛圖標(biāo)變回；點(diǎn)擊嵌套組件的眼睛圖標(biāo)，該組件和其子組件將在畫布中同時(shí)被隱藏/顯示。
摘要信息：對(duì)于 Div、Image 等組件，摘要信息欄顯示組件的 ID；對(duì)于 Text、Button、Input、Span 等可以設(shè)置文本內(nèi)容的組件，摘要信息欄顯示對(duì)應(yīng)的文本內(nèi)容。
錯(cuò)誤提示：組件有錯(cuò)誤時(shí)，組件右側(cè)出現(xiàn)小紅點(diǎn)，鼠標(biāo)點(diǎn)擊小紅點(diǎn)，出現(xiàn)所有組件的詳細(xì)錯(cuò)誤信息。錯(cuò)誤信息的范圍包括：數(shù)據(jù)綁定和方法綁定錯(cuò)誤。
③ 畫布（Canvas）
位于低代碼頁(yè)面的中間，開發(fā)者可在此區(qū)域?qū)M件進(jìn)行可視化編輯，如：拖拽、復(fù)制、剪切、粘貼等，從而實(shí)現(xiàn)快速編輯 UI 界面的需求。
④ 功能面板（Panel）
畫布上方為功能面板區(qū)，包含畫布放大/縮小按鈕、撤銷/重做按鈕、顯示/隱藏組件虛擬邊框按鈕以及代碼轉(zhuǎn)換按鈕。
⑤ 屬性樣式欄（Attributes & Styles）
位于低代碼頁(yè)面的右側(cè)，開發(fā)者選中畫布中的組件后，可在屬性樣式欄修改組件的屬性、樣式和綁定事件。在設(shè)置屬性 (Properties) 和綁定事件 (Events) 時(shí)，開發(fā)者可在低代碼頁(yè)面內(nèi)直接關(guān)聯(lián) js 文件中的數(shù)據(jù)與方法，由此定義低代碼頁(yè)面的業(yè)務(wù)邏輯。
Properties：用于設(shè)置組件基本標(biāo)識(shí)和外觀顯示特征的屬性。如組件的 ID、If 等屬性。
General：用于設(shè)置 Width、Height、Background、Position、Display 等常規(guī)樣式。
Feature：用于設(shè)置組件的特有樣式，如描述 text 文字大小的 FontSize 樣式等。
Flex：用于設(shè)置 Flex 布局相關(guān)樣式。
Events：為組件綁定相關(guān)事件，并設(shè)置綁定事件的回調(diào)函數(shù)。
Dimension：用于設(shè)置 Padding、Border、Margin 等與盒式模型相關(guān)的樣式。
Grid：用于設(shè)置 Grid 網(wǎng)格布局相關(guān)樣式，該圖標(biāo)只有 Div 組件的 Display 被設(shè)置為 Grid 時(shí)才會(huì)出現(xiàn)。
2. 低代碼開發(fā)還支持實(shí)時(shí)預(yù)覽和多語(yǔ)言等功能：
① 支持對(duì) visual 文件的實(shí)時(shí)預(yù)覽
當(dāng)開發(fā)者通過低代碼頁(yè)面修改頁(yè)面布局時(shí)，預(yù)覽器可實(shí)時(shí)呈現(xiàn)修改后的設(shè)計(jì)效果，提升界面開發(fā)設(shè)計(jì)效率（如圖 3 所示）。
圖 3 實(shí)時(shí)預(yù)覽效果圖
② 支持多語(yǔ)言能力
為滿足開發(fā)者多語(yǔ)言版本的開發(fā)需求，低代碼頁(yè)面推出了多語(yǔ)言能力，開發(fā)者可通過定義資源文件和引用資源 2 個(gè)步驟，使用多語(yǔ)言能力（如圖 4 所示）。第一步：在指定的 i18n 文件夾內(nèi)放置語(yǔ)言資源文件。第二步：在低代碼頁(yè)面的屬性樣式欄中，使用 $t 方法引用資源，系統(tǒng)將根據(jù)當(dāng)前語(yǔ)言環(huán)境和指定的資源路徑，顯示對(duì)應(yīng)語(yǔ)言的資源文件中的內(nèi)容。滿足開發(fā)者多語(yǔ)言版本的開發(fā)需求。
圖 4 多語(yǔ)言功能設(shè)置圖
亮點(diǎn)二：新增遠(yuǎn)程真機(jī)
為了解決開發(fā)者獲取 HarmonyOS 真機(jī)設(shè)備資源困難的問題，DevEco Studio 2.2 Beta1 推出了遠(yuǎn)程真機(jī)。
遠(yuǎn)程真機(jī)是部署在云端的真機(jī)設(shè)備資源，相比遠(yuǎn)程模擬器，遠(yuǎn)程真機(jī)的界面渲染和操作體驗(yàn)更加流暢，同時(shí)也可以更好的驗(yàn)證應(yīng)用在設(shè)備上的運(yùn)行效果，比如性能、手機(jī)網(wǎng)絡(luò)環(huán)境等。
當(dāng)前，遠(yuǎn)程真機(jī)僅支持 Phone 和 Wearable 兩種設(shè)備類型。開發(fā)者可通過點(diǎn)擊“Tools> Device Manager”打開設(shè)備列表，點(diǎn)擊 Remote Device 頁(yè)簽，登錄實(shí)名賬號(hào)，申請(qǐng)使用遠(yuǎn)程真機(jī)資源（如圖 5 所示）。
溫馨提示：開發(fā)者要想在遠(yuǎn)程真機(jī)上調(diào)試和運(yùn)行應(yīng)用，需要對(duì)應(yīng)用進(jìn)行簽名。
圖 5 遠(yuǎn)程真機(jī)示意圖
IT之家獲悉，除了以上兩大新增特性，DevEco Studio 2.2 Beta1 還在原有的基礎(chǔ)上，做了不少優(yōu)化，具體優(yōu)化點(diǎn)如下：
增強(qiáng)特性
? HarmonyOS SDK 新增 API Version 為 6 的接口，Stage 為 Beta。
? 分布式模擬器功能增強(qiáng)，默認(rèn)開啟該特性，無需在 DevEco Labs 中手動(dòng)開啟。
? HiTrace 日志跟蹤分析能力增強(qiáng)，新增支持 timeline 視圖和 events 視圖。
解決的問題
? 解決了限定詞目錄設(shè)置的屏幕密度與真實(shí)設(shè)備不一致時(shí)，預(yù)覽界面（文本、圖像等）會(huì)被縮放的問題。
? 解決了使用遠(yuǎn)程模擬器時(shí)，提示需要實(shí)名認(rèn)證，實(shí)名認(rèn)證完成后，仍然提示需要進(jìn)行實(shí)名認(rèn)證的問題。
? 解決了遠(yuǎn)程模擬器小概率出現(xiàn)列表中無法找到設(shè)備的問題。
? 解決了使用遠(yuǎn)程模擬器運(yùn)行應(yīng)用時(shí)，小概率出現(xiàn)無法找到已運(yùn)行模擬器的問題。
廣告聲明：文內(nèi)含有的對(duì)外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時(shí)間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。