helloworld代码_第一个HarmonyOS“Hello World”运行及代码解析-CSDN博客

作者：胡琦，4年前端开发经验

(本文经作者授权改动发布)

本文将记录我在HarmonyOS上运行第一个程序的全过程，欢迎讨论。

“巧妇难为无米之炊”

有时候，了解一门新技术，或者学习使用一个新框架或库的时候，我总觉得像极了Cooking。小时候，家里烧的是柴火，每每做饭的时候先得去后山树林里捡些掉落的松树叶子，用来生火最合适不过；有时候还要拾取干燥的粗壮的树枝，在烧火的时候能持续地烧得很旺。而这次要跑HarmonyOS的HelloWorld，Native、JAVA、JS的SDK像极了那些松树叶子，助力我能成功跑通简单的Demo；编辑器DevEco Studio像极了那粗壮的树枝，给与我能量让我能持续地探索HarmonyOS。

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

https://developer.huawei.com/consumer/cn/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下载

DevEco Studio默认只会下载Java SDK和SDK对应的工具链Toolchains，当然，作为资深的Copy攻城狮，“小孩子才做选择题”，我全都要！于是在SDK Manager中手动下载了Native、JS的SDK；作为JS栈的开发人员，要想跑跑HarmonyOS的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?from=project-issue

详情参见：

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。

我们再来看看详细的目录，淡黄色的.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。这部分的解析估计得看看HarmonyOS的源代码。关于JS语法更多详情参见：

JS语法参考：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-syntax-js-0000000000611432

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语法参考：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-syntax-hml-0000000000611413

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参见：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-syntax-css-0000000000611425

.container {

flex-direction: column;

justify-content: center;

align-items: center;

}

.title {

font-size: 100px;

}

接下来是运行程序了，这里又开始出现状况。

运行HelloWorld

运行HelloWorld需要选择JDK版本，先来看看我的报错：

我意识到是JDK版本选择不当导致的，记得当时项目默认的JDK是12.0,怎么都跑不起来。走了一趟又一趟弯路，先是gradle依赖安装失败，然后又是各种试错，终于在5个小时后，折腾好了，跑通了！Gradle JVM用的本地的JDK 1.8，点击一下RUN。当当当……当然，我这边是跑得模拟器，点击DevEco Studio顶部的Tools-HVD Manager开启模拟器，这一步需要登录授权，如果您的账号没有权限是无法使用模拟器的，成功的界面如下：