开启HarmonyOS之旅（一：准备工作以及ArkTS基础语法）

前言

这里是鸿蒙开发的指南，这几天鸿蒙开发引起了大家的注意，咱们不去讨论那些有的没的东西，只进行内容学习，于是我结合官网和例子准备给大家一份使用手册

这里不讨论鸿蒙开发的好坏，如果你想了解或者是学习，那么我希望这篇文章会对你有帮助~

咱们开始吧~

DevEco Studio下载

可以先进入到官网

华为HarmonyOS智能终端操作系统官网 | 应用设备分布式开发者生态

然后找到下载项就可以了

正常下载安装即可

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

选择settings，即可配置

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

大概是这些内容

然后新建项目

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

新建页面

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

我们还可以通过模拟器来更好地观看效果

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

最后

我写完才发现，官方已经给文档了.... <HarmonyOS第一课>运行Hello World-华为开发者学堂 (huawei.com)

关于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)

关于装饰器：其实就是被这个装饰器装饰起来的内容将会有个特定的作用

比如这里被@Entry和@Component装饰起来的Hello这个自定义组件就具备了成为入口和成为组件的功能

而被@state装饰起来的数据发生改变，则会重新渲染build函数，也就是UI描述，这个很重要！

这里大家可能还会有一个问题，像素单位

在Arc当中，基准数据单位是vp：屏幕密度相关像素单位，根据屏幕像素密度转换为屏幕物理像素。1vp≈3px

具体的可以看这篇文章：​OpenHarmony像素单位入门-腾讯云开发者社区-腾讯云 (tencent.com)

同时这段代码中的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)

配置事件和配置属性差不多的形式，很简单

Button('Click')
  .onClick(() => {
    你想写的方法
  })

这部分内容较为简单

自定义组件

除了官方给的现成的组件，我们当然可以自定义组件，其实就是组件化思想，如果你觉得抽象，那可以拿Vue或者React思考，这种组件化思想一直贯穿我们的前端开发中

这个时候我们可以拿官网的例子看

wow！好熟悉的列表，也是最经典的组件化的例子，在你学vue、react组件化的时候，可能都有这个例子，当然，我们这里不放代码，我们只是说这种思想

我们发现，这个列表的每一项是不是都是一样的（除了文字），那么也就是说除了文字需要我们区别，别的是不是都可以复用，复用了的话，代码量是不是就会少很多

图画的不均匀哈，大家不要介意，但是我相信大家是懂我的意思的

那么我们如何在ArcTS中写自定义组件呢

其实我觉得无非要注意三点

1. 要有@conponent装饰器以及关键字struct
2. 注意不要用@entry装饰器

也就会得出这样的代码

@Component
struct MyComponent {
  build() {
  }
}

@Entry
@Component
struct ParentComponent {
  private someColor: Color = Color.Pink;

  build() {
    Column() {
      // 创建MyComponent实例
      MyComponent()
    }
  }
}

其中更具体的以及注意事项，可以看文档创建自定义组件-基本语法-学习ArkTS语言-入门 | 华为开发者联盟 (huawei.com)

组件生命周期

我们可以分为两种组件生命周期

1. 入口组件（@Entry装饰的）
2. 自定义组件

入口组件

• onPageShow：页面每次显示时触发。
• onPageHide：页面每次隐藏时触发一次。
• onBackPress：当用户点击返回按钮时触发。

自定义组件生命周期，即一般用@Component装饰的自定义组件的生命周期，提供以下生命周期接口：

• aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
• aboutToDisappear：在自定义组件即将析构销毁时执行。

@Builder装饰器

除了上面创建自定义组件的方式，我们还可以通过@Builder装饰器来进行组件的创建

这种方式更为轻量，所以适合较为简单的组件

//创建
 @Builder MyBuilderFunction({ ... })
 //使用
 this.MyBuilderFunction({ ... }) // this指向的是当前的组件

并且是可以传递参数的

但是现在这个自定义组件是有局限的，只能在当前的组件进行使用，那么我现在想把它变成全局的怎么做

很简单，我们只需要把这个自定义组件单独拿出来，并加上一个function关键字即可

//创建
 @Builder functon MyBuilderFunction({ ... })
 //使用
 ....组件內
 MyBuilderFunction({ ... }) // 不需要用this了
 .....

样式装饰器

样式装饰器是我便于记忆起的名字，但是也的确是这回事，样式装饰器有两个

• @Styles装饰器
• @Extend装饰器

首先是@Styles装饰器，其实就是样式函数，类似于起类名，需要注意的是@Styles装饰器只支持通用属性和事件，并且@Styles装饰器是不可以加参数的

关于通用属性有哪些，可以自行查阅尺寸设置-通用属性-组件通用信息-组件参考（基于ArkTS的声明式开发范式）-ArkTS API参考 | 华为开发者联盟 (huawei.com)

在这个例子中我在组件內写了sty()样式函数，并且在button上运用了sty()函数，则样式生效，需要注意，并不是我的sty函数指定了button，而是button调用了sty()

同时@Styles可以写在全局，跟@Builder装饰器类似，只需要加一个function关键字即可，需要注意的是全局和组件內的@Styles装饰器同名时，组件内的@Styles装饰器优先级高于全局的@Styles装饰器

@Extend装饰器是需要指定组件的,并且只能在全局定义，同时@Extend装饰器是可以传参的，也就说说它更加灵活

写法上就差不多了，具体咱们项目中用到的话再说

多态样式

stateStyles也就是多态样式，听名字过于变态，我们简单点说

就是一个函数、实现的功能类似于css伪类

目前官方提供了四种

• focused：获焦态：就是类似于输入框获取焦点
• normal：正常态：正常呗
• pressed：按压态：字面意思，相当于点击
• disabled：不可用态。：字面意思

结尾

设计框架的基础难免会写长篇，只能一篇一篇写了，预计算上项目3、4篇能完事，然后咱们再把一篇官方的例子代码复原一遍，我觉得还是不错的

因为资料不多，肯定是偏官方文档一些的，然后尽量加上自己的简单理解，再选择重点的说，非重点的做项目说，最后完成一个官方的项目，我觉得做项目才是最重点也是最有意思的，顺便看看能不能讲一些有意思的，篇幅不多，尽量更完~

另外说一下，我感觉现在鸿蒙开发还是有一些bug的，不知道大家发没发现，欢迎大家留言~