初探鸿蒙HarmonyOS开发第一章

雾恋
546 阅读3分钟

序章

最近在网上看到很多关于鸿蒙HarmonyOS的消息看到了不一样的华为，让我满是惊喜；觉得我也有必要学习一下鸿蒙开发，然后最近看了一下视频和文档发现入门是真的不难，至少对于前端来说入门不难；ArkTS跟typeScript很像很像；就ArkUI有一点差别，但是里面写样式的语法跟CSS差不多，至少对于前端来说很快就能理解了。

为什么我想去学习鸿蒙，主要有两点原因：

  • 作为国内唯一一个系统有必要支持一下；可能我能做的贡献有限，但是我们支持一下还是可以做到的，当一颗螺丝钉。
  • 自己没有开发过App相关的应用，想自己尝试一下。

提醒： 后续我会出一到两个的实战项目，并且去发布上线；初步定位软件类型为日常评语（主要是通过AI生成），然后在开发一个处理图片的软件（主要指针对制作头像功能-比如：国庆那种头像和圣诞节那种头像）；如果有兴趣的朋友我们可以一起学习交流鸿蒙开发。查看原文

基本数据类型

number

这儿有一个小问题，如果你是5.0以上的版本（因为我是这个版本），这儿如果直接使用num的话会提示错误【Argument of type 'number' is not assignable to parameter of type 'string | Resource'】，你只需要将其转一下即可。别问我为什么知道

@Entry
@Component
struct Index {
  @State num: number = 123;

  build() {
    RelativeContainer() {
      Column() {
        Text(JSON.stringify(this.num))
      }
    }
    .height('100%')
    .width('100%')
  }
}

string

大家在使用了number类型以后再来看string类型就会发现可以直接渲染使用，并且更新以后页面上就有律师张三 了。

@Entry
@Component
struct Index {
  @State userName: string = '律师张三';

  build() {
    RelativeContainer() {
      Column() {
        Text(this.userName)
      }
    }
    .height('100%')
    .width('100%')
  }
}

数组

以下是字符串类型的数组，然后通过ForEach循环进行渲染页面；这儿的ForEach其实跟我们在vue中循环列表是一个道理。

@Entry
@Component
struct Index {
  @State list: string[] = ['律师张三','李四'];

  build() {
    RelativeContainer() {
      Column() {
        ForEach(this.list, (item:string)=>{
          Text(item)
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}

函数（onclick）

函数点击事件为onclick；在需要的标签上绑定点击事件，当用户触发点击事件时就会触发该函数。

@Entry
@Component
struct Index {
  @State list: string[] = ['律师张三','李四'];

  build() {
    RelativeContainer() {
      Column() {
        ForEach(this.list, (item:string)=>{
          Text(item)
            .onClick(()=> {
              console.log('console', this.list);
            })
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}

组件（按照前端来说应该是HTML）

下面我们只会将一下最常见的标签，后期如果有用到其他的标签，将会在其他文章中写出来。

Column

Column内的代码将会纵向展示，也就是第一排是第一个，第二排是第一个。

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
      Column() {
        Column() {
          Text('第一个')
          Text('第二个')
        }
      }
    }
    .height('100%')
    .width('100%')
  }
}

Row

这个标签我们可以将它形容成span标签，以下代码中的第一个和第二个会横向进行展示；在一排进行展示

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
      Column() {
        Row() {
          Text('第一个')
          Text('第二个')
        }
      }
    }
    .height('100%')
    .width('100%')
  }
}

Text

Text是文本组件，通常用于展示用户视图。

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
      Column() {
        Text('我是Text')
      }
    }
    .height('100%')
    .width('100%')
  }
}

其实组件还有很多很多，我目前举例的这几个只是我目前用的相对比较多的吧！比如：按钮、单选框、图片等 大家可以根据需要去看看文档；这儿就不做太多的示例

总结

我觉得鸿蒙对于前端开发者还是比较友好的，如果前端的同学有兴趣的情况下可以去学习哈，我后期的话会根据一些学习的进度然后输入一些文章，预计是后面说说布局、路由跳转、父子组件传值、发送请求等。

avatar
文章
阅读
粉丝