--- theme: condensed-night-purple --- ## 前言这里是鸿蒙开发的指南，这几天鸿蒙开发引起了大家的注意，咱们不去讨论那些有的没的东西，只进行内容学习，于是我结合官网和例子准备给大家一份使用手册这里不讨论鸿蒙开发的好坏，如果你想了解或者是学习，那么我希望这篇文章会对你有帮助~ 咱们开始吧~ ## DevEco Studio下载可以先进入到官网 [华为HarmonyOS智能终端操作系统官网 | 应用设备分布式开发者生态](https://www.harmonyos.com/) 然后找到下载项就可以了

正常下载安装即可

当然跟常规的`IDE`一样，`DevEco Studio`，也可以进行一些设置

选择`settings`，即可配置

让你新建一个项目的时候，可能需要下载一些环境，这个时候根据提示下载就行大概是这些内容

然后新建项目

完事就是这个样子的，wow~熟悉的感觉又来了

新建页面

然后点击`preview`可以进行手机端预览

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b156a511dab847ad8fe6dc134c601e7a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=1149&s=229723&e=png&b=383c40) 我们还可以通过模拟器来更好地观看效果

点击`next`,然后需要进行下载最后

鸿蒙.gif

我写完才发现，官方已经给文档了.... [运行Hello World-华为开发者学堂 (huawei.com)](https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101667303102887820) 关于IDE不进行过多篇幅的介绍，其实IDE都大差不差，具体用到的东西，后面项目的会讲到的~ ## ArkTS基础

在官方文档中我们可得知，鸿蒙主要开发语言是`ArkTS`，并且我们知道了，`ArkTS`是基于`TS`的，并在TS基础上拓展了一些内容，那么对于掌握TS的朋友，入手会简单很多官网其实写的很不错，给了例子，也给了ArcTS的组成图

通过每个部分的大概定义，我们其实可以大概就知道怎么个写法了但是有的大家可能一下子不知道，大概给大家解释下 - build()方法：这里指`ArcTS`的`声明式UI`描述，其实就是描述UI的结构 - Column、Text、Divider、Button：其实大家可以猜出来，这是一些Ark的`内置`的`基础和容器组件` 而剩下的例如 - @开头的：显然是装饰器，当然具体的装饰器有什么作用，咱们用到什么说什么 - onClick：事件 - fontSize：官方叫属性方法，其实就是样式基础组件可以在这里进行查阅[AlphabetIndexer-通用属性-组件通用信息-组件参考（基于ArkTS的声明式开发范式）-ArkTS API参考 | 华为开发者联盟 (huawei.com)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-container-alphabet-indexer-0000001427744828-V2) > 关于装饰器：其实就是被这个装饰器装饰起来的内容将会有个特定的作用

