IT之家 11 月 16 日消息，據(jù)華為鴻蒙官方發(fā)布，HarmonyOS Sample 上新，新增了 8 個超級實用的應(yīng)用示例，其中 3 個是基于 TS 擴(kuò)展的聲明式開發(fā)范式示例，讓我們先睹為快。
說明“基于 TS 擴(kuò)展的聲明式開發(fā)范式”是方舟開發(fā)框架提供的兩種開發(fā)范式之一。IT之家獲悉，其采用更接近自然語義的編程方式，讓開發(fā)者可以直觀地描述 UI 界面，不必關(guān)心框架如何實現(xiàn) UI 繪制和渲染，實現(xiàn)極簡高效開發(fā)。官網(wǎng)文檔已更新了開發(fā)指南，感興趣的小伙伴可到官網(wǎng)進(jìn)行學(xué)習(xí)。
Sample1：新增 JS NativeDemo 示例
場景：本示例使用 JS 和 C++ 開發(fā)，使用 JS 調(diào)用 C++ 代碼，并在 UI 上顯示 C++ 代碼運(yùn)行結(jié)果。
運(yùn)行環(huán)境：HarmonyOS
源碼下載鏈接：
https://gitee.com/harmonyos/harmonyos_app_samples/tree/master/native/JSNativeDemo
Sample2：新增 JS Panel 示例
場景：本示例通過可滑動面板展示了商品詳細(xì)信息與平臺保障。JS 提供一種輕量級的內(nèi)容展示面板，此面板可滑動，可自定義觸發(fā)方式、彈出高度等屬性。
運(yùn)行環(huán)境：OpenHarmony
源碼下載鏈接：
https://gitee.com/openharmony/app_samples/tree/master/UI/JsPanel
Sample3 ：新增 JS List 示例
場景：本示例展示了 list 控件在商品分類列表中的應(yīng)用，在 listGroup 里采用兩個 list-item 分別展示了 Group 收縮和 Group 展開的兩種列表形態(tài)，點擊后會彈出相應(yīng)的 list 列表。
運(yùn)行環(huán)境：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>
運(yùn)行環(huán)境：OpenHarmony
源碼下載鏈接：
https://gitee.com/openharmony/app_samples/tree/master/UI/JsSvg
Sample5 ：新增 JS Dialog 示例
場景：本示例完成了添加和刪除聯(lián)系人功能，在添加和刪除時使用自定義彈窗來實現(xiàn)。JS 中支持用戶自定義彈窗，組件作為容器組件，用戶可以自定義彈窗的樣式和布局。
運(yùn)行環(huán)境：OpenHarmony
源碼下載鏈接：
https://gitee.com/openharmony/app_samples/tree/master/UI/JsDialog
Sample6 ：新增 eTSBuildCommonView 創(chuàng)建簡單視圖示例
場景：本示例通過 Stack 布局和 Flex 布局構(gòu)建的簡單頁面展示了食物番茄的圖片和營養(yǎng)信息。詳情參考官網(wǎng)文檔：ArkUI-> 基于 TS 擴(kuò)展的聲明式開發(fā)范式-> 體驗申明式 UI。
運(yùn)行環(huán)境：HarmonyOS 和 OpenHarmony（不同操作系統(tǒng)中，示例源碼不同）
運(yùn)行在 HarmonyOS 源碼下載鏈接：
https://gitee.com/harmonyos/harmonyos_app_samples/tree/master/ETSUI/eTSBuildCommonView
運(yùn)行在 OpenHarmony 源碼下載鏈接：
https://gitee.com/openharmony/app_samples/tree/master/UI/eTSBuildCommonView
Sample7 ：新增 eTSDefiningPageLayoutAndConnection 頁面布局和連接示例
場景：本示例構(gòu)建食物分類列表頁面和食物詳情頁，包含：List 布局：創(chuàng)建食物數(shù)據(jù)模型，F(xiàn)orEach 循環(huán)渲染 ListItem；Grid 布局：展示食物分類信息，創(chuàng)建 Tabs 頁簽展示不同分類的食物；路由機(jī)制：router 接口、Navigator 和頁面間數(shù)據(jù)傳遞。詳情參考官網(wǎng)文檔：ArkUI-> 基于 TS 擴(kuò)展的聲明式開發(fā)范式-> 頁面布局與連接。
運(yùn)行環(huán)境：HarmonyOS 和 OpenHarmony（不同操作系統(tǒng)中，示例源碼不同）
運(yùn)行在 HarmonyOS 源碼下載鏈接：
https://gitee.com/harmonyos/harmonyos_app_samples/tree/master/ETSUI/eTSDefiningPageLayoutAndConnection
運(yùn)行在 OpenHarmony 源碼下載鏈接：
https://gitee.com/openharmony/app_samples/tree/master/UI/eTSDefiningPageLayoutAndConnection
Sample8 ：新增 eTSDrawingAndAnimation 繪圖和動畫示例
場景：本示例實現(xiàn)健康飲食應(yīng)用的動效部分，包含：Logo 繪制：使用繪制組件 Shape 和 Path 繪制健康飲食應(yīng)用的 Logo；閃屏和頁面轉(zhuǎn)場動效：顯式動畫 animateTo 實現(xiàn)閃屏動畫，添加食物分類列表頁面到食物詳情頁的共享元素轉(zhuǎn)場動畫。詳情參考官網(wǎng)文檔：ArkUI-> 基于 TS 擴(kuò)展的聲明式開發(fā)范式-> 繪圖和動畫。
運(yùn)行環(huán)境：HarmonyOS
源碼下載鏈接：
https://gitee.com/harmonyos/harmonyos_app_samples/tree/master/ETSUI/eTSDrawingAndAnimation
“基于 TS 擴(kuò)展的聲明式開發(fā)范式”下載，點此鏈接。
廣告聲明：文內(nèi)含有的對外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。