鸿蒙全新声明式UI框架ArkUI初体验,开发应用不错,比起flutter如何

简介: 鸿蒙全新声明式UI框架ArkUI初体验,开发应用不错,比起flutter如何

ArkUI框架介绍:


华为开发者大会2021将于10月22日在东莞松山湖正式开幕,推出了全新的ArkUI应用开发框架。


ArkUI一套极简声明式UI范式开发框架,是HarmonyOS提供的一套基于JS/TS语言的开发能力集合,旨在帮助应用开发者高效开发跨端应用UI界面,自动适配多种不同的屏幕形态,开发者无需关心框架如何实现UI绘制和渲染,只需聚焦应用开发,从而实现极简高效地开发。


体验了一把应用开发,组件式开发效率不错。有点儿类似于flutter,但是比flutter牛叉点儿,为啥?因为你至少少学一门dart语言啊,这打它语言要说语法也不难,但是即便再简单也得有生态和下功夫学不是。鸿蒙厉害了,直接是TS的语法和利用现有的js/ts生态。组件化,可视化的开发应用,体验着实不赖,一小会儿功夫就能整出来个漂亮页面来。


感觉这会是后续应用开发的主流,因为开发够简单和高效。且是流行的组件式开发,能够最大限度复用,效率提高不少,若是性能也不错,有啥理由不用呢。


华为开发者生态建设的不错,竟提供了很多的样例和分析教程在官网上,是不错的教程。详细介绍,参见:


https://developer.huawei.com/consumer/cn/codelabsPortal/index



ArkUI框架的详细介绍:


https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-EtsUI


ArkUI框架的优点


流行的组件式开发(最大化复用),可视化开发,支持热更新,开发效率高。


随着用户设备类型的不断增加,手机、平板、大屏、车载、穿戴等设备对应用UI界面开发提出了更加多样化的诉求,应用开发者在开发应用界面的时候要考虑多种设备场景,从而导致工程代码量增加,甚至需要维护多个工程来适配不同设备。


使用ArkUI框架一次开发,多端部署通过多终端统一编程框架、自动适配多终端硬件能力的统一抽象UI控件,以及为不同屏幕的终端提供自适应布局,开发者无需针对不同设备开发多套代码,只需一套应用工程,就可以在多种终端部署。不仅提高了开发效率,还降低了代码的维护难度。


更多“一次开发,多端部署”开发详情,前往官网Codelab: https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-EtsMultiDeployment


ArkUI框架开发体验


环境准备:


下载或更新最新的DevEco Studio,目前最新版本是3.0 Beat1,若已经是3.0版本,可以直接在菜单help->check for updates自动更新软件。DevEco Studio越来越好用了,记得之前的2.x版本软件更新竟需要重新下载安装,真是费劲。这后续直接点击更新自动下载增量更新包完成升级。



新建工程,注意选择eTS语言(扩展的ts,这个估计是今后主推的开发语言)。



如果你的没出来这个选项,可能是一些sdk没有下载或更新。


在File菜单->settings里,找到SDK manager,Harmony OS legacy SDK,选中SDK(API version 7)



为了支持实时界面预览功能,tools里的previewer也更新为最新的3.0.0.0版本。



至此,环境一切准备就绪啦。若是你的sdk没下载成功,多半是网络问题。


接下来选一个empty ability,开始编码啦。



在编码区修改代码,在最后测能够实时看到效果,这开发效率贼爽。且比起flutter来,编码更简单直观,还是你熟悉的css和ts语法,不像flutter一样还要再去学一门打它(dart)语言。直接用ts,谁也不"打"。


以上只是个环境准备和小的hello wrold入门。官网的教程不要太贴心,照着做就是了,有很多例程可以参考。


比如:eTS基础组件Slider的使用,写的太详细了,最后还附上了源码。


https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-ETS-Slider



未来在哪里?未来已来。有些人因为看见而相信,只有少部分人因为相信而看见。华为的创新力真厉害,以后不是你选择用不用鸿蒙,而是因为好用不得不用。譬如电视,看个电视还要会员,手机会员还不行,得买专门电视会员,各种广告和收费。直接上智慧屏手机电影分享在智慧屏看。


什么是真正的万物互联?华为的harmony OS做到了,直接从系统层打通了设备间的通信带来了更好的体验。


活到老学到老,学习也是一种兴趣爱好。与时俱进,终身学习。期待国人不断的创新,发明和创造,引领未来。


使用感受及不足


感受:组件式开发,一次开发多平台部署,可视化开发也够直观,这是优点,可以对标google的flutter。但是体验后仍感受到一些不足。


不足一:目前仅page页面可以预览,如果是自己封装的组件,不支持界面预览。


不足二:官方虽然提供了不少的demo示例,但都是一些demo,介绍太过于零碎,不够系统和完整。比如,如何网络访问,如何文件存储,多页面传值,界面跳转,系统api调用,native层交互等等,有没相应的工程代码指导,如何组织代码结构。期待后续有完整的教程介绍,涵盖应用开发的方方面面。


以上仅是最初级的体验,可能观点不完全对,欢迎提供不同意见。


引用:


如何快速体验鸿蒙全新声明式UI框架ArkUI?_华为开发者联盟-CSDN博客


HarmonyOS系统Codelabs技术指导_华为HarmonyOS源代码 - HarmonyOS应用开发官网


https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-EtsUI


相关文章
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
14天前
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
73 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
1月前
「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用
本篇教程将实现一个打卡提醒小应用,通过用户输入时间进行提醒设置,并展示实时提醒状态,实现提醒设置和取消等功能。
68 10
|
1月前
|
UED
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。
72 13
|
1月前
「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用
本篇教程将介绍如何创建一个模拟记账应用,通过账单输入、动态列表展示和实时统计功能,学习接口定义和组件间的数据交互。
168 68
|
2月前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件50」UI互动应用篇27 - 水果掉落小游戏
本篇教程将带你实现一个水果掉落小游戏,掌握基本的动态交互逻辑和鸿蒙组件的使用,进一步了解事件处理与状态管理。
61 14
|
2月前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
1432 1
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
2月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
3月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
3月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
197 8

热门文章

最新文章

  • 1
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 3
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 4
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 6
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
  • 7
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 9
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