开启HarmonyOS之旅（一）

前言

这里是鸿蒙开发的指南，这几天鸿蒙开发引起了大家的注意，于是结合官网和例子准备给大家一份使用手册

需要说明的是，一不做公众号，二不出课程，三不打广告，单纯前端爱好者，所以不要说搞营销啥的。。

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

咱们开始吧~

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：官方叫属性方法，其实就是样式

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

比如这里被@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)

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

js 复制代码

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

这部分内容较为简单

自定义组件

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

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

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

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

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

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

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

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

也就会得出这样的代码

js 复制代码

@Component
struct MyComponent {
  build() {
  }
}

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

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

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

组件生命周期

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

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

入口组件

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

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

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

结尾

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

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

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