比如这里被`@Entry`和`@Component`装饰起来的`Hello`这个自定义组件就具备了`成为入口`和`成为组件`的功能而被`@state`装饰起来的`数据`发生改变，则会`重新渲染build函数`，也就是UI描述，这个很重要！这里大家可能还会有一个问题，`像素单位` 在Arc当中，基准数据单位是`vp`：屏幕密度相关像素单位，根据屏幕像素密度转换为屏幕物理像素。`1vp≈3px` 具体的可以看这篇文章：[OpenHarmony像素单位入门-腾讯云开发者社区-腾讯云 (tencent.com)](https://cloud.tencent.com/developer/article/2186378) 同时这段代码中的`Column`则是容器组件（根组件）一个页面必须要有一个根组件，在它之上的是Page`根节点` 这是Arc中的常用布局，同时Arc提供了很多常见的布局

### 声明式UI 声明式UI在文档中单列出来了，这里咱们也单独写出来它有两大特征 - 声明式描述：只去描述UI应该呈现的效果，不关心内部实现 - 状态驱动视图更新：不直接操作ui，通过状态数据`间接`改变其build()函数里的即是我们声明的UI，也就是我们创建的组件创建组件会分为：`有参数`和`无参数` 有参数是指`Text('shaka')`,也就是组件的函数里面有参数 > 有些组件是必须要写参数的，有些是可写可不写，有的是不能写我们怎么看呢，其实我们通过名字就大概可以知道了，而且如果不能写参数的组件你写参数了会报错提示，但是如果你真的想看的话，你可以ctrl+鼠标左键点进去，然后再点进去

就可以看到了然后是`配置属性`，很简单，就是配置样式以及一些个别的属性 > Image('test.jpg').alt('error.jpg').width(100).height(100) > 同时传递常量参数外，还可以传递变量或表达式 > .width(this.count % 2 === 0 ? 100 : 200) `配置事件`和配置属性差不多的形式，很简单 ```js Button('Click') .onClick(() => { 你想写的方法 }) ``` 这部分内容较为简单 ### 自定义组件除了官方给的现成的组件，我们当然可以自定义组件，其实就是`组件化思想`，如果你觉得抽象，那可以拿`Vue`或者`React`思考，这种组件化思想一直贯穿我们的前端开发中这个时候我们可以拿官网的例子看

wow！好熟悉的列表，也是最经典的组件化的例子，在你学vue、react组件化的时候，可能都有这个例子，当然，我们这里不放代码，我们只是说这种思想我们发现，这个列表的每一项是不是都是一样的（除了文字），那么也就是说除了文字需要我们区别，别的是不是都可以复用，复用了的话，代码量是不是就会少很多

图画的不均匀哈，大家不要介意，但是我相信大家是懂我的意思的那么我们如何在ArcTS中写自定义组件呢其实我觉得无非要注意三点 1. 要有`@conponent`装饰器以及关键字`struct` 2. 注意不要用`@entry`装饰器也就会得出这样的代码 ```js @Component struct MyComponent { build() { } } @Entry @Component struct ParentComponent { private someColor: Color = Color.Pink; build() { Column() { // 创建MyComponent实例 MyComponent() } } } ``` 其中更具体的以及注意事项，可以看文档[创建自定义组件-基本语法-学习ArkTS语言-入门 | 华为开发者联盟 (huawei.com)](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-create-custom-components-0000001473537046-V2) ### 组件生命周期我们可以分为两种组件生命周期 1. 入口组件（@Entry装饰的） 2. 自定义组件入口组件 - [onPageShow](https://developer.huawei.com/consumer/cn/doc/development/harmonyos-references-V2/arkts-custom-component-lifecycle-0000001482395076-V2#ZH-CN_TOPIC_0000001523488850__onpageshow)：页面每次显示时触发。 - [onPageHide](https://developer.huawei.com/consumer/cn/doc/development/harmonyos-references-V2/arkts-custom-component-lifecycle-0000001482395076-V2#ZH-CN_TOPIC_0000001523488850__onpagehide)：页面每次隐藏时触发一次。 - [onBackPress](https://developer.huawei.com/consumer/cn/doc/development/harmonyos-references-V2/arkts-custom-component-lifecycle-0000001482395076-V2#ZH-CN_TOPIC_0000001523488850__onbackpress)：当用户点击返回按钮时触发。自定义组件生命周期，即一般用@Component装饰的自定义组件的生命周期，提供以下生命周期接口： - [aboutToAppear](https://developer.huawei.com/consumer/cn/doc/development/harmonyos-references-V2/arkts-custom-component-lifecycle-0000001482395076-V2#ZH-CN_TOPIC_0000001523488850__abouttoappear)：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。 - [aboutToDisappear](https://developer.huawei.com/consumer/cn/doc/development/harmonyos-references-V2/arkts-custom-component-lifecycle-0000001482395076-V2#ZH-CN_TOPIC_0000001523488850__abouttodisappear)：在自定义组件即将析构销毁时执行。

### @Builder装饰器除了上面创建自定义组件的方式，我们还可以通过`@Builder装饰器`来进行组件的创建这种方式更为轻量，所以适合较为简单的组件 ```js //创建 @Builder MyBuilderFunction({ ... }) //使用 this.MyBuilderFunction({ ... }) // this指向的是当前的组件 ``` 并且是可以传递参数的但是现在这个自定义组件是有局限的，只能在当前的组件进行使用，那么我现在想把它变成全局的怎么做很简单，我们只需要把这个自定义组件单独拿出来，并加上一个`function`关键字即可 ```js //创建 @Builder functon MyBuilderFunction({ ... }) //使用 ....组件內 MyBuilderFunction({ ... }) // 不需要用this了 ..... ``` ### 样式装饰器 `样式装饰器`是我便于记忆起的名字，但是也的确是这回事，样式装饰器有两个 - @Styles装饰器 - @Extend装饰器首先是`@Styles装饰器`，其实就是样式函数，类似于起类名，需要注意的是@Styles装饰器只支持`通用属性和事件`，并且`@Styles装饰器`是`不可以加参数`的关于通用属性有哪些，可以自行查阅[尺寸设置-通用属性-组件通用信息-组件参考（基于ArkTS的声明式开发范式）-ArkTS API参考 | 华为开发者联盟 (huawei.com)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-universal-attributes-size-0000001428061700-V2)

在这个例子中我在组件內写了`sty()`样式函数，并且在button上运用了`sty()函数`，则样式生效，需要注意，并不是我的sty函数指定了button，而是button调用了sty() 同`时@Styles`可以写在`全局`，跟`@Builder装饰`器类似，只需要加一个`function关键字`即可，需要注意的是全局和组件內的@Styles装饰器同名时，组件内的@Styles装饰器`优先级`高于全局的@Styles装饰器

`@Extend装饰器`是需要`指定组件的`,并且`只能在全局定义`，同时@Extend装饰器是`可以传参`的，也就说说它更加灵活写法上就差不多了，具体咱们项目中用到的话再说 ### 多态样式 stateStyles也就是多态样式，听名字过于变态，我们简单点说 > 就是一个函数、实现的功能类似于css伪类目前官方提供了四种 - focused：获焦态：就是类似于输入框获取焦点 - normal：正常态：正常呗 - pressed：按压态：字面意思，相当于点击 - disabled：不可用态。：字面意思 ## 结尾设计框架的基础难免会写长篇，只能一篇一篇写了，预计算上项目3、4篇能完事，然后咱们再把一篇官方的例子代码复原一遍，我觉得还是不错的因为资料不多，肯定是偏官方文档一些的，然后尽量加上自己的简单理解，再选择重点的说，非重点的做项目说，最后完成一个官方的项目，我觉得做项目才是最重点也是最有意思的，顺便看看能不能讲一些有意思的，篇幅不多，尽量更完~ 另外说一下，我感觉现在鸿蒙开发还是有一些bug的，不知道大家发没发现，欢迎大家留言~