松山湖着火了，還好個人鴻蒙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的版本了，不知道還要不要保密。下載連接是公開的。前端
-
# 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大有可爲，爲什麼很差好努力多學學掌控並精通她？感謝各位大佬賞臉，也求各位大佬帶飛！