華為鴻蒙開發新增 8 個 Sample 示例:支援 HarmonyOS 或 OpenHarmony(附具體內容)

語言: CN / TW / HK

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 中 <svg> 元件及其子元件的使用,包括 < svg>、<rect>、<circle>、<ellipse>、<path>、<line>、<polygon>、<polyline>、<text>、<animate>、<animateTransform>

執行環境: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 擴充套件的宣告式開發正規化”下載, 點此連結

「其他文章」