鸿蒙HarmonyOS学习笔记一

浅谈

首先还是得谈谈鸿蒙的HarmonyOS，自鸿蒙出了HarmonyOS之后，其它厂商品牌也都纷纷开始各自的系统研究，带来的问题也很明显，就是适配了。有好有坏吧，相应的岗位自然是增加了，Android开发者也多了一个出路，但也相应的会有弊端：小公司来说，基本招多一个鸿蒙开发来说，是相对不可能的，让Android开发者去适配跨平台又或者学习ArkTS进行开发，这种的概率自然是高点。所以，学习下ArkTS也没什么坏处，当作一个傍身技能，面试也许会成为加分项呢。

  不过目前HarmonyOS还是起步阶段，各个api还是在更新迭代，所以现在学了，后续可能部分功能就要重新对接新的api，加上现在网上相应的资料也少，Android某些功能用HarmonyOS不知道怎么去实现，轮子也比较少，自然用起来还是不太方便的。

开学

开发工具：DevEco Studio

相对于AS来说，DS的安装算是很简单了吧，直接到华为开发者平台进行下载，然后安装的时候，跟着# <HarmonyOS第一课>运行Hello World介绍勾选相应的选项，进行下载相关配置即可。

项目结构

项目结果基本和AS差不多吧，多了个AppScope，用于存放公共资源文件，element下存放的对应res/values的文件，media则存储的图片资源，app.json5记录了app的信息：

{
  "app": {
    "bundleName": "com.example.testharmonyos",

    "vendor": "example",
    "versionCode": 1000000,
    "versionName": "1.0.0",
    "icon": "$media:app_icon",
    "label": "$string:app_name"
  }
}

entry就是主工程项目了，Ability对应Activity，pages存放了对应的界面，resources为资源文件，module.json5类似AndroidManifest，记录了Ability/Permissions等信息。

hvigor模块则类似gradle模块，属于编译器配置

语言ArkTS、界面ArkUI

ArkTS给我感觉，就有点像是java+kotlin，两者的融合。不过编程语言大体上相同，所以在学习语言上，会相对简单点。ArkTS是基于TypeScript的，学习的话，跟着TypeScript文档学习：基础类型 - TypeScript 中文手册 (bootcss.com)

  ArkUI则像是Jetpack Compose，基础的控件都一模一样，例如：Row、Column、Text、Image等，当然肯定也有不一样的控件了。

综合来看，会kotlin和jetpack compose的，学习ArkTS和ArkUI会相对简单很多

由ArkUI开始

这里只进行粗略的介绍有什么控件，大概什么效果及常用属性，具体有什么属性，查看官方文档方便点，就不累赘了。

  一开始，当然还是从最基础的控件开始了，先学学：Stack、Row、Column、Text、Image、Button、TextInput、TextArea

Stack、Column、Row

Stack属于叠加布局

  Column是纵向排列的布局

  Row是横向排列的布局



  Column和Row都有justifyContent和alignItems两个属性，都是控制控件的位置（左中右、上中下），其中justifyContent是相对于主轴，alignItems相对于垂直交叉轴：

  Column的主轴就是垂直方向的，可以控制上中下，垂直轴就是水平方向，可以控制左中右

  Row的主轴就是水平方向，垂直轴就是垂直方向

Text

文本控件，用于显示文本，常用属性：

Text('手机快捷登录')
  .fontColor($r('app.color.color_333333'))
  .fontSize($r('app.float.font_size_18'))
  .fontWeight(this.isLoginByCode ? FontWeight.Bold : FontWeight.Normal)
  .onClick(event => {
    this.isLoginByCode = true
  })

Image

图片控件，用于显示图片，可以是本地图片，也可以直接填网络链接加载网络图片

Image($r('app.media.icon_back'))
.height('100%')
.width(50)
.objectFit(ImageFit.None)
.onClick(_ => {
  if (parseInt(router.getLength()) == 1)
    backHome()
  else
    router.back()
})

Button

按钮控件，用于可以点击的控件（这个其实不太理解，目前使用习惯都是直接用Text一样可以进行点击，不懂为什么需要专门弄个Button出来，有大佬讲解吗，有啥特殊的，除了样式）

Button('登录')
.onClick(_ => {
  inputMethodController.hideSoftKeyboard(error => {
  })

  promptAction.showToast({
    message: `手机号：${this.inputPhone} \n${this.isLoginByCode ? "验证码" : "密码"} ：${this.inputCodeOrPwd}`, // 显示文本
    duration: 3000, // 显示时长
    bottom: px2vp(this.screenHeight / 2) // 距离底部的距离
  })
})
.padding({ left: 40, right: 40 })
.backgroundColor($r('app.color.color_57b37f'))
.margin({ top: 20 })

TextInput

单行文本输入控件，固定只有一行可以进行输入的控件

TextInput({ placeholder: this.isInputPhone ? "请输入手机号码" :
this.isLoginByCode ? "请输入验证码" : "请输入密码",
text: this.inputInfo })
.placeholderColor($r('app.color.color_d4d4d4'))
.fontColor($r('app.color.color_333333'))
.fontSize($r('app.float.font_size_14'))
.layoutWeight(1)
.backgroundColor($r('app.color.transparent'))
.margin({ left: 12, right: 12 })
.onChange(txt => {
  this.inputInfo = txt
})

TextArea

多行文本输入控件

TextArea({placeholder: "请输入"})
.placeholderColor($r('app.color.color_d4d4d4'))
.fontSize($r('app.float.font_size_14'))
.fontColor($r('app.color.color_333333'))
.margin({left: 20, right: 20})

学习资料

TypeScript文档学习：基础类型 - TypeScript 中文手册 (bootcss.com)
HarmonyOS官方学习文档：AlphabetIndexer (openharmony.cn)
HarmonyOS教学：HarmonyOS第一课|应用开发视频教程学习|HarmonyOS应用开发官网

微信搜索“A查佣利小助手”，获取支付宝红包、TB/JD/PDD返利最新优惠资讯