HarmonyOS - 鸿蒙开发环境的搭建和开发教程2（使用JS编写一个APP）

2021-08-20 发布：hangge 阅读：1179

在上篇文章中我介绍如何使用 Java 开发鸿蒙系统的应用（点击查看），本文接着介绍使用 JS 开发鸿蒙应用。对于许多前端开发人员来说，HTML + CSS + JS这套技术应该都十分熟悉，如果使用 JS 进行开发会大大降低学习成本，只需了解鸿蒙相应的一些 API 即可。

二、使用 JS 编写一个 APP

1，环境搭建

首先华为的鸿蒙官网下载安装专门的开发工具 DevEco Studio（点击访问）。DevEco Studio 跟 Android studio 布局，操作方式，快捷键都差异性不大，有 Windows 版本和 macOS 版本，大家根据情况选择。

2，创建一个鸿蒙项目

（1）启动 DevEco Studio，点击菜单的 File -> New -> New Project...，创建一个 JS 语言的空项目。

（2）创建后整个应用的目录结构如下，可以发现 js、hml、css 这些文件都是前端开发人员所熟悉的。

（3）工程目录下：src\main\js\default\pages\index\index.hml 便是项目的主显示界面，这个我们先不动它。

<div class="container">
    <text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>
</div>

（4）工程目录下：src\main\js\default\pages\index\index.js 则是主界面对应的 js。

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    }
}

（5）工程目录下：src\main\js\default\pages\index\index.css 则是主界面对应的 css。

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title {
    font-size: 40px;
    color: #000000;
    opacity: 0.9;
}

（6）为便于以后做国际化，中文系统下屏幕上显示的文字是定义在 src\main\js\default\i18n\zh-CN.json 文件中。这里我们稍微做个修改。

{
  "strings": {
    "hello": "欢迎访问",
    "world": "hangge.com"
  }
}

3，使用云设备进行运行测试

（1）鸿蒙目前还没有提供本地的模拟器供我们使用，如果没有真机调试的话，我们也可以使用华为提供云设备进行应用调试。点击菜单的 Tools -> Device Mananger。

（2）初次打开时会要求我们登录，我们使用华为开发者账号登录之后就可以看到所有云端的虚拟设备了，点击右侧的三角按钮即可启动该设备。

（3）接着我们启动项目：

（4）程序便会自动部署到云端的设备上运行。