鸿蒙教程(一）：鸿蒙组件开发环境配置

拼搏现实的明天。 2022-08-31 12:30 298阅读 0赞

### 介绍 ###

OpenHarmony是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目，目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。  
目前官方代码托管在 https://gitee.com/openharmony

相关的文档 https://gitee.com/openharmony/docs/tree/master/zh-cn

本篇文章就带领大家配置开发OpenHarmony的开发环境

### 下载并安装开发软件 ###

首先，要开发鸿蒙软件，组件，应用，必须要使用官方提供的编辑器。 这个编辑器叫做  
**DevEco Studio**

编辑器下载地址  
https://developer.harmonyos.com/cn/develop/deveco-studio\#download  
可以看到，最新的是2.2 beta1 版本， 最新正式发布版是 2.1版本。 我们使用稳定的2.1版本。  
编辑器有二个平台支持， 一个是Windows 一个苹果Mac。选择自己系统对应的即可。

![在这里插入图片描述][6c236d28a7414243857b37396d09c9cb.png]

系统要求

![在这里插入图片描述][08383d8cf91140768961580a659e9eff.png]

如果上面地址失效来的话，可以先访问这个页面  
https://developer.harmonyos.com/cn/develop/deveco-studio

下载完成后， 该软件 890M，还是挺大的。  
![在这里插入图片描述][6458cc4a13bc4117be50e2fa76a87378.png]

接下来就是，解压，一键安装。  
![在这里插入图片描述][91c88fa8f0524763b21a952d254f5026.png]

安装完成后启动  
![在这里插入图片描述][f79619f7552846fd91905c758014f2ee.png]

![在这里插入图片描述][bd2931e08a004f0cab5a99e4ee5f7efc.png]

选择你要将SDK 下载到那个位置  
![在这里插入图片描述][561b8b8910c04e67b236595f5026e8b3.png]

到了这里就需要先下载SDK了

### 下载sdk 并配置sdk ###

下载SDK https://mirror.iscas.ac.cn/OpenHarmony/sdk/OpenHarmony-SDK-2.0-Canary.7z

选中SDK。  
![在这里插入图片描述][7fef70190eff404a80909896ce6c6369.png]

这个很类似安卓的开发。

配置完SDK , 就到了这个页面  
![在这里插入图片描述][431da188966c4e73b9448133f9c413de.png]

### 启动helloworld 项目 ###

下面开启我们的HelloWorl项目  
点击 ![在这里插入图片描述][84dd8abaebb9470e848660a8fef892f5.png]

搜索 hello world项目  
![在这里插入图片描述][686f9f001cf7410a80ddfb54ec549f91.png]  
点击next

选中项目的目录，点击finish。 这一步编辑器会拉取远程代码。

![在这里插入图片描述][28ea0bd16ed644ac92941eb278974775.png]

![在这里插入图片描述][d81e94cfb50b4af98fb6ceb1729e6d80.png]

下载完成后，如果出现更新，就直接点确定。  
![在这里插入图片描述][ac37f321347d486784fe298cb369adeb.png]

**这一步很重要**  
由于官方的代码比较滞后，我们需要修改一个文件， 修改此文件 `build.gradle`  
![在这里插入图片描述][02b095a43c2140ed854d60de60ccf4e4.png]

在控制台显示 `BUILD SUCCESSFUL in 1s` 说明项目已经编译成功。  
那么怎么看到我们的Helloworld 那？

在最右上角的 侧边栏 有一个 Preview 的按钮，点击它。  
![在这里插入图片描述][61f17ca992cf4a28b4a300cd788c7561.png]

接着会弹出显示这个一个警告。 它告诉你，应该先要打开html， js， css 等布局类的文件，才能进行预览。  
![在这里插入图片描述][4dd42de2aba24d8282679201124cebd9.png]

那我们打开 `src/main/js/default/pages/index/index.hml` 文件，再点击 预览按钮。

并购。。。。 期待已久的Helloworld 页面出现了。  
![在这里插入图片描述][35fc6790043745c7856b8e7fc4374e08.png]

点击此处按钮，可以开启一个简单的调试页面。  
![在这里插入图片描述][34b1e9612da44a19a323831f95a9aa93.png]

鼠标点击特定的 div 或text ，input， 可以高亮相应的区域，并且会显示该元素的样式。虽然比不上chrome的调试工具强大，但对于简单的页面也够用了。  
![在这里插入图片描述][23a7c11a277c4a26861381225da45b54.png]

### 结语 ###

本期内容就简单介绍这里。  
我在最开始搭建开发环境的时候走了很多弯路， 一开始我以为开发一个组件还需要鸿蒙的开发板，需要进行实名认证，需要配置签名，需要开启远程虚拟设备。浪费了很多时间。看官方文档也看的云里雾绕的。  
最后还是自己琢磨出来的。 分享给大家。

下一篇文章我给大家分享一下，鸿蒙组件的路由，状态管理。

[6c236d28a7414243857b37396d09c9cb.png]: /images/20220829/17d269f0412a45f5a2af2102fdc758cf.png
[08383d8cf91140768961580a659e9eff.png]: /images/20220829/bbfcc510a1b84928a2f4d947574099b3.png
[6458cc4a13bc4117be50e2fa76a87378.png]: /images/20220829/53c6143215b5480e979ad1879aa4a53c.png
[91c88fa8f0524763b21a952d254f5026.png]: /images/20220829/5ca786986d6f4844b317988b049792d1.png
[f79619f7552846fd91905c758014f2ee.png]: /images/20220829/2bffd9a37cfb46669f53b2a2275a9d9d.png
[bd2931e08a004f0cab5a99e4ee5f7efc.png]: /images/20220829/23c82519a1114b90acbb533a9d686755.png
[561b8b8910c04e67b236595f5026e8b3.png]: /images/20220829/79ff593d419545de801294f2363ce49b.png
[7fef70190eff404a80909896ce6c6369.png]: /images/20220829/a718bc2c5d2948eb840420cfed41801e.png
[431da188966c4e73b9448133f9c413de.png]: /images/20220829/daa5d763de554b91905632677a1b7823.png
[84dd8abaebb9470e848660a8fef892f5.png]: /images/20220829/da2227944f6e48f7949429c311e72993.png
[686f9f001cf7410a80ddfb54ec549f91.png]: /images/20220829/dc42471e11174cf38cf4290cf710facb.png
[28ea0bd16ed644ac92941eb278974775.png]: /images/20220829/df13088256a545eeba17adbf0bf31e8a.png
[d81e94cfb50b4af98fb6ceb1729e6d80.png]: /images/20220829/6b35782cd7f544e28d503efb5b68a58b.png
[ac37f321347d486784fe298cb369adeb.png]: /images/20220829/4a109bf841874e2ea03ac79379af738c.png
[02b095a43c2140ed854d60de60ccf4e4.png]: /images/20220829/c36506eea47f48d9adf28bc73b729fcc.png
[61f17ca992cf4a28b4a300cd788c7561.png]: /images/20220829/cca446c3fa9b4f89a92046911bfbc45c.png
[4dd42de2aba24d8282679201124cebd9.png]: /images/20220829/a671a36de7ea411891e78d9a32dc169b.png
[35fc6790043745c7856b8e7fc4374e08.png]: /images/20220829/01ed0271d3d34e1a9e9fceb87dadb81c.png
[34b1e9612da44a19a323831f95a9aa93.png]: /images/20220829/552ad36a10db4ba586e928940e382e85.png
[23a7c11a277c4a26861381225da45b54.png]: /images/20220829/47670d7c68c3422ab79cf3f15cc63cae.png