松山湖着火了，还好我的鸿蒙HelloWorld没事
![]()
昨晚，终于跑通了HarmonyOS的HelloWorld，本来预期半小时能搞定的事，我差不多花了整整5个小时！今天，惊闻东莞松山湖高新区华为在建工地着火，但愿没有伤亡。
大家好，我是前端Copy攻城狮胡琦，从事前端已有4年多，按理来说，跑个鸿蒙OSHelloWorld不应该花那么大力气，毕竟环境安装也简单，编辑器DevEco Studio也贼好用，Demo的代码又特别简单。可是，我只是资深的Copy攻城狮，尽管工作年限已久，但技术水平十分平庸，通过阅读本文，您恰恰可以感受到。本文将记录我的踩坑全历程，欢迎各位大佬拍砖！
“巧妇难为无米之炊”
写多了技术分享的“水文”，似乎心中都形成了一套模板：在文章的前面部分，总会列举如何如何准备，比如编辑器的获取、依赖的安装等等。本篇文章似乎也不例外！有时候，了解一门新技术，或者学习使用一个新框架或库的时候，我总觉得像极了Cooking。小时候，家里烧的是柴火，每每做饭的时候先得去后山树林里捡些掉落的松树叶子，用来生火最合适不过；有时候还要拾取干燥的粗壮的树枝，在烧火的时候能持续地烧得很旺。而这次要跑鸿蒙OS的HelloWorld，Native、JAVA、JS的SDK像极了那些松树叶子，助力我能成功跑通简单的Demo；编辑器DevEco Studio像极了那粗壮的树枝，给与我能量让我能持续地探索鸿蒙OS。
![下载DevEcho]( "下载DevEcho")
“天才第一步，确是DevEco Studio”，第一步当然是下载安装天才都在用的DevEco Studio。记得我5月份就有幸获得了内测资格，当时还签了保密协议，然后发现现在都出到2.x的版本了，不知道还要不要保密。下载链接是公开的。
-
DevEco Studio下载链接
# HUAWEI DevEco Studio 1.0是开发EMUI应用的集成开发环境
# 如需开发HarmonyOS应用，请下载HUAWEI DevEco Studio 2.0
# 所以我们要下载 2.0
https://developer.huawei.com/consumer/cn/deveco_studio
https://developer.harmonyos.com/cn/develop/deveco-studio#download
目前暂时只支持Windows 10 64位，macOS版本的DevEco Studio即将上线。
-
SDK下载 ![SDK下载]( "SDK下载")
DevEco Studio默认只会下载Java SDK和SDK对应的工具链Toolchains，当然，作为资深的Copy攻城狮，“小孩子才做选择题”，我全都要！于是在SDK Manager中手动下载了Native、JS的SDK；作为JS栈的开发人员，要想跑跑鸿蒙OS的JS版Demo，也必需安装JS SDK，所以别再纠结，全部安装吧！
-
npm镜像配置
呃，一来就谈npm镜像配置？不好意思，都二十一世纪二十年代了，现在做前端的不装个NodeJS都不好意思说自己是前端开发了。至于我为什么会有JAVA环境，尽管如今大部分项目都是前后分离，理论上我也没必要安装JAVA，不过恰巧我要开发React Native，然后公司又是大把前后不分离的项目，得装个JAVA保住饭碗啊！
着重提一下我在这里踩到第一个坑：DecEco安装JS SDK报错"Run 'npm install' failed",详情参见：https://gitee.com/openharmony/docs/issues/I1WM2P。 ![JS SDK安装失败]( "JS SDK安装失败")
根据错误日志，明显得看出是网络超时，我通过nrm管理添加了华为云的npm镜像，神奇的是并没有生效，后来还是通过npm config set registry https://mirrors.huaweicloud.com/repository/npm/重新设置镜像才得以解决。尽管官方文档给出的就是这条命令，但高估了自己能力的我执意用nrm来设置，结果就掉坑里了。
-
gradle配置
![gradle配置]( "gradle配置")
上文提到，我有做React Native，加上公司有些Spring的项目，所以我本机应该有gradle，然后就重新配置了DevEco Studio的gradle配置。这里，我认为DevEco Studio的相关配置和IEDA或者Android Studio还是有些共性的。配置起来也是非常容易上手，不过，后面我还是在配置上翻车了。
HelloWorld代码浅析
![JS模板创建]( "JS模板创建")
本次HelloWorld我是使用的JS的空模板，毕竟是前端Copy攻城狮，潜意识认为下载JS的Demo至少代码应该是认识的。当看懂代码目录和详情，我内心是崩溃的：居然有JAVA！有JAVA!有JAVA！
![HelloWorld目录结构]( "HelloWorld目录结构")
仔细一看目录和文件名，像极了Android！一样的build.gradle,一样的gradle。不过entry文件夹下有前端的典型标志--package.json,但是当我看到package.json这个文件啥内容都没有，瞬间傻眼了，打开node_modules看到没有任何依赖才明白原来还没有引入任何依赖。我们再来看看详细的目录，淡黄色的.gradle、build、entry/build这三个目录是依赖还有打包出来的文件。根目录下的单文件基本是一些项目的配置文件，我们开发的目录主要在entry，其中我比较关注的是js目录，看到pages下的index/index.css、index/index.js、index/index.js，以及page目录同级下的app.js，是不是感觉像小程序的开发，是的，前端就是这么玩的！
“talk is cheap show me your code”, 接下来康康Hello World给我们的代码，重点关注以下文件：
-
entry/src/main/config.json
这里我就不解释了，因为官方文档有更详情的逐字段的解释--config.json清单文件介绍, 地址： https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-elements-0000000000034463 。
{
"app":{
"bundleName":"com.huawei.huqi.helloworld",
"vendor":"huawei",
"version":{
"code":1,
"name":"1.0"
},
"apiVersion":{
"compatible":3,
"target":3
}
},
"deviceConfig":{},
"module":{
"package":"com.huawei.huqi.helloworld",
"name":".helloworld",
"reqCapabilities":[
"video_support"
],
"deviceType":[
"wearable"
],
"distro":{
"deliveryWithInstall":true,
"moduleName":"entry",
"moduleType":"entry"
},
"abilities":[
{
"skills":[
{
"entities":[
"entity.system.home"
],
"actions":[
"action.system.home"
]
}
],
"formEnabled":false,
"name":"com.huawei.huqi.helloworld.MainAbility",
"icon":"$media:icon",
"description":"$string:mainability_description",
"label":"helloworld",
"type":"page",
"launchType":"standard"
}
],
"js":[
{
"pages":[
"pages/index/index"
],
"name":"default",
"window":{
"designWidth":454,
"autoDesignWidth":false
}
}
]
}
}
-
entry/src/main/js/default/app.js
熟悉的入口，熟悉的生命周期！这里是全局的JavaScript逻辑文件和应用的生命周期管理。
export default {
onCreate() {
console.info('AceApplication onCreate');
},
onDestroy() {
console.info('AceApplication onDestroy');
}
};
-
entry/src/main/js/default/pages/index/index.js
js文件描述了页面的行为逻辑，此文件里定义了页面里所用到的所有的逻辑关系，比如数据、事件等。里边的$t是多语言的写法，拿的是i18n中json文件的string.world字段，至于内部怎么实现，功夫浅暂时没看出来。目前查到的文章暂时还在编写中（该文档暂未发布，敬请期待~），主要是i18n目录用于配置不同语言场景资源内容，比如应用文本词条，图片路径等资源。在文件组织中指定的i18n文件夹内放置每个语言地区下的资源定义文件即可，资源文件命名为“语言-地区.json”格式，例如英文（美国）的资源文件命名为en-US.json。这部分的解析估计得看看鸿蒙OS的源代码。关于JS语法更多详情参见 JS语法参考.
export default {
data: {
title: ""
},
onInit (){
this.title = this.$t('strings.world');
}
}
-
多语言文件“语言-地区.json” 都是在i18n目录下，i18n下存放多语言的json文件。
// en-US.json
{
"strings":{
"hello":"Hello",
"world":"World"
},
"Files":{
}
}
// zh-CN.json
{
"strings":{
"hello":"您好",
"world":"世界"
},
"Files":{
}
}
-
entry/src/main/js/default/pages/index/index.hml HML（HarmonyOS Markup Language）是一套类HTML的标记语言，通过组件，事件构建出页面的内容。hml文件定义了页面的布局结构，使用到的组件，以及这些组件的层级关系。目前主要的标签是div、text、`image。更多关于HML具体参见 HML语法参考，看着像是向Vue.js致敬
<div class="container">
<text class="title">
{{ $t('strings.hello') }} {{title}}
</text>
</div>
-
entry/src/main/js/default/pages/index/index.css
就是层叠样式表，css文件定义了页面的样式与布局，包含样式选择器和各种样式属性等。目前来看支持flex布局，CSS样式文件支持 @import 语句，导入 CSS 文。更多关于CSS参见 CSS语法参考
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 100px;
}
其他关于JAVA部分就不班门弄斧了，毕竟不是专业的爪哇人。接下来是运行程序了，这里踩到一个巨坑。
运行HelloWorld
运行HelloWorld需要选择JDK版本，先来看看我的报错：
![运行报错]( "运行报错")
人狠话不多，意识到是JDK版本选择不当导致的，记得当时项目默认的JDK是12.0,怎么都跑不起来。走了一趟又一趟弯路，先是gradle依赖安装失败，然后又是各种试错，终于在5个小时后，折腾好了，跑通了！Gradle JVM用的本地的JDK 1.8，瞬间世界就安静了，屏住呼吸，点击一下RUN。当当当……当然，我这边是跑得模拟器，点击DevEco Studio顶部的Tools-HVD Manager开启模拟器，这一步需要登录授权，如果您的账号没有权限是无法使用模拟器的，成功的界面如下：
![success]( "success")
这一步，我也是挺郁闷的，很多次尝试打开HVD都没找到Wearable的设备，只有孤零零的TV可以选择，后来偶然间又显示了Wearable。以前没有使用过Wearable，感觉挺神奇的，这个虚拟设备有点吊！
![HVD]( "HVD")
接下来是真正的RUN了，点击DevEco Studio顶部菜单RUN-RUN 'entry',成功的话，能检测到虚拟设备，这跟Android开发类似。点击OK，准备面向运气编程……
![pre-run]( "pre-run")
还好，稍等片刻，成功了！看到大大的您好 **，感觉世界终于真正清净了。
![HelloWorld]( "HelloWorld")
永不止步
每一次HelloWorld都是愉快地体验，然而，HelloWorld之后，希望H(ello)W(orld)攻城狮不要止步如此，我们的未来是石沉大海，激起千层浪，浪里个浪！在此，我也立个flag，一定坚持学习不止步于HelloWorld！既然JS大有可为，为何不好好努力多学学掌控并精通她？感谢各位大佬赏脸，也求各位大佬带飞！
DevEco Studio默认只会下载Java SDK和SDK对应的工具链Toolchains，当然，作为资深的Copy攻城狮，“小孩子才做选择题”，我全都要！于是在SDK Manager中手动下载了Native、JS的SDK；作为JS栈的开发人员，要想跑跑鸿蒙OS的JS版Demo，也必需安装JS SDK，所以别再纠结，全部安装吧！
