IT之家 11 月 16 日訊息，據華為鴻蒙官方釋出，HarmonyOS Sample 上新，新增了 8 個超級實用的應用示例，其中 3 個是基於 TS 擴充套件的宣告式開發正規化示例，讓我們先睹為快。
說明“基於 TS 擴充套件的宣告式開發正規化”是方舟開發框架提供的兩種開發正規化之一。IT之家獲悉，其採用更接近自然語義的程式設計方式，讓開發者可以直觀地描述 UI 介面，不必關心框架如何實現 UI 繪製和渲染，實現極簡高效開發。官網文件已更新了開發指南，感興趣的小夥伴可到官網進行學習。
Sample1：新增 JS NativeDemo 示例
場景：本示例使用 JS 和 C++ 開發，使用 JS 呼叫 C++ 程式碼，並在 UI 上顯示 C++ 程式碼執行結果。
執行環境：HarmonyOS
原始碼下載連結：
https：//gitee。com/harmonyos/harmonyos_app_samples/tree/master/native/JSNativeDemo
Sample2：新增 JS Panel 示例
場景：本示例透過可滑動面板展示了商品詳細資訊與平臺保障。JS 提供一種輕量級的內容展示面板，此面板可滑動，可自定義觸發方式、彈出高度等屬性。
執行環境：OpenHarmony
原始碼下載連結：
https：//gitee。com/openharmony/app_samples/tree/master/UI/JsPanel
Sample3 ：新增 JS List 示例
場景：本示例展示了 list 控制元件在商品分類列表中的應用，在 listGroup 裡採用兩個 list-item 分別展示了 Group 收縮和 Group 展開的兩種列表形態，點選後會彈出相應的 list 列表。
執行環境：OpenHarmony
原始碼下載連結：
https：//gitee。com/openharmony/app_samples/tree/master/UI/JsList
Sample4 ：新增 JS Svg 示例
場景：本示例展示了 JS 中 元件及其子元件的使用，包括 、、、、
、
、
、
、、、
執行環境：OpenHarmony
原始碼下載連結：
https：//gitee。com/openharmony/app_samples/tree/master/UI/JsSvg
Sample5 ：新增 JS Dialog 示例
場景：本示例完成了新增和刪除聯絡人功能，在新增和刪除時使用自定義彈窗來實現。JS 中支援使用者自定義彈窗，元件作為容器元件，使用者可以自定義彈窗的樣式和佈局。
執行環境：OpenHarmony
原始碼下載連結：
https：//gitee。com/openharmony/app_samples/tree/master/UI/JsDialog
Sample6 ：新增 eTSBuildCommonView 建立簡單檢視示例
場景：本示例透過 Stack 佈局和 Flex 佈局構建的簡單頁面展示了食物番茄的圖片和營養資訊。詳情參考官網文件：ArkUI-> 基於 TS 擴充套件的宣告式開發正規化-> 體驗申明式 UI。
執行環境：HarmonyOS 和 OpenHarmony（不同作業系統中，示例原始碼不同）
執行在 HarmonyOS 原始碼下載連結：
https：//gitee。com/harmonyos/harmonyos_app_samples/tree/master/ETSUI/eTSBuildCommonView
執行在 OpenHarmony 原始碼下載連結：
https：//gitee。com/openharmony/app_samples/tree/master/UI/eTSBuildCommonView
Sample7 ：新增 eTSDefiningPageLayoutAndConnection 頁面佈局和連線示例
場景：本示例構建食物分類列表頁面和食物詳情頁，包含：List 佈局：建立食物資料模型，ForEach 迴圈渲染 ListItem；Grid 佈局：展示食物分類資訊，建立 Tabs 頁籤展示不同分類的食物；路由機制：router 介面、Navigator 和頁面間資料傳遞。詳情參考官網文件：ArkUI-> 基於 TS 擴充套件的宣告式開發正規化-> 頁面佈局與連線。
執行環境：HarmonyOS 和 OpenHarmony（不同作業系統中，示例原始碼不同）
執行在 HarmonyOS 原始碼下載連結：
https：//gitee。com/harmonyos/harmonyos_app_samples/tree/master/ETSUI/eTSDefiningPageLayoutAndConnection
執行在 OpenHarmony 原始碼下載連結：
https：//gitee。com/openharmony/app_samples/tree/master/UI/eTSDefiningPageLayoutAndConnection
Sample8 ：新增 eTSDrawingAndAnimation 繪圖和動畫示例
場景：本示例實現健康飲食應用的動效部分，包含：Logo 繪製：使用繪製元件 Shape 和 Path 繪製健康飲食應用的 Logo；閃屏和頁面轉場動效：顯式動畫 animateTo 實現閃屏動畫，新增食物分類列表頁面到食物詳情頁的共享元素轉場動畫。詳情參考官網文件：ArkUI-> 基於 TS 擴充套件的宣告式開發正規化-> 繪圖和動畫。
執行環境：HarmonyOS
原始碼下載連結：
https：//gitee。com/harmonyos/harmonyos_app_samples/tree/master/ETSUI/eTSDrawingAndAnimation
“基於 TS 擴充套件的宣告式開發正規化”下載，
點此連結。