
想了解更多关于开源的内容,请访问:
51CTO 开源基础软件社区
https://ost.51cto.com
前言
本篇将开启OpenHarmony北向探索,搭建开发环境,安装SDK
开发工具介绍
既然是做开发,开发工具少不了,OpenHarmony和HarmonyOS的北向开发使用的是同一个工具:HUAWEI DevEco Studio 支持一站式的分布式应用开发,支持分布式多段开发,分布式多段调试,多段模拟仿真。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/fcd8243955027310a23fc670c3eb6a99.png?x-oss-process=image/resize,w_820,h_1173)
作为一款开发工具,除了具有基本的代码开发、编译构建及调测等功能外,DevEco Studio还具有如下特点:
- 高效智能代码编辑:支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能,提升代码编写效率。
- 低代码可视化开发:丰富的UI界面编辑能力,支持自由拖拽组件和可视化数据绑定,可快速预览效果,所见即所得;同时支持卡片的零代码开发,降低开发门槛和提升界面开发效率。
- 多端双向实时预览:支持UI界面代码的双向预览、实时预览、动态预览、组件预览以及多端设备预览,便于快速查看代码运行效果。
- 多端设备模拟仿真:提供HarmonyOS本地模拟器,支持手机等设备的模拟仿真,便捷获取调试环境。
总体看上去这个开发工具还是很不错的,看了这张图,是不是又有很强烈的亲切感,和IntelliJ IDEA不能说很像,只能说是一摸一样,当然现在IntelliJ IDEA推出了新的UI界面。其实DevEco Studio就是基于IntelliJ IDEA Community开源版本打造的,为运行在HarmonyOS和OpenHarmony系统上的应用和服务一站式开发平台。
应用开发流程
应用开发流程一般分为以下四个步骤,本篇接下来会具体演示开发准备这一环节。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/5785db490a0f8e78dd6d35cf45650997.png)
搭建开发环境流程
和我们南向开发使用到的DevEco Device Tool 再系统的支持上面有所不同。
Tool 支持的是windows 与 Linux。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/c1938fc2637e33669c9ae07684c12960.png?x-oss-process=image/resize,w_820,h_665)
studio支持的是window与mac。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/23b83ee7f569ec944068bad4262d23ae.png?x-oss-process=image/resize,w_820,h_665)
正当我以为我尘封许久的mac Air可以派上用场的时候…
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/b6900326d15acc0abb2566b611318cfa.png?x-oss-process=image/resize,w_820,h_973)
好吧,大概是真的尘封久了,不太愿意为我服务,所以大家得勤劳一些,总不会有什么坏处。回归正题,下面我们就来在Windows系统上搭建我们的开发环境。具体的流程如下:
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/7a198d440b6c2807f961e7cfcb40ae08.png)
安装开发工具
官网链接:HUAWEI DevEco Studio Download。
根据你的系统及芯片架构选择对应的开发工具,点击Download。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/a631aa17dfa5c05bd7cf5ca73f6e514b.png?x-oss-process=image/resize,w_820,h_714)
打开下载完成的程序,下面就是一些基本的安装软件流程。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/7057b4ac19ed8cf386c66384c7e59dc5.png?x-oss-process=image/resize,w_735,h_551)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/faf66c7d45949e793a1bf8cbc592f776.png?x-oss-process=image/resize,w_734,h_553)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/ae94c1e2cdded04ff67147debd659c7c.png?x-oss-process=image/resize,w_733,h_552)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/9df9f0579bafc53b97f6b00b6b170442.png?x-oss-process=image/resize,w_734,h_556)
下面就是等待安装即可。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/13eb1e729a88a1c97f0774b4a3ed9a9d.png?x-oss-process=image/resize,w_741,h_558)
点击Finish,完成安装。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/25136f34240b612a39619b5a50d91318.png?x-oss-process=image/resize,w_737,h_553)
打开软件,就开始到了我们环境的搭建。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/e5e071826e37661bcc24e4a4ba3dd416.png?x-oss-process=image/resize,w_820,h_856)
如果你这个时候不小心关闭了这个界面,你就会直接跳过环境的搭建,并且在之后打开开发环境都不会出现环境搭建的界面。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/2d1ad6912ceb9c6b8c54118011a79460.png?x-oss-process=image/resize,w_820,h_1027)
这个情况下我们可以点击Setting中的Restore。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/da986e2a80c5dc7ee466c276dc9ea7c0.png?x-oss-process=image/resize,w_820,h_1303)
点击ReStore and Restart 后关闭开发工具,自己再手动打开就发现,环境搭建的界面又出现了。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/dd71780e50ab12be0650eb73715fe620.png?x-oss-process=image/resize,w_553,h_227)
配置开发环境
首先是Basic Setup。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/4b4752a702b4e59d30dff34ae2e961bf.png?x-oss-process=image/resize,w_820,h_348)
需要添加Node.js 和 Ohpm。
Node.js应该不陌生,比如说在前端开发Vue框架的使用中就需要先预装Node.js。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/ac3944a3c62809e2faad8626f947330e.png?x-oss-process=image/resize,w_820,h_502)
比较尴尬的就是,如果你当时装过,且是在官网装的,很可能装的就是18.16.0这个长期支持版本。而我们这个开发工具支持的Node.js 必须是v14.19.1及以上,且低于v17.0.0。
如果你忘了你的电脑Node.js版本或者不记得装没装了,可以打开终端输入以下命令进行查看。
node -v![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/a4b9b8478fcffd17769d78c1c46284ca.png?x-oss-process=image/resize,w_382,h_153)
我装的版本显然就过高了,所以需要重新装,如果你的Node.js装的比较早,版本刚好符合要求,就可以直接把Node.js所在目录引用上去。
ohmp的话是一个包管理器,类似于npm。如果是首次接触鸿蒙的话,应该是没装过的。
还有一个需要注意的是,即将进行的安装过程是通过npm给我们安装的,npm的版本要求为6.14.16及以上。
可以通过以下命令查看npm的版本
npm -v![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/864db90bf0b2efb5e3d371f262d9dcf7.png?x-oss-process=image/resize,w_352,h_138)
也可以用以下命令安装指定版本的npm。
npm i npm@6.14.16 -g![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/de5ec499d73c298763f92e8a6a8b7d2e.png?x-oss-process=image/resize,w_367,h_216)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/e51e18ccc8eee7e35672b62f9c65f266.png?x-oss-process=image/resize,w_820,h_855)
SDK安装。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/6ac1fe5cbbfd03b05a93c494d2c58c87.png?x-oss-process=image/resize,w_820,h_687)
我们先点击Next,直接跳入下一页。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/19ef5ad73619568d7305cd054c58a8ac.png?x-oss-process=image/resize,w_820,h_747)
选择Accept即可。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/432bd943f35c048c2d2e7ec5c9ea0bf1.png?x-oss-process=image/resize,w_820,h_739)
Summary:
这是一个总结,你可以看到所有你需要安装的环境。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/7d73d837fc4faa05e7e3c30c25b2927b.png?x-oss-process=image/resize,w_820,h_761)
点击Next等待他安装即可。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/a5a8cd1929c5d6604dd35563ce102fd7.png?x-oss-process=image/resize,w_820,h_858)
报错分享
在安装的过程中也难免会出些意外,比如我出现了ArkTS安装的错误,也导致后面的SDK都没有进行安装,整个配置流程都中断了,还是挺头疼的。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/8c61bb2a8686c4cd9e7a30ec59edc123.png?x-oss-process=image/resize,w_820,h_440)
其中报错信息指出,没有找到指定版本的@babel/parser v7.22.5,这个就是npm源的问题,我也在网上查询了相关的SDK安装失败的问题,大部分都是网络代理问题,包括官网也给出了JS SDK的解决方案:环境准备-DevEco Studio常见问题-常见问题-HarmonyOS应用开发 我这个恰好也不属于网络问题。最多就是给npm换源吧,我想着用用华为的,我其实一开始也不知道,IDE好像自带的华为源。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/e7240f23247f687af58e969429990919.png?x-oss-process=image/resize,w_820,h_450)
所以我既便手动换了,但是这个问题还是搞不定。我用了命令去查询了一下这个@babel/parser,发现他的最新版本只有7.22.3。
npm view @babel/parser![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/df776f1a74244a06fc5b354c2e47c9da.png?x-oss-process=image/resize,w_820,h_503)
但是npm官网中,的确存在v7.22.5的这个版本。这个可能就是华为官方的镜像源没有更新了。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/c65d1dec1b9138501ffe4a0f1cc6f3ca.png?x-oss-process=image/resize,w_820,h_1377)
我索性就把镜像源的配置文件给删掉了,用了npm官方自己的源,也是成功看到了V7.22.5的存在,并且下载了下来。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/dc6250b1f7c79eefcf50ed8544648a4a.png?x-oss-process=image/resize,w_820,h_674)
最后,换回了npm的官方源,ArkTS的sdk也解决了。后面所有的SDK安装也迎刃而解了。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/aa5bfd2a1b5adf1e532e8305efe4a973.png?x-oss-process=image/resize,w_820,h_979)
下面是最终的解决方法:
切换源:
npm config set registry https://registry.npmjs.org/清理缓存:
npm cache clean --force打开Setting中的SDK,选择OpenHarmony,点击Edit。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/dffdbfe466f3ec61f44c403deb4186b0.png?x-oss-process=image/resize,w_820,h_1058)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/aead06f014c6e18d1092622a47b1484c.png?x-oss-process=image/resize,w_820,h_1027)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/f6e58da4ef666ce87d3d41f5047e6c0b.png?x-oss-process=image/resize,w_820,h_1023)
最后完成SDK后,我们来检测一下环境的搭建。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/af4150d5968a546599010820eb735643.png?x-oss-process=image/resize,w_820,h_629)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/aa9e48118e09f711dfad75628cdaa7f1.png?x-oss-process=image/resize,w_820,h_966)
诊断开发环境
DevEco Studio也自带基础环境检测功能。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/f953b2857658f49c6f97302f3e23bd63.png?x-oss-process=image/resize,w_820,h_1134)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/64d7fa0a2332f1dfe5df1891c887cd6b.png?x-oss-process=image/resize,w_820,h_1056)
至此我们开发环境的搭建就完成了。
Hello,World
创建工程
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/20bf93ae9f49b335615db5a8f34e636a.png?x-oss-process=image/resize,w_820,h_1026)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/3aacc437e2a4be84a766505c83b94d7a.png?x-oss-process=image/resize,w_820,h_979)
熟悉的UI,回想起了刚刚学习JAVA的那个时候…
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/abc893276283e53155ba23a0327805c6.png?x-oss-process=image/resize,w_820,h_1453)
运行工程
我们先使用虚拟机,设置一下运行的Devices。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/355d8b219114ddbe66501d1d768c3ef1.png?x-oss-process=image/resize,w_820,h_1449)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/4cc1236337760e59b0d63850c240a7d8.png?x-oss-process=image/resize,w_820,h_1144)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/b9fefdb7d83979ba91fbd510b46106b8.png?x-oss-process=image/resize,w_820,h_1147)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/e2be34c846ffa16132e384f1352d6de4.png?x-oss-process=image/resize,w_820,h_967)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/e4d1de86a200dd0fb2f76648fe1e84de.png?x-oss-process=image/resize,w_820,h_972)
启动我们的虚拟手机。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/0f7b1562bcc59c84428dd751a76d3d4b.png?x-oss-process=image/resize,w_820,h_1147)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/11338ce641ce151ef635c13ca2952fa3.png?x-oss-process=image/resize,w_561,h_993)
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/f85629200e4a472a047ce9bd3ba611f0.png?x-oss-process=image/resize,w_561,h_993)
这个时候我们返回IDE,运行工程。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/ed19dce4f4c9e651c5c85c0b154d61c4.png?x-oss-process=image/resize,w_820,h_143)
观察我们的虚拟手机。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/ad8c2296f1039e5c4993dd01050b37ac.png?x-oss-process=image/resize,w_561,h_993)
程序就在这里。
![OpenHarmony北向探索[环境搭建篇]-开源基础软件社区 OpenHarmony北向探索[环境搭建篇]-开源基础软件社区](/d/file/2023-06-24/0a559582bb78d9146699492b5a8292b1.png?x-oss-process=image/resize,w_561,h_993)
初次体验这个虚拟手机,感觉还是挺有趣的。
结束语
本篇介绍了环境的搭建,包括一个bug分享,一般家庭网络中不会出现网络上的bug,如果你也遇到了软件包版本的问题,希望能够帮到大家。后面也会讲解详细的北向代码,感谢支持!
想了解更多关于开源的内容,请访问:
51CTO 开源基础软件社区
https://ost.51cto.com