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