松山湖着火了，还好个人鸿蒙HelloWorld没事

昨晚，终于跑通了HarmonyOS的HelloWorld，原本预期半小时能搞定的事，我差很少花了整整5个小时！今天，惊闻东莞松山湖高新区华为在建工地着火，希望没有伤亡。javascript

你们好，我是前端Copy攻城狮胡琦，从事前端已有4年多，按理来讲，跑个鸿蒙OSHelloWorld不该该花那么大力气，毕竟环境安装也简单，编辑器DevEco Studio也贼好用，Demo的代码又特别简单。但是，我只是资深的Copy攻城狮，尽管工做年限已久，但技术水平十分平庸，经过阅读本文，您偏偏能够感觉到。本文将记录个人踩坑全历程，欢迎各位大佬拍砖！css

“巧妇难为无米之炊”

写多了技术分享的“水文”，彷佛心中都造成了一套模板：在文章的前面部分，总会列举如何如何准备，好比编辑器的获取、依赖的安装等等。本篇文章彷佛也不例外！有时候，了解一门新技术，或者学习使用一个新框架或库的时候，我总以为像极了Cooking。小时候，家里烧的是柴火，往往作饭的时候先得去后山树林里捡些掉落的松树叶子，用来生火最合适不过；有时候还要拾取干燥的粗壮的树枝，在烧火的时候能持续地烧得很旺。而此次要跑鸿蒙OS的HelloWorld，Native、JAVA、JS的SDK像极了那些松树叶子，助力我能成功跑通简单的Demo；编辑器DevEco Studio像极了那粗壮的树枝，给与我能量让我能持续地探索鸿蒙OS。html

“天才第一步，确是DevEco Studio”，第一步固然是下载安装天才都在用的DevEco Studio。记得我5月份就有幸得到了内测资格，当时还签了保密协议，而后发现如今都出到2.x的版本了，不知道还要不要保密。下载连接是公开的。前端

DevEco Studio下载连接java

# 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即将上线。node

SDK下载 DevEco Studio默认只会下载Java SDK和SDK对应的工具链Toolchains，固然，做为资深的Copy攻城狮，“小孩子才作选择题”，我全都要！因而在SDK Manager中手动下载了Native、JS的SDK；做为JS栈的开发人员，要想跑跑鸿蒙OS的JS版Demo，也必需安装JS SDK，因此别再纠结，所有安装吧！git
npm镜像配置npm

呃，一来就谈npm镜像配置？很差意思，都二十一世纪二十年代了，如今作前端的不装个NodeJS都很差意思说本身是前端开发了。至于我为何会有JAVA环境，尽管现在大部分项目都是先后分离，理论上我也不必安装JAVA，不过恰巧我要开发React Native，而后公司又是大把先后不分离的项目，得装个JAVA保住饭碗啊！编程

着重提一下我在这里踩到第一个坑：DecEco安装JS SDK报错"Run 'npm install' failed",详情参见：https://gitee.com/openharmony/docs/issues/I1WM2P。 json

根据错误日志，明显得看出是网络超时，我经过nrm管理添加了华为云的npm镜像，神奇的是并无生效，后来仍是经过npm config set registry https://mirrors.huaweicloud.com/repository/npm/从新设置镜像才得以解决。尽管官方文档给出的就是这条命令，但高估了本身能力的我执意用nrm来设置，结果就掉坑里了。
gradle配置

上文提到，我有作React Native，加上公司有些Spring的项目，因此我本机应该有gradle，而后就从新配置了DevEco Studio的gradle配置。这里，我认为DevEco Studio的相关配置和IEDA或者Android Studio仍是有些共性的。配置起来也是很是容易上手，不过，后面我仍是在配置上翻车了。

HelloWorld代码浅析

本次HelloWorld我是使用的JS的空模板，毕竟是前端Copy攻城狮，潜意识认为下载JS的Demo至少代码应该是认识的。当看懂代码目录和详情，我心里是崩溃的：竟然有JAVA！有JAVA!有JAVA！

仔细一看目录和文件名，像极了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开启模拟器，这一步须要登陆受权，若是您的帐号没有权限是没法使用模拟器的，成功的界面以下：

这一步，我也是挺郁闷的，不少次尝试打开HVD都没找到Wearable的设备，只有孤零零的TV能够选择，后来偶然间又显示了Wearable。之前没有使用过Wearable，感受挺神奇的，这个虚拟设备有点吊！

接下来是真正的RUN了，点击DevEco Studio顶部菜单RUN-RUN 'entry',成功的话，能检测到虚拟设备，这跟Android开发相似。点击OK，准备面向运气编程……

还好，稍等片刻，成功了！看到大大的您好 **，感受世界终于真正清净了。

永不止步

每一次HelloWorld都是愉快地体验，然而，HelloWorld以后，但愿H(ello)W(orld)攻城狮不要止步如此，咱们的将来是石沉大海，激起千层浪，浪里个浪！在此，我也立个flag，必定坚持学习不止步于HelloWorld！既然JS大有可为，为什么很差好努力多学学掌控并精通她？感谢各位大佬赏脸，也求各位大佬带飞！

华为松山湖“火了”，个人鸿蒙HelloWorld没事吧|解读鸿蒙源码

松山湖着火了，还好个人鸿蒙HelloWorld没事

“巧妇难为无米之炊”

HelloWorld代码浅析

运行HelloWorld

永不止步