手把手教你做一个华为鸿蒙系统Demo级项目（JS角度）

布满荆棘的人生 2021-09-03 08:37 422阅读 0赞

## 系统定位 ##

HarmonyOS是一款“面向未来”、面向全场景（移动办公、运动健康、社交通信、媒体娱乐等）的分布式操作系统。在传统的单设备系统能力的基础上，HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持多种终端设备。

*  对消费者而言，HarmonyOS能够将生活场景中的各类终端进行能力整合，可以实现不同的终端设备之间的快速连接、能力互助、资源共享，匹配合适的设备、提供流畅的全场景体验。
 *  对应用开发者而言，HarmonyOS采用了多种分布式技术，使得应用程序的开发实现与不同终端设备的形态差异无关。这能够让开发者聚焦上层业务逻辑，更加便捷、高效地开发应用。
 *  对设备开发者而言，HarmonyOS采用了组件化的设计方案，可以根据设备的资源能力和业务特征进行灵活裁剪，满足不同形态的终端设备对于操作系统的要求。  
    HarmonyOS代码开发支持多语言，包括Java、XML（Extensible Markup Language）、C/C++ 、 **JS（JavaScript）**、CSS（Cascading Style Sheets）和HML（HarmonyOS Markup Language）。

### 视频链接 ###

https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4

## 体验HarmonyOS ##

### HUAWEI DevEco Studio ###

面向华为终端全场景多设备的一站式分布式应用开发平台，支持分布式多端开发、分布式多端调测、多端模拟仿真和全方位的质量与安全保障。

#### 1. 下载链接 ####

https://developer.harmonyos.com/cn/develop/deveco-studio#download

点击下载链接之后，会进入华为账号注册页面。输入账号注册登录。

![6d94684a94681393642ee1a08c5c1441.png][]

登录之后，会跳到下载页面。选择符合自己的系统，下载解压安装包即可。

![39e741609c7a0269302fdbbb85f5c1b7.png][]

#### 2. 软件配置 ####

![d383283c052f4933fe5d8c7f97ee7910.png][]

打开软件之后，会显示以下窗口。这里直接点击`OK`即可。

![cb13547068c9bcb605de6f8aaca0945e.png][]

勾选并且点击`Agree`。

![8344d629563f12718809f132a565dd66.png][]

点击`Next`。

![83dcf51f9afe523890c6559978678380.png][]

选择`Accept`，并且点击`Next`。

![f324ab98867996a1b22174f61208fbc1.png][]

等待安装`SDK`。

![2872634dd483d782f05350e045871e72.png][]

安装完成后，点击`Finish`。

![24923bb8ab027eaf03f9d725ba411dd6.png][]

#### 3. 创建项目 ####

点击`Create HarmonyOS Project`。

![07994e57e92773cdf5fd4d2db6d7acaf.png][]

选择`TV`，默认会选择`Empty Freature Ability(JS)`。点击`Next`。

![81074129d65071863aade2b69ac015b7.png][]

设置项目参数，自定义项目名、依赖名、项目路径，默认选择`SDK:API Version 3`即可。设置完成后点击`Finish`。

![dbf102ce55727927b2346f1156669702.png][]

打开如下图所示文件目录。有时会出现这种错误。`java.io.IOException: Cannot run program “node”: error=2, No such file or directory`。你需要将nodejs可执行文件符号链接到node。在`Terminal`选项卡下输入命令：

sudo ln -s "$(which nodejs)" /usr/local/bin/node

![2a53ecce75f2652b4e45fcc7fe417c14.png][]

选择`Tools`选项卡下的`HVD Manager`就可以启动模拟器预览项目了。

![1f6e5359cde700f9ec2d15035d3f9010.png][]

点击之后，浏览器会跳到一个授权窗口。点击`允许`就好了。

![ec02699be4137a18dfeb79d1314ddd09.png][]

允许之后，会弹出以下窗口。点击**TV**项`Actions`下面的小三角符号，就可以运行了。

![16cdbd044ae8e549c4fb6668ce878cf2.png][]

你会在看到以下画面，说明你启动模拟器成功了。

![521caffa84f27de109c8b805d1a71acd.png][]

模拟器窗口嵌套在编辑器里面可能会觉得不太舒服，你可以点击预览窗口右上方的小齿轮。选择`View Mode`下的`Window`选项即可。

![41d2efe9dd22515e1fe57609360751c5.png][]

下面就单独一个窗口，看着舒服。这里需要说明的是，模拟器是远程链接到别的服务器，所以画质不是很清晰。还有每次启动都有时间限制（60分钟），时间到了需要重新启动项目。

![70bbaf2d031271b0d25bb2c6880c81f9.png][]

点击如下图所示的小三角，运行项目。

![18a0609655f053b0b59d76b5136b6f27.png][]

点击`OK`即可。

![0f7ed5e7d1349938a97a5b681f061f03.png][]

出现以下画面，证明模拟器启动成功了。

![1277e53b39a9f2450b8532ca4f1aace9.png][]

#### 4. 开发项目 ####

看到了之前的您好，世界。那我们就实操一番，做一个Demo。我们几个操作都是在`index.hml`、`index.css`、`index.js`。这几个文件中操作的。

![29d0ddd0cb1537b53794b7875e6ea4e9.png][]

首先，我们在index.hml文件中编辑以下代码。

<div class="container">
        <text class="filter" for="{
       {filter in filters}}" tid="{
       {$idx}}">
            {
       {filter}}{
       {title}}
        </text>
        <div class="todo-item" for="{
       {todo in todos}}" tid="id">
            <input type="checkbox" />
            <text>{
       {todo.content}}</text>
        </div>
    </div>

