华为松山湖“火了”,我的鸿蒙HelloWorld没事吧|解读鸿蒙源码

原创
09/26 15:17
阅读数 2.7W

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

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

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

“巧妇难为无米之炊”

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

下载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下载 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安装失败

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

  • gradle配置

gradle配置

上文提到,我有做React Native,加上公司有些Spring的项目,所以我本机应该有gradle,然后就重新配置了DevEco Studio的gradle配置。这里,我认为DevEco Studio的相关配置和IEDA或者Android Studio还是有些共性的。配置起来也是非常容易上手,不过,后面我还是在配置上翻车了。

HelloWorld代码浅析

JS模板创建

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

HelloWorld目录结构

仔细一看目录和文件名,像极了Android!一样的build.gradle,一样的gradle。不过entry文件夹下有前端的典型标志--package.json,但是当我看到package.json这个文件啥内容都没有,瞬间傻眼了,打开node_modules看到没有任何依赖才明白原来还没有引入任何依赖。我们再来看看详细的目录,淡黄色的.gradlebuildentry/build这三个目录是依赖还有打包出来的文件。根目录下的单文件基本是一些项目的配置文件,我们开发的目录主要在entry,其中我比较关注的是js目录,看到pages下的index/index.cssindex/index.jsindex/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文件定义了页面的布局结构,使用到的组件,以及这些组件的层级关系。目前主要的标签是divtext、`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

这一步,我也是挺郁闷的,很多次尝试打开HVD都没找到Wearable的设备,只有孤零零的TV可以选择,后来偶然间又显示了Wearable。以前没有使用过Wearable,感觉挺神奇的,这个虚拟设备有点吊!

HVD

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

pre-run

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

HelloWorld

永不止步

每一次HelloWorld都是愉快地体验,然而,HelloWorld之后,希望H(ello)W(orld)攻城狮不要止步如此,我们的未来是石沉大海,激起千层浪,浪里个浪!在此,我也立个flag,一定坚持学习不止步于HelloWorld!既然JS大有可为,为何不好好努力多学学掌控并精通她?感谢各位大佬赏脸,也求各位大佬带飞!

展开阅读全文
打赏
8
2 收藏
分享
加载中
huqi88博主
今天发现 我的图 哎
09/27 17:04
回复
举报
面向运气编程,28原理,2分靠打拼,8分看运气
09/27 11:47
回复
举报
huqi88博主
get
09/27 17:19
回复
举报
题主经历坎坷了。今早从下载deveco studio开始到模拟器显示出helloworld,没超20分钟。当然,我没点开任何文件分析其内容,只是按向导走一遍,js sdk和openjdk以及gradel都是自动下的。一早网速好,刷刷的。
09/27 06:10
回复
举报
huqi88博主
给大佬递茶,期待您分享。我看到还有小伙伴说环境复杂直接放弃了的,太可惜了。
09/27 17:21
回复
举报
每次启动虚拟机还要浏览器登录这一点是真的烦
09/26 21:35
回复
举报
huqi88博主
不知道以后能不能登录一次, run anywhere.
09/26 22:50
回复
举报
早年发家,靠修改ciscio源码,还不是照样挺过来
09/26 16:20
回复
举报
华为修改AS开发环境,算侵权吗
09/26 15:56
回复
举报
huqi88博主
都是基于那个开源的IEDA版本吧
09/26 16:21
回复
举报
应该不算吧
09/26 23:43
回复
举报
更多评论
打赏
11 评论
2 收藏
8
分享
返回顶部
顶部