拥抱华为，困难重重，第一天开始学习 ArkUI，踩坑踩了一天

MacOS M1
HarmonyOS API 9
华为 P40 pro+，已安装 HarmonyOS 4

Column() {
Text('一行文字')
.textAlign(TextAlign.Center)
.fontSize(30)
.width('100%')
.backgroundColor('#aabbcc')
Text('二行文字')
.textAlign(TextAlign.Center)
.fontSize(30)
.width('100%')
.backgroundColor('#aabbcc')

}.width('100%')
.height('100%')
.backgroundColor('red')

<div>
<p>一行文字p>
<p>一行文字p>
div>

Row: 横向布局
Column: 竖向布局
Row() {
Column() { Lottie() Text() }
Column() { Lottie() Text() }
Column() { Lottie() Text() }
Column() { Lottie() Text() }

}

import lottie from '@ohos/lottie';

> init

> pwd

然后执行如下指令

// OHPM_HOME 指的是你自己的安装路径
> export OHPM_HOME=/home/xx/Downloads/ohpm
> export PATH=${OHPM_HOME}/bin:${PATH}

4. 
   
5. 执行如下指令检查是否安装成功
   

> ohpm -v

@ohos/lottie

使用如下指令下载 lottie

ohpm install @ohos/lottie

然后在 page 中引入

import lottie from '@ohos/lottie'

在类中通过定义私有变量的方式构建上下文

private mrs: RenderingContextSettings = new RenderingContextSettings(true)
private ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mrs)

并且用私有变量保存 lottie 数据路径或者内容

private path: string = 'common/lottie/home.json'

然后在 build 中，结合 Canvas 组件绘制

Canvas(this.ctx).onReady(() => {

  lottie.loadAnimation({
container: this.ctx,
renderer: 'canvas',
loop: false,
autoplay: true,
path: this.path

  })

})

参考文章：@ohos/lottie

04

hot reload

使用 commond + , 调出配置页面，然后通过如下路径找到配置选中 Perform hot reload

Tools -> Actions on Save -> Perform hot reload

然后在项目运行的入口处，选择 entry -> edit configrations，弹出如下界面，选中 Hot Reload 的 entry，做好与下图中一致的勾选，点击 apply 按钮之后启动项目即可实现 hot reload

不过呢，hot reload 在调试样式的时候还能勉强用一用，涉及到代码逻辑的更改，往往没什么用，属实是食之无味，弃之可惜

除此之外，也许 Previewer 更适合开发时使用

05

沉浸式状态栏

沉浸式状态栏是一款体验良好的 app 必备能力。因此我学会了基础知识之后，第一时间就想要研究一下再 HarmonyOS 中如何达到这个目的。

沉浸式状态栏指的就是下图中位置能够做到与页面标题栏，或者页面背景一致的样式。或者简单来说，可以由我们开发者来控制这一块样式。布局进入全屏模式。

在我们创建入口 Ability 时，可以在生命周期 onWindowStageCreate 中设置全屏模式

onWindowStageCreate(windowStage: window.WindowStage) {
windowStage.getMainWindow(err, mainWindow: window.Window) {
if (err.code) {
return 

    }
mainWindow.setWindowLayoutFullScreen(true)

  }

}

setWindowLayoutFullScreen 是一个异步函数，因此如果你想要修改状态栏样式的话，可以在它的回调里，通过 setWindowSystemBarProperties 去设置

mainWindow.setWindowLayoutFullScreen(true, (err) => {
if (err) { return }

  mainWindow.setWindowSystemBarProperties({ statusBarColor: '#FFF' })

})

具体的参数配置，可以在代码中，查看类型声明获悉。

这里有一个巨大的坑，就是在我的开发环境启动的模拟器中 API 9，当你设置了全屏模式之后，布局会发生混乱。真机调试又是正常的。

我刚开始以为是我的代码哪里没搞对，为了解决这个问题花了一个多小时的时间，结果最后才确定是模拟器的布局 bug...

真机调试

真机调试的设置方式主要跟其他 app 开发都一样，把手机设置为开发者模式即可。不过你需要通过如下方式，配置好一个应用签名才可以。因此你首先需要注册成为华为开发者

File -> Project Structure -> Signing Configs -> Sign in

跟着指引在后台创建项目，然后再回到开发者工具这个页面自动生成签名即可

真机调试有一个巨大无比的坑，那就是 API 9 创建的项目，在老版本的麒麟芯片上巨卡无比。连基本的点击都无法响应。

这就要了命了。如果连真机调试都做不到，那还拥抱个啥啊？

研究了很久，找到了几个解决这个问题的方法

1、换新机，只要你的手机不是华为被制裁之前的麒麟芯片，都不会存在这个问题

2、创建项目时，选择 API 8

3、在开发者选项的配置中，选择 显示面(surface)更新，虽然不卡了，不过闪瞎了我的狗眼

4、等明年 HarmonyOS next 出来之后再来学，官方说，API 10 将会解决这个问题

上面的解决办法或多或少都有一些坑点。我选择了一种方式可以很好的解决这个问题

那就是：投屏

如果你有一台华为电脑，这个投屏会非常简单。不过由于我是 mac M1，因此我选择的投屏方案是 scrcpy

使用 brew 安装

> brew install scrcpy

然后继续安装

> brew install android-platform-tools

启动

> scrcpy

启动之前确保只有一台手机已经通过 USB 连接到电脑，并允许电脑调试手机就可以成功投屏。在投屏中操作手机，就变得非常流畅了

不过目前我通过这种方式投屏之后，运行起来的项目经常闪退，具体是什么原因我还没找到，只能先忍了

总之就是坑是一个接一个 ~ ~

06

总结

一整天的学习，整体感受下就如标题说的那样：拥抱华为，困难重重。 还好我电脑性能强悍，要是内存少一点，又是虚拟机，又是投屏的，搞不好内存都不够用，可以预想，其他开发者还会遇到比我更多的坑 ~ ~

个人感觉华为相关的官方文档写得不是很友好，比较混乱，找资料很困难。反而在官方上把一堆莫名其妙的教学视频放在了最重要的位置，我不是很明白，到底是官方文档，还是视频教程网站 ~ ~

官方文档里还涉及了 FA mode 到 Stage mode 的更新，因此通过搜索引擎经常找到 FA mode 的相关内容，可是 FA mode 又是被弃用的，因为这个问题也给我的学习带来了不少的麻烦。由于遇到的坑太多了，以致于我到现在尝试点什么新东西都紧张兮兮的，生怕又是坑

总的来说，自学困难重重，扛得住坑的，才能成为最后的赢家，红利不是那么好吃的