Sample上新了!快来拿

鸿蒙开发者社区官方账号
发布于 2021-11-16 14:40
浏览
2收藏

本周Sample上新,新增了8个超级实用的应用示例,其中3个是基于TS扩展的声明式开发范式示例,让我们先睹为快。

说明 “基于TS扩展的声明式开发范式”是方舟开发框架提供的两种开发范式之一。采用更接近自然语义的编程方式,让开发者可以直观地描述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

以上就是本期的全部内容,感谢大家的观看。

分类
已于2021-11-16 14:40:42修改
4
收藏 2
回复
举报
1条回复
按时间正序
/
按时间倒序
小强鼓掌
小强鼓掌

有用,学习了!

回复
2022-5-9 09:42:05
回复
    相关推荐