感谢IT之家网友 肖战割割 的线索投递！ 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 扩展的声明式开发范式＂下载，点此链接。