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之家所有文章均包含本聲明。