【HarmonyOS 5】鸿蒙入门系列 - 鸿蒙第一课 HelloWorld工程详解原创

哈喽，大家好，我是George，今天为大家带来的是我们的入门系列第一课。哈姆牛s hello world工程是去怎么做的？通过这个hello world工程呢？我们可以了解到鸿蒙的呃，响应式布局和它的声明式开发具体是怎么做的。首先我们先回顾一下，上次讲哈牛S开发项目的时候说createre project的这个东西，他创建项目的时候通过application，就是创建一个APP服务，创建这个空的ability作为一个示例项目，然后点ne之后，这是它呃项目创建的一些属性参数。这里就不再赘述了，上节都讲过了，如果没有看过的可以去看一下，然后我们点finish之后创建完的项目就是这样的。鸿蒙的ID有一个最大的一个就是前提，就是你去连接设备的时候，不管是这个地方是模拟器还是真机，你都要登录，就这个地方一定要登录的，登录完之后你才能给你的项目去创建一个自定义的签名。

在这里去自定义签名。你C你签名之后你的项目才能跑，或者是更麻烦一点的就入门，可能接触起来会有比较难，那我们后后面会讲就是在ADC平台上要配置你的APP，然后给你的APP去做一个注册，然后就可以去做一个开发证书或者生产证书，那个时候就不用自动签名就可以做扩展了解一下。好，我们现在先讲回来，这个空位BD项目的整个项目结构是这样的，很简单。就是哈us一个非常有特点的一个项目都是这样的，它是下面这个地方呢，就是整个项目的一些配置文件，这个地方entry model, 它就是我们鸿蒙里面启动的一个最小单元和移动开发里边的，呃，Activity.

还有那个iOS里面的，呃，Controller都很像的一个东西，它是一个最小基本单元，就是我操作这个APP界面上面最小的单元，但是这个不是一个界面，这个N，这个entry呢，它在鸿蒙里边，它是你。嗯，它它这个NTT下面可以含有多个页面，就我可能是一个单N单的BT项目，就一个NTT就搞定了，如果我下面要创建多个B例T，可能NTT下面要创建多个，像我创建NTT的时候呢，它默认系统会。自带一个比例T，我们可以看一下。正确ability就是这个，这就是我们的入口ability，我们要先了解它整个的一个结构，Ability下面呢。它会创建一个舞台，舞台是什么概念呢？就是我们眼睛能看见的一个可视区域，舞台下面它会去创建窗口。窗口就是我们看见了整个界面上那些配置界面就是在加载的这个窗口里的就是一个load content加载内容，加载的就其实是我们的窗口内容。

这个是最基本的一个入口。文件下面这个pages呢，就是我们刚才讲的，它会去加载这个舞台，会去加载一些配置界面的，配置界面你要去写啊，都要写在这个配置下，那它是怎么通过这个路径去读到它的呢？如果每次都是这样去写。系统是怎么找到的呢？系统是有一个映射表的，是在这个资源目录下base，然后有一个profile。这里呢，Pages就是我们的一个系统注册路由表路径的一个表。如果我去创建一个空的配置。比如说叫test，它会默认。在这个底下插到插入进去的这里，需要同步一下就会报错。

所以说我们一定要用快捷方式去创建，如果你单个的，比如说我copy了一个类进去，然后你这个地方就需要去手动去配了。现在我们配了这个。Index这个界面，这个界面就是刚才说的空项目生自动生成的文件，它整个的内容是这样的，这是鸿蒙很有特色的，它是一个榆林式的一个，呃，UI布局，像我们的Fla特的就是这样写的，还有安卓的combo啊，还有iOS的Swift的UI啊，都是这样的。这个是我们现在应用开发，呃，一个趋势吧，整个都是这样的一种榆林排版的布局，这样的布局是为了干什么呢？是为了方便我们这种响应式，还有声明式的整个数据流转的操作。就是我们现在和传统的移动端开发的最大的区别就是原来它是命令式的编程，它除了画完界面之后，他还要把数据扔到界面里，然后再操作。

界面上的数据，你要去动态的去找到那个控件，然后让他去刷新是很麻烦的，那我们现在其实很简单了，像前端的那种思想vuee啊，都是这样的，就是我只关心去画一个界面，之后呢，然后我去关心它对应的数据，然后这个数据到底是哪些空间去用呢？我们给他注册好。然后这个数据一变化，我们是不管的，整个APPUI这个框架，它会去帮我们去更新，去渲染，这就很方便了，可以节极大的去节省我们开发的一个呃呃，时间成本，还有效率的提升。我们可以看到呢，鸿蒙里边它会有两个声明式的一个装饰器，这个东西entry我们可以理解它是它的字面意思是入口，但我们可以理解成它是一个配置，是一个界面，有所有爱的entry修饰的，它都是一个界面配置，配置呢，它需要在。

这边进行一个路径的注册，配置目录下面，然后有哪些文件这样一个注册，注册完了之后呢，我们在入口文件ability里就可以去用。比如我们现在启动一下，它默认是用的index界面，Index界面还是稍微有点复杂的，它是一个相对布局，然后套着一个文本控件。我们可以看一下效果。稍等我连接一下我的分布式。嗯，这就是你这个的界面。然后一点击。这是怎么实现呢？就可以看到这个变量被at n at state这个装饰器修饰了之后，就代表着AUI这个框架帮我去监听这个变量image images.

Message这个变量它是hello word嘛，就是它的初始值，所以我们一进来的时候它是hello word, 那为什么我们点的时候它就会变成work呢？是因为我们在这个文本控件底下绑了一个uncle click点击事件，点击事件里我们我们去做的一个操作就是把这个变量的值变成了welcome，那它点击之后就会自自动触发UI的刷新。然后整个布局呢，这个builder就是我们自带的就是这个界面，如果你用at entry或者at component去修饰之后，它会自带一个builder builder就是我们要在这里面去写我们的UI。然后刚才讲过这个entry，它是一个配置S，那这个component是什么呢？Component就是我们这个界面里边的一个在小一级别的组件级别的概念，就是我一个界面，它里边是有很多个控件儿的，那控件儿和界面之间它是有一个组件的概念，就是我把多个组件，比如说我想复用对吧，我这个文本控件我在这儿是一个，所以我在其他界面都可以去用文本控件，但是如果我这个布局里边，比如说我三个文本控件，然后很多界面都要都是这种样式，都有这三个空件，然后每次要都在其他界面都写三个空件，就很麻烦，所以这里呢，我们就可以把文本空件抽出来，抽出来之后用at应用at特component修饰，它就变成了一个组件，这个组件就是一个自定义组件，它就可以给其他界面去服用。

然后我们看到这个文本控件，这个是最新版的，像之前它是一个，呃。卡姆和肉的一个布局，现在都用相对布局作为一个示例了，相对布局相对来说比卡姆和肉还是稍微难一点的，这个概念如果是移动开发还是很好理解的，就是这个地方我们首先有一个ID，这个ID呢就代表着这个控件是谁给他一个标识，然后下面这个地方就是设置这个文本空间的一些样式，什么字体大小啊，它的自己加粗呀，下面这个就是规则，就是如果我这个控件在相对布局里，你都可以设置一个。

文本空间的对齐规则，这里呢，我们设置的是横向和纵向的，它的一个居中。整个界面还是很简单的，但是这样的一个界面很典型，就可以带我们去了解他们us，它的整个一个嗯，渲染和数据处理的一个逻辑了。那我们今天就先到这儿了，谢谢。