上海城乡建设部网站,上海相亲网,会员制营销方案案例,东莞个人网站建设ArkUI#xff1a;提供HarmonyOS应用UI开发框架#xff0c;几件开发、精致体验、跨设备/跨平台。 ArkUI#xff08;方舟UI框架#xff09;为应用的UI开发提供了完整的基础设施#xff0c;包括简洁的UI语法、丰富的UI功能#xff08;组件、布局、动画以及交互事件#xff… ArkUI提供HarmonyOS应用UI开发框架几件开发、精致体验、跨设备/跨平台。 ArkUI方舟UI框架为应用的UI开发提供了完整的基础设施包括简洁的UI语法、丰富的UI功能组件、布局、动画以及交互事件以及实时界面预览工具等可以支持开发者进行丰富页面的开发。 声明式开发范式采用基于TypeScript声明式UI语法扩展而来的ArkTS语言从组件、动画和状态管理三个维度提供UI绘制能力。 类Web开发范式采用经典的HML、CSS、JavaScript三段式开发方式即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯便于快速将已有的Web应用改造成方舟UI框架应用。
1、ArkUI框架结构 开发模型层提供了UI开发范式的基础语言规范并提供内置的UI组件、布局和动画提供了多种状态管理机制为应用开发者提供一系列接口支持。引擎层后端引擎提供了兼容不同开发范式的UI渲染管线提供多种基础组件、布局计算、动销、交互事件提供了状态管理和绘制能力。提供了高效的绘制能力将渲染管线收集的渲染指令会知道屏幕能力。平台抽象层提供了针对不同操作系统渲染层的适配可抹平不同平台的接口差异实现ArkUI框架的多平台一致性 方舟UI框架示意图
2、ArkUI的优点 开发效率 声明式开发范式更接近自然语义的编程方式开发者可以直观地描述UI无需关心如何实现UI绘制和渲染开发高效简洁。 应用性能 如下图所示两种开发范式的UI后端引擎和语言运行时是共用的但是相比类Web开发范式声明式开发范式无需JS框架进行页面DOM管理渲染更新链路更为精简占用内存更少应用性能更佳。 发展趋势声明式开发范式后续会作为主推的开发范式持续演进为开发者提供更丰富、更强大的能力。
3、ArkUI的特性 应用模型页面形态支持的UI开发范式Stage模型推荐应用或服务的页面声明式开发范式推荐卡片 声明式开发范式推荐 类Web开发范式 FA模型应用或服务的页面 声明式开发范式 类Web开发范式 卡片类Web开发范式 4、ArkUI、ArkTS、声明式开发范式 ArkUI为应用的UI开发提供了完整的基础设施包括简洁的UI语法、丰富的UI功能组件、布局、动画以及交互事件以及实时界面预览工具等可以支持开发者进行丰富页面的开发。 ArkTS是UI开发语言基于typescript语言扩展而来是TS的超集。扩展能力包含各种装饰器、自定义组件、UI描述机制。 声明式开发范式基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架提供了构建HarmonyOS应用UI所必需的能力。
5、声明式UI和命令式UI对比 命令式开发范式代码如下
DirectionalLayout ...Text ...ohos:textHarmonyOS Developer World /Button ...ohos:textJoin Now /
/DirectionalLayout 基于ArkTS的声明式开发范式代码如下
Column() {Text(HarmonyOS Developer World)Button(Join Now)
} 与命令式开发范式相比声明式主要有以下几个优点
对于系统使用方通过设计声明式的接口开发者无需关心底层实现而更多关注上层业务对于系统的实现方通过声明式的接口上层使用者接口相对稳定系统可以不断的迭代优化对整个系统而言能够更系统的收集更多信息能够依据策略进行系统行为优化提升系统效率。 6、声明式UI和类Web开发范式对比 ArkUI为不同的开发者提供了两种开发范式基于ArkTS扩展的声明式开发范式和基于JS扩展的类Web开发范式 。 基于JS扩展的类Web开发范式代码如下
div classcontainertext classtext{{ HarmonyOS Developer World }}/textbutton classbutton{{ Join Now }}/button
/div 7、声明式开发范式 基于ArkTS的声明式开发范式的核心是数据驱动UI页面更新 声明式UI是西永选用的新一代开发范式通过数据驱动UI变化UI逻辑分离更直观更高效。 关键特征 a、类自然语言的UI结构描述 b、积木式组件组合 c、极简语法 8、常用组件 a、按钮Button 通常用于响应用户的点击操作其类型包括胶囊按钮、圆形按钮、普通按钮。Button作为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。
Button(OK, { type: ButtonType.Normal, stateEffect: true}).borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() {console.log(Button is OK)}) b、文本显示Text 通常用于展示用户视图如显示文章的文字。
Text(文本).fontSize(20).width(300).border({width:1}) c、显示图片Image 在应用中显示图片需要使用Image实现支持多种图片格式如png、jpg、bmp、gif、svg等。
Image($r(app.media.pic_name)).width(100).height(100).margin(15) d、线性布局Row/Column 是开发中最常用的布局通过线性容器Row和Column构建。线形图布局的子元素在线性方向上依次排列Column容器内子元素按照垂直方向排列Row容器内子元素按照水平方向排列。
Column( {space: 50}) {Column().width(90%).height(50).backgroundColor(0xAFEEEE)Column().width(90%).height(50).backgroundColor(0x0FFFFF)Column().width(90%).height(50).backgroundColor(0x00FFFF)
}
.width(100%)Row( {space: 50}) {Row().width(20%).height(350).backgroundColor(0xAFEEEE)Row().width(20%).height(350).backgroundColor(0x0FFFFF)Row().width(20%).height(350).backgroundColor(0x00FFFF)
}
.width(100%) e、其他组件
