了解一些ArkUI概念并熟悉应用的结构-鸿蒙开发者社区-51CTO.COM

了解一些ArkUI概念并熟悉应用的结构 原创 精华

Tuer白晓明
发布于 2022-2-24 17:33
浏览
2收藏

$\begin{array}{|rrr|}\hline
\
& \color{#FF724C}{【本文正在参与优质创作者激励】} & \
\
\hline
\end{array}$

$\color{#1F6CC0}{方舟开发框架(ArkUI框架)}$

$\color{#2A2C41}{针对不同目的和技术背景的开发者提供了两种开发范式:}$
$\color{#2A2C41}{①基于JS扩展的类Web开发范式(简称“类Web开发范式”)}$
$\color{#2A2C41}{②基于TS扩展的声明式开发范式(简称“声明式开发范式”)。}$

$\color{#1F6CC0}{声明式开发范式}$

是为HarmonyOS平台开发极简、高性能、跨设备应用设计的UI开发框架,支持开发者高效快速构建跨设备应用UI界面。声明式开发告诉编辑器做什么,不关注其怎么做,即按照设定的规则进行组装就能达到实用的效果。

声明式开发范式可以写出更简洁、更具有表现力的代码,代码量越少,出现错误的几率越小。

Text('Hello World').fontSize(50)

$\color{#1F6CC0}{创建项目}$

了解一些ArkUI概念并熟悉应用的结构-鸿蒙开发者社区

$\color{#1F6CC0}{应用目录结构}$

了解一些ArkUI概念并熟悉应用的结构-鸿蒙开发者社区
$\color{#2A2C41}{开始我们只需要关注etsconfig.jsonresources}$

  • ets:存放ets代码的文件夹;
  • config.json:配置文件,一般情况下不用修改,创建页面时一般会自动把页面路由引入;
  • resources:存放资源文件。

$\color{#1F6CC0}{ets目录详解}$

  • app.ets文件用于全局应用逻辑和应用生命周期管理,提供onCreateonDestroy方法,用于创建和销毁。
  • pages目录用于存放所有组件页面,即根据实际需求产出的UI界面。
  • common目录用于存放公共代码文件,可选。

$\color{#1F6CC0}{资源引用}$

  • 引用应用资源:通过$r('app.type.name')的形式引用resources目录中base目录下的资源,其中app代表resources目录中定义的资源,type代表资源类型或存放位置,如base->element目录下的stringname为资源名称。
    了解一些ArkUI概念并熟悉应用的结构-鸿蒙开发者社区

$\color{#2A2C41}{注:引入rawfile下资源时使用\$rawfile('filename')的形式,暂仅支持Image控件引入图片资源。}$

  • 引入系统资源:可以通过$r('sys.type.resource_id')的形式引入系统资源,可以开发出具有相同视觉风格的应用,其中sys代表系统资源,type代表资源类型(可取color|float|string|media),resource_id代表资源id,参见系统资源附录
    了解一些ArkUI概念并熟悉应用的结构-鸿蒙开发者社区

$\color{#1F6CC0}{总结}$

在开始“荟萃”之前,对ArkUI有一些简单的了解,接下来我将通过实例应用带大家一起领略声明式开发范式的开箱即用的组件、丰富的动效接口、状态与数据管理、系统能力接口。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2022-2-24 17:33:24修改
3
收藏 2
回复
举报
回复
    相关推荐