鸿蒙学习笔记 01 入门

关于本笔记

本系列, 或者说我的学习记录中, 不会记录太多概念类的东西(除非这个东西非常重要), 大部分还是代码或者分析, 如果你需要查询相关原理, 或者是概念, 请自行移步鸿蒙OS官网.

起步

其实吧, 如果你已经有了: JS + TS + Flutter + Vue + Android + React 的基础, 以及一些对链式编程的理解, 那么学鸿蒙会非常的快, 因为这种组件化的编程是十分符合人类直觉的. 比如我贴出来一段自己的代码:

注意, 由于本文章仅作为个人知识储备, 所以不会讲的那么详细. 但是是从第二人称来讲述的, 所以请确保你有一定的知识储备.

即便你没学过鸿蒙, 但是一看到@Component, 瞬间就可以联想到Vue3的组件, 再一看@State, 大概就可以猜出来是一个状态, 后面跟着变量: 类型 = 值, 更说明这个语言是一个强类型语言.

再看到有一个结构体, 大概能猜出这个结构体就是组件本身了, build自然就是组件的构造方法了, 里面直接可以编写组件了√

一看, 看不懂Relative...是个什么, 但是往后看, 看到了Text组件, 文本组件, 后面通过链式编程用.运算, 设置了这个组件的相关属性, 以及一个onClick点击事件, 传入一个回调函数. 让本就学过前端的人更加亲切

同时结合右边的浏览器(预览器?), 更加直观的能够理解其中的原理, 所以非常简单(bushi)

那么入门就入到这里, 因为真的太简单了.

代码分析

差点就直接结束了, 不过代码还是要看的. 代码分析我直接用注释的形式写在代码边上, 方便阅读. 不然一个一个注释感觉没必要

// 装饰器 可以用来装饰各种东西
// 第二个代表是一个组件, 第一个Entry就是入口的意思
@Entry
@Component
struct Index {
  // State是用来标记一个变量是状态的变量, 一旦变量发生变化, 就会重新渲染里面的组件
  @State message: string = "Click ME";

  // build就是用来描述组件中的内部结构的
  // 所以直接描述一下页面的样子, 就可以自动进行渲染了
  build() {
  	// 相对布局, 这里不多介绍
    RelativeContainer() {
      // 直接使用组件就好, 不需要new, 也不需要其它复杂的操作
      Text(this.message)
        .id('HelloWorld') // 设置组件ID
        .fontSize(50) // 设置字体大小
        .fontWeight(FontWeight.Bold) // 设置字体粗细
        .fontColor("#36D") // 设置字体颜色, 这个是蓝色
        .alignRules({
          // 设置对齐规则, 这个是自带的, 后面会介绍更易读的
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        // 可以有事件方法
        .onClick(() => {
          // 可以修改一下数据, 让显示的文字发生变化
          this.message = "Great!";
        })
    }
    .height('100%')
    .width('100%')
  }
}