https|华为鸿蒙开发新增 8 个 Sample 示例
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 中
运行环境: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
- 华为|别不信!魅族如今处境,雷军早有预料,小米也早已体验
- 华为|问界M5风光无限,赛力斯SF5暗自神伤,华为或许低估了造车这事?
- 华为鸿蒙系统|华为偷偷上架新机,鸿蒙系统+5000mAh大电池,仅售1399元
- 5G|关于5G,华为赢了
- 华为|华为任正非最新信件曝光:春天很快就会到来!
- 5G|华为利用5G毫米波发现园区入侵者,这让美国5G联盟情何以堪
- ios|华为迎来新里程碑,在新领域旗开得胜!
- 打脸!华为在美国,用专利把英特尔、苹果、微软、高通打败了
- 华为|iOS15.2.1 正式版发布:新增 6 项改进
- 鸿蒙os|麒麟9000再度发力,华为高精度导航让你出行不迷糊