❤️前端boy该如何上手HarmonyOS？

theme: qklhk-chocolate

前言

近年来HarmonyOS的开发岗位好像越来越多了，作为一名前端boy我们应该要未雨绸缪，至少得学习一下怎么开发。下面会介绍前端技术栈和鸿蒙技术栈的区别，以及如何创建第一个项目。

技术差异

技术栈比对

技术维度	Web前端技术	HarmonyOS开发技术
基础语言	JavaScript/TypeScript	ArkTS(TS超集)
组件系统	Web Components/React组件	ArkUI声明式组件
布局方案	CSS Flex/Grid	ArkUI弹性布局
状态管理	Redux/Vuex/Pinia	@State/@Prop/@Link装饰器
路由导航	React Router/Vue Router	Router模块 + navigation
生态工具	Webpack/Vite	Hvigor构建系统
多端适配	媒体查询/响应式设计	分布式设计+自适应布局
动画系统	CSS Animation/GSAP	属性动画+显式动画
网络请求	Fetch/Axios	@ohos.net.http模块
包管理	npm/yarn	ohpm(HPM)

根据上面这个列表，在不考虑如何打包和如何创建应用的情况下，只要能够掌握对应模块的语法，就可以像我们开发前端项目一样去开发HarmonyOS应用。

其中这个arkts是我们需要重点掌握的东西，本质上就是一个js/ts的超集。对于前端开发来说非常的友好。

下面通过一些案例介绍相关语法差异

组件差异

vue3组件

vue 复制代码

<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <button @click="onClick">点击</button>
  </div>
</template>

<script setup>
defineProps(['title'])
const emit = defineEmits(['click'])

const onClick = () => {
  emit('click')
}
</script>

ArkUI组件

tsx 复制代码

@Component
export struct MyCard {
  @Prop title: string
  private onClick: () => void

  build() {
    Column() {
      Text(this.title)
        .fontSize(20)
      Button('点击')
        .onClick(() => this.onClick())
    }
    .padding(12)
  }
}

ArkUI组件的和我们的vue组件有很大差别，更趋向于类组件的方式。

使用@Component装饰器声明组件
通过build()方法取代<template>模板
使用链式调用设置样式

响应式变量差异

vue3定义响应式变量

vue 复制代码

<script setup>
import { ref, reactive } from 'vue'
// 基本类型
const count = ref(0)
// 对象类型
const user = reactive({
  name: '小明',
  age: 25
})
// 计算属性
const isAdult = computed(() => user.age >= 18)
</script>

arkui中定义响应式变量

tsx 复制代码

@Component
struct UserProfile {
  // 基本类型
  @State count: number = 0

  // 对象类型
  @State user: { 
    name: string, 
    age: number 
  } = { name: '小明', age: 25 }

  // 派生状态
  get isAdult(): boolean {
    return this.user.age >= 18
  }
}

使用装饰器@State替代ref/reactive
计算属性直接通过getter实现
不需要手动import响应式API

循环渲染和条件渲染

vue组件

vue 复制代码

//  条件 
<template>
  <div v-if="showContent">内容区域</div>
  <div v-else>加载中...</div>
</template> 
// 循环
<template>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

arkui 组件

tsx 复制代码

// 条件
build() {
  Column() {
    if (this.showContent) {
      Text('内容区域')
    } else {
      Progress()
        .width(50)
        .height(50)
    }
  }
}
// 循环
build() {
  List() {
    ForEach(this.list, (item: ListItem) => {
      ListItem() {
        Text(item.name)
          .fontSize(16)
      }
    }, (item) => item.id.toString())
  }
}

这块条件渲染和渲染应该比较好理解，语法基本上和react很像

写样式的方式

vue组件

vue 复制代码

<style scoped>
.card {
  padding: 12px;
  background: #fff;
}
.title {
  font-size: 18px;
}
</style>

arkUI组件

tsx 复制代码

![image-20250317222306631](./前端如何快速上手开发鸿蒙os.assets/image-20250317222306631.png)@Styles function cardStyle() {
  .padding(12)
  .backgroundColor(Color.White)
}

@Styles function titleStyle() {
  .fontSize(18)
}

// 使用样式
build() {
  Column()
    .useStyle(cardStyle)
  
  Text('标题')
    .useStyle(titleStyle)
}

这块差异很大，写法完全不一样arkui这边用的是链式调用定义样式，这要是样式太多，简直是噩梦

上面简单介绍了一些语法差异，后面还会出一期专门以前端的视角来对比的文章。

那么上面的这些内容重要吗

答案是，不那么重要

如果你要纯鸿蒙开发那就得去官网好好学习语法，但是我们还可以以前端的方式去开发HarmonyOS，

harmonyOS提供了一个ArkWeb方案，具体有点像webview,以后会详细介绍