鸿蒙系统01
创建第一个项目
step1：
下载开发工具DevEco Studio
step2：
创建Empty Ablility工程
step3：
Project导航中，初始化创建项目的模板代码（ entry -> src -> main -> ets -> pages -> Index.ets）
解析模板：
其中，@Component装饰器装饰了struct关键字声明的数据结构Index。Index被@Component装饰后具备组件化的能力，通过实现build方法表示UI。
@Entry装饰的@Component将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。
布局，界面有RelativeContainer相对布局容器作为根容器，RelativeContainer支持容器内部的子元素设置相对位置关系，适用于界面复杂场景的情况，对多个子组件进行对齐和排列。
Text组件展示一段文本，文本信息由@State装饰器装饰的状态变量message驱动，Text组件定义了组件标识id为HelloWorld，用于唯一指定组件。
定义字体大小fontSize取值为$r(‘app.float_page_text_font_size’)资源类型；定义文本的字体粗细fontWeight取值为Bold，即字体较粗。【字体大小等数据的值一般存储在/entry/src/main/resources/base/element/float.json文件下，可以按照上文page_text_font_size的方式保存至float.json文件中，并通过$r(‘app.float.xxx’)进行资源引用。】
alignRules属性用于指定设置在相对容器中子组件的对齐规则，仅当父容器为RelativeContainer时生效，这里定义Text组件横向居中和纵向居中。
step4：
开启右边栏的Previewer，预览将工程中的@Entry作为实现入口，自动实现预览。（此处需要选中@Entry所在文件，预览器才能打开）
Step5:
修改APP的名称为”HMOS世界入门版”，修改entry/src/main/resources/base/element/string.json文件，将EntryAbility_label的value修改为“HMOS世界入门版”。
step6:
修改APP的图标。将01_Resources文件夹中的background.png和foreground.png图片重命名为app_background.png和app_foreground.png，并复制粘贴到AppScope/resources/base/media文件夹中，将其中原本的app_background.png和app_foreground.png文件替换掉。
页面结构总览
step1：
轮播图部分：可自动播放，展示多张图片的组件，命名为Banner，每一个元素为BannerItem。
赋能套件部分：横向可滑动的组件，命名为Enablement，由多个Enablementitem组成。
入门教程部分；纵向可滑动的组件，命名为Tutorial，由多个Tutorial item组成。
step2：
轮播图部分：Swiper组件提供滑动轮播显示的能力。
赋能套件部分：Grid组件为网格容器，由“行”和“列”分割的单元格所组成，其中容器内各条目对应一个GridItem组件。如果仅设置行、列数量与占比中的一个，网格单元将按照设置的方向排列，超出Grid显示区域后，Grid拥有可滚动能力。在这部分，可以设置单行显示，则赋能套件部分可以横向滑动。
入门教程部分：List容器可以轻松高效地显示结构化、可滚动的信息。当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。
组件化
模板：
1 |
|
