支援低程式碼開發和遠端真機，DevEco Studio 2.2 Beta1來啦

6月25日，DevEco Studio釋出新版本2.2 Beta1，推出 低程式碼開發和 遠端真機兩大新特性。本文帶你一睹為快。

亮點一：面向JS框架的低程式碼開發

低程式碼開發是 DevEco Studio 2.2 Beta1新增的一種面向JS框架的 視覺化介面開發方式，遵循HarmonyOS JS開發規範，具有豐富的頁面編輯功能。 開發者可透過元件的拖拽和複製等方式，在低內碼表面完成介面開發及JS邏輯關聯，大大降低開發者上手成本，提高使用者介面開發效率。

官網開發規範：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-js-overview-0000000000500376

開發者可在工程中”js>pages目錄下，單擊滑鼠右鍵，選擇New > JS Visual”新建低內碼表面。

建立低內碼表面時（如圖1所示），系統會自動生成對應的visual檔案和js檔案，兩種檔案的目錄結構一致。其中，visual檔案儲存低內碼表面的資料模型，雙擊該檔案即可開啟低內碼表面，進行視覺化開發。而js檔案描述了低內碼表面的行為邏輯，定義了頁面裡所用到的所有的邏輯關係，比如資料、事件等。

注意：使用低內碼表面開發時，其關聯js檔案的同級目錄，即js>default>pages>page目錄下不能包含hml或css檔案，否則編譯報錯。

圖1建立低內碼表面演示圖

低內碼表面建立成功後的介面如圖2所示， 由元件欄、元件樹、畫布、功能皮膚以及屬性樣式欄五部分組成。開發者在低內碼表面進行的相關操作，均會儲存到visual檔案中。

圖2低內碼表面

1.低內碼表面組成：① 元件欄（UI Control）

位於低內碼表面的左上方，選中元件欄中的元件，將其拖至中間畫布，即可實現一個元件的新增。

② 元件樹（Component Tree）

位於低內碼表面的左下方，開發者可透過元件樹，直觀地看到元件的層級結構、摘要資訊以及錯誤提示。開發者選中元件樹中的元件，即實現畫布內元件的快速定位。

 

•  搜尋框 ：在搜尋框內輸入控制元件型別，如“Image”，元件樹內顯示所有“Image”型別的元件。

 

•  下拉框 ：點選巢狀元件的下拉框，可在元件樹中顯示/隱藏巢狀元件內的子元件。

 

•  眼睛圖示 ：點選非巢狀元件的眼睛圖示，該元件將在畫布中被隱藏，眼睛圖示變為 ；再次點選圖示，該元件將在畫布中重現，眼睛圖示變回 ；點選巢狀元件的眼睛圖示，該元件和其子元件將在畫布中同時被隱藏/顯示。

 

•  摘要資訊 ：對於Div、Image等元件，摘要資訊欄顯示元件的ID；對於Text、Button、Input、Span等可以設定文字內容的元件，摘要資訊欄顯示對應的文字內容。

 

•  錯誤提示：元件有錯誤時，元件右側出現小紅點，滑鼠點選小紅點，出現所有元件的詳細錯誤資訊。錯誤資訊的範圍包括：資料繫結和方法繫結錯誤。

③ 畫布（Canvas）

位於低內碼表面的中間，開發者可在此區域對元件進行視覺化編輯，如：拖拽、複製、剪下、貼上等，從而實現快速編輯UI介面的需求。

④ 功能皮膚（Panel）

畫布上方為功能皮膚區，包含畫布放大/縮小按鈕、撤銷/重做按鈕、顯示/隱藏元件虛擬邊框按鈕以及程式碼轉換按鈕。

⑤ 屬性樣式欄（Attributes & Styles）

位於低內碼表面的右側，開發者選中畫布中的元件後，可在屬性樣式欄修改元件的屬性、樣式和繫結事件。在設定屬性(Properties)和繫結事件(Events)時，開發者可在低內碼表面內直接關聯js檔案中的資料與方法，由此定義低內碼表面的業務邏輯。

 

•  Properties ：用於設定元件基本標識和外觀顯示特徵的屬性。如元件的ID、If等屬性。

 

•  General ：用於設定Width、Height、Background、Position、Display等常規樣式。

 

•  Feature ：用於設定元件的特有樣式，如描述text文字大小的FontSize樣式等。

 

•  Flex ：用於設定Flex佈局相關樣式。

 

•  Events ：為元件繫結相關事件，並設定繫結事件的回撥函式。

 

•  Dimension ：用於設定Padding、Border、Margin等與盒式模型相關的樣式。

 

•  Grid ：用於設定Grid網格佈局相關樣式，該圖示只有Div元件的Display被設定為Grid時才會出現。               

2.低程式碼開發還支援實時預覽和多語言等功能：

① 支援對visual檔案的實時預覽

當開發者透過低內碼表面修改頁面佈局時，預覽器可實時呈現修改後的設計效果，提升介面開發設計效率（如圖3所示）。

圖3實時預覽效果圖

② 支援多語言能力

為滿足開發者多語言版本的開發需求，低內碼表面推出了多語言能力，開發者可透過定義資原始檔和引用資源2個步驟，使用多語言能力（如圖4所示）。第一步：在指定的i18n資料夾內放置語言資原始檔。第二步：在低內碼表面的屬性樣式欄中，使用$t方法引用資源，系統將根據當前語言環境和指定的資源路徑，顯示對應語言的資原始檔中的內容。滿足開發者多語言版本的開發需求。

圖4 多語言功能設定圖

亮點二：新增遠端真機

為了解決開發者獲取HarmonyOS真機裝置資源困難的問題，DevEco Studio 2.2 Beta1推出了 遠端真機。

遠端真機是部署在雲端的真機裝置資源，相比遠端模擬器，遠端真機的 介面渲染和 操作體驗更加流暢，同時也可以 更好的驗證應用在裝置上的執行效果，比如效能、手機網路環境等。

當前，遠端真機僅支援Phone和Wearable兩種裝置型別。開發者可透過點選“Tools > Device Manager”開啟裝置列表，點選Remote Device頁籤，登入實名賬號，申請使用遠端真機資源（如圖5所示）。

溫馨提示：開發者要想在遠端真機上除錯和執行應用，需要對應用進行簽名。

圖5遠端真機示意圖

除了以上兩大新增特性， DevEco Studio 2.2 Beta1還在原有的基礎上，做了不少最佳化，具體最佳化點如下：

增強特性

✦ HarmonyOS SDK新增API Version為6的介面，Stage為Beta。

✦ 分散式模擬器功能增強，預設開啟該特性，無需在 DevEco Labs中手動開啟。

✦  HiTrace日誌跟蹤分析能力增強，新增支援timeline檢視和events檢視。

解決的問題

✦ 解決了限定詞目錄設定的螢幕密度與真實裝置不一致時，預覽介面（文字、影像等）會被縮放的問題。 

✦  解決了使用遠端模擬器時，提示需要實名認證，實名認證完成後，仍然提示需要進行實名認證的問題。

✦ 解決了遠端模擬器小機率出現列表中無法找到裝置的問題。

✦ 解決了使用遠端模擬器執行應用時，小機率出現無法找到已執行模擬器的問題。

一次次的迭代升級，只為服務每一個你，DevEco Studio願攜手廣大開發者，一起創造無限可能。