然后，在index.js文件中编辑如下。

export default {
        data: {
            title: "demo",
            filters: ["全部", "已完成", "未完成"],
            todos: [{id: 1, content: "待办1"}, {id: 2, content: "待办2"}]
        },
    }

大功告成了，我们重新启动下项目，看下模拟器。点击如下图所示`Run 'entry'`标识的按钮。

![d48c1a032ce69ed269eeafaded8121bd.png][]

点击`Stop and Rerun`。

![107fa424171e38f2929e87cc8c483567.png][]

点击`OK`。

![7e732c7ce54e7b9d7d3b1f271f97615f.png][]

如下图所示，运行成功。

![5335fc7fac19ce381954085382a25656.png][]

#### 5. 开发文档 ####

我们看到上面demo的代码可能对于学过微信小程序跟Vue.js等MVVM框架的小伙伴感觉非常熟悉，你可以开发下面的链接继续学习。

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791

![7b540e87862f80e9a7d325b8069e2097.png][]

>  *  欢迎关注我的公众号**前端历劫之路**
>  *  回复关键词**电子书**，即可获取12本前端热门电子书。
>  *  回复关键词**红宝书第4版**，即可获取最新《JavaScript高级程序设计》（第四版）电子书。
>  *  关注公众号后，点击下方菜单即可加我微信，我拉拢了很多IT大佬，创建了一个技术交流、文章分享群，期待你的加入。

[6d94684a94681393642ee1a08c5c1441.png]: /images/20210813/d4e60b27687049b7a1b9103691b04918.png
[39e741609c7a0269302fdbbb85f5c1b7.png]: /images/20210813/1da0c515b10741fcb4d5e4ab21df0af8.png
[d383283c052f4933fe5d8c7f97ee7910.png]: /images/20210813/58d866c4c9274ee68c4b000ec03f581d.png
[cb13547068c9bcb605de6f8aaca0945e.png]: /images/20210813/ff71d2efad574ad7b63d3b4a87c5df51.png
[8344d629563f12718809f132a565dd66.png]: /images/20210813/0bf97b90c58b4a4ab07390d141362a02.png
[83dcf51f9afe523890c6559978678380.png]: /images/20210813/71ea92d52ab84f8983f50f17db9d4aaa.png
[f324ab98867996a1b22174f61208fbc1.png]: /images/20210813/f7927ee18b2240878d83b385bf5c5f5a.png
[2872634dd483d782f05350e045871e72.png]: /images/20210813/abc30b8aa36d4154800dea7832cf949c.png
[24923bb8ab027eaf03f9d725ba411dd6.png]: /images/20210813/d617eb1240e3429bbbc0525f67fc0548.png
[07994e57e92773cdf5fd4d2db6d7acaf.png]: /images/20210813/5b22764f7ef3411a8538522c9e519443.png
[81074129d65071863aade2b69ac015b7.png]: /images/20210813/fb9dbff2eb93488db233920a5ae66f3b.png
[dbf102ce55727927b2346f1156669702.png]: /images/20210813/c6fd966c1c8046d9a4dd55cbc625f9e5.png
[2a53ecce75f2652b4e45fcc7fe417c14.png]: /images/20210813/6e309ba803074810b3a96351747d5c07.png
[1f6e5359cde700f9ec2d15035d3f9010.png]: /images/20210813/7d86a6207ed4442394f6bcd326c08c1c.png
[ec02699be4137a18dfeb79d1314ddd09.png]: /images/20210813/292865e5f2f048839dc80337f30d536b.png
[16cdbd044ae8e549c4fb6668ce878cf2.png]: /images/20210813/e0c70d7a9a07451e927fac68014b5d38.png
[521caffa84f27de109c8b805d1a71acd.png]: /images/20210813/d39dd4d2c5444901925fc6ef738a3fa9.png
[41d2efe9dd22515e1fe57609360751c5.png]: /images/20210813/9232eab5b000450889e310be853ee87c.png
[70bbaf2d031271b0d25bb2c6880c81f9.png]: /images/20210813/79a5a7bfb370493abd06c67944db825e.png
[18a0609655f053b0b59d76b5136b6f27.png]: /images/20210813/215b4ef14ace4311984524cec2934583.png
[0f7ed5e7d1349938a97a5b681f061f03.png]: /images/20210813/327a1383d20d4cf9bcabf26a8a7bb0cb.png
[1277e53b39a9f2450b8532ca4f1aace9.png]: /images/20210813/514ca6e51bfa41bf9dbab7a98547db41.png
[29d0ddd0cb1537b53794b7875e6ea4e9.png]: /images/20210813/c66070c7fbef48da9729a5902e00d6b4.png
[d48c1a032ce69ed269eeafaded8121bd.png]: /images/20210813/43bce30764554e7f9bb2066417e169da.png
[107fa424171e38f2929e87cc8c483567.png]: /images/20210813/be36d4b4320b4d29b392cdff079abe37.png
[7e732c7ce54e7b9d7d3b1f271f97615f.png]: /images/20210813/b4fb4f9a5ae84d1b97c2a5018010ed50.png
[5335fc7fac19ce381954085382a25656.png]: /images/20210813/0a6e9c2172eb4cb8b6c5a6b941850119.png
[7b540e87862f80e9a7d325b8069e2097.png]: /images/20210813/0d8907b9492a4df099a23c7c29b2bd17.png