HarmonyOS 开发探索：以VUE方式打开鸿蒙开发

最新推荐文章于 2024-07-20 22:05:50 发布

代码中的爱马仕

最新推荐文章于 2024-07-20 22:05:50 发布

阅读量774

点赞数 20

分类专栏： OpenHarmony 鸿蒙 HarmonyOS 文章标签： harmonyos 华为前端鸿蒙鸿蒙开发 vue.js 程序员

本文链接：https://blog.csdn.net/DMZDAMS/article/details/140100760

版权

鸿蒙同时被 3 个专栏收录

139 篇文章 1 订阅

订阅专栏

OpenHarmony

137 篇文章 0 订阅

订阅专栏

HarmonyOS

133 篇文章 0 订阅

订阅专栏

在这篇文章中，将带你一起探索从 Vue.js 到 HarmonyOS 的转换过程。无论你是前端开发的新手，还是经验丰富的老手，我相信这段旅程都将为你提供新的视角和灵感。让我们一起踏上这段充满挑战和乐趣的技术探险之旅吧！

从.vue文件到.ets文件的转换

在本文中，我们将探讨如何将 Vue.js 文件转换为 HarmonyOS 的 ArkTS 文件。Vue 文件通过 HTML、JS、CSS 三个部分进行分离，而 ArkTS 文件则将组件和样式合并在一起。以下是一个简单的文本组件在屏幕上水平垂直居中的示例代码。

.vue文件写法

<script setup lang='ts'>
const text = ref('Hello Vue')
</script>
<template>
  <div class="hello_class">
    {{ text }}
  </div>
</template>

<style>
.hello_class {
  width: 100%;
  height: 100vh;
  line-height: 100vh;
  font-size: 50px;
  color: red;
  text-align: center;
}
</style>

效果

.ets文件写法

// 修饰器：表示作为页面，一般和@Component一起写
@Entry
// 修饰器：表示作为组件，可单独写
@Component
build() {
  Text('Hello HmOs')
    .width('100%')
    .height('100%')
    .lineHeight('100%')
    .fontSize('50vp')
    // 这两处的值用到的是atkTs的枚举值
    .fontColor(Color.Red)
    .textAlign(TextAlign.Center)
}

效果

进一步优化ets文件

我们看到 Vue 文件中样式分离的写法非常优雅，那么在 .ets 文件中是否也能实现样式分离呢？答案是肯定的。

ets分离样式并定义变量

通过使用 @Extend 装饰器并且指定一个组件，将样式抽离出来。ArkTS 提供了一种高效的样式管理方式。这种方式不仅提升了代码的可维护性和复用性，还使得开发过程更加简洁高效。在实际开发中，充分利用这一特性，可以大幅提高我们的开发效率和代码质量。

@Entry
@Component
struct test1 {
  // 使用State注解定义变量 使text具有“双向绑定”
  @State text:string = "Hello HmOs"
  build() {
    Text(this.text)
      .MyTextStyle()  // 使用抽离出的样式，在组件后面链式调用即刻

  }
}
// 指定Text抽离出样式，像前端中的class一样也可以抽离公共样式。
@Extend(Text)
function MyTextStyle() {
  .width('100%')
  .height('100%')
  .lineHeight('100%')
  .fontSize('50vp')
  .fontColor(Color.Red)
  .textAlign(TextAlign.Center)
}

事件绑定

接下来我们展示vue和ets对于事件绑定的区别（省略样式代码了哈）

vue文件中的事件绑定

<script setup lang='ts'>
const text = ref('Hello Vue')
const clickFn = () => {
  setTimeout(() => {
    text.value = '你好 Vue'
  },300)
}
</script>
<template>
  // vue中使用 @click绑定事件，点击后触发绑定的函数
  <div class="hello_class" @click="clickFn">
    {{ text }}
  </div>
</template>

效果

ArkTs文件中的事件绑定

@Entry
@Component
struct test1 {
  @State text:string = "Hello HmOs"
  // 直接定义函数
  clickFn = () => {
    setTimeout(() => {
      this.text = "你好 鸿蒙"
    },300)
  }
  build() {
    Text(this.text)
      .MyTextStyle()
      .onClick(this.clickFn) // 使用链式调用 onClick绑定点击事件

  }
}

效果

总结

从以上对比可以看出，ArkTS 的写法和 Vue 略有不同，但思想上类似。通过分离公共方法、公共样式，实现组件化编程，可以更加优雅地组织代码。

希望本文能帮助你理解如何从 Vue 文件角度写 ArkTS 文件。如果你有任何问题或建议，欢迎在评论区留言。

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

点击领取→【纯血版鸿蒙全套最新学习资料】（安全链接，放心点击）希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

鸿蒙（HarmonyOS NEXT）最新学习路线