网站开发上线ftp怎么用/2345浏览器下载安装

松山湖着火了，还好我的鸿蒙HelloWorld没事

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

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

“巧妇难为无米之炊”

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

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

• DevEco Studio下载链接

    # HUAWEI DevEco Studio 1.0是开发EMUI应用的集成开发环境# 如需开发HarmonyOS应用，请下载HUAWEI DevEco Studio 2.0# 所以我们要下载 2.0https://developer.huawei.com/consumer/cn/deveco_studiohttps://developer.harmonyos.com/cn/develop/deveco-studio#download

目前暂时只支持Windows 10 64位，macOS版本的DevEco Studio即将上线。

• 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。

根据错误日志，明显得看出是网络超时，我通过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大有可为，为何不好好努力多学学掌控并精通她？感谢各位大佬赏脸，也求各位大佬带飞！