1.前言
其實鴻蒙2.0今年在9月份的時候已經發布，只不過那個時候只能開發手錶和電視應用，還不支援手機。
鴻蒙2.0釋出，讓我給大家整個活
而現在能給手機端開發了，於是去了華為HarmonyOS Developer網站，下載了最新的HUAWEI DevEco Studio:
https://developer.harmonyos.com/cn/develop/deveco-studio
建立專案，就看到了可以選擇手機端開發了
之前為了折騰下阿里雲的serverless，就做了一個物聯網小專案,還起了個Alpaca IOT的名字
簡單來說就是給我家裡的樹莓派和工位上的樹莓派接上dht11溫度感測器
然後把採集到的溫溼度資料上傳到我自己寫的阿里雲serverless應用
之後擼一個前端頁面，從我自己寫的阿里雲serverless應用裡讀取溫溼度資料，顯示下來。
然後把這個網頁部署到伺服器，就是下面的連結
Alpaca IOT:https://iot.alpaca.run/
網站如圖所示
所以我現在的工作，就是把我這個前端網頁的業務，移植到鴻蒙app上
2.新建專案選擇手機開發專案，然後專案的目錄就出來了。
當然了，第一件事並不是寫程式碼，而是去弄一個執行鴻蒙系統的虛擬機器（其實流程和Android Studio是一樣的），這樣我寫的程式碼才有地方跑
然後砰的一下，一個執行鴻蒙os的虛擬手機就跑起來了。
其實這玩意並不是真的執行在我本地的鴻蒙虛擬機器，而是一個遠端桌面而已，所以待會寫出來的程式碼，估計是跑在遠端的華為機器，然後以遠端桌面的形式返回回來 所以體驗有點不好，因為遠端傳輸的畫面很糊，操作起來也卡（不是系統卡，而是遠端桌面網不好的話有延時） 好了，既然虛擬機器跑起來了，就直接執行專案程式碼吧，然後一個hello world出來了，說明執行成功。
由於我只是個卑微的前端菜，而鴻蒙又支援js開發，所以我就用js開發了，然後順便也對比下開發過程中和前端的區別，然後點進去原始碼的js資料夾，實現這個hello world的其實也是靠三座大山（hml、css、js） 他們的初始程式碼如下:
hml: 理解成變種的html語法，大體和html一樣，不過會有一點區別<!- index.hml --><div class="container"> <text class="title"> {{ $t('strings.hello') }} {{title}} </text></div>// index.jsexport default { data: { title: "" }, onInit() { this.title = this.$t('strings.world'); }}/* index.css */.container { flex-direction: column; justify-content: center; align-items: center;}.title { font-size: 100px;}看了下和小程式的模式類似，基本上也是h5+js+css,大體上和前端開發的區別不大，也是走的MVVM資料驅動檢視那套模式，就是api和一些細節不一樣，基本上可以說會Vue的就能上手。所以一開始我不看文件，直接複製貼上不加工，看看能不能“無痛移植” 結果發現不行，就我發現的，和前端網頁相比，有以下區別
hml1、這裡的佈局只有flex和grid(預設flex)，所以預設的前端html傳統文件流在這裡會垮掉（比如div標籤並不會換行，換行操作要靠設定flex相關屬性）2、文字內容要用標籤包起來，不包的話文字不會顯示出來js如圖，看來貌似這裡的js執行時不支援async/await（有沒有Promise沒試過，看來貌似要地獄回撥）看來一些api也不能直接用，比如fetch，後來看了下開發文件想要搞網路請求要從@system.fetch引,而且引過來的fetch只能靠回撥拿資料css大致相同，就我發現的可能這裡的css規則會更嚴格，比如我想設定背景色我用background不行，必須要background-color所以我後面把開發文件看了一遍，基本上和小程式一樣，總體架子不變，只有少量的區別，要根據文件修修改改才能把前端業務移植過來。
3.開始移植先給你看看我原來前端頁面程式碼是怎樣的（可能你們會覺得我這裡的html語法怪異，因為我這個網頁是基於ef.js弄得）
<!DOCTYPE html><html> <header> <title>Alpaca IOT</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> body { background-color: black; color: white; } #app { height: 95vh; display: -webkit-flex; /* Safari */ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; } #app .auther { position: fixed; bottom: 40px; font-size: 16px; cursor: pointer; } #app .auther a { text-decoration:none; color: white } #app .auther a:hover { text-decoration:solid; color: #f90; } #app .time { position: fixed; bottom: 15px; font-size: 16px; } #app .content{ width: 350px; text-align: center; padding: 5px; margin: 25px 20px; background: #f90; border-radius: 8px; color: black; } #app .title { font-size: 30px; margin-bottom: 10px; } #app .data-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } #app .data-box .text{ font-size: 24px; } #app .data-box .num{ font-size: 30px; } </style> </header> <body> <div id="app"></div> <script src="https://alpaca.cdn.bcebos.com/js/ef.js"></script> <script> const { t } = ef; // 建立ef物件 const app = new t` >div.content >div.title .家裡實時溫溼度 >div.data-box >div >span.text .溫度： >span.num .{{home_temperature}} >span.symbol .°C >div >span.text .溼度： >span.num .{{home_humidity}} >span.symbol .% >div.content >div.title .工位實時溫溼度 >div.data-box >div >span.text .溫度： >span.num .{{comp_temperature}} >span.symbol .°C >div >span.text .溼度： >span.num .{{comp_humidity}} >span.symbol .% >div.auther >a #href = https://github.com/AlpacaBi #target="_blank" .@Alpaca Bi >div.time .最後更新時間： {{time}} ` // alicloud serverless 介面 const url = "https://1055462284844024.cn-shenzhen.fc.aliyuncs.com/2016-08-15/proxy/alpaca-iot/alpaca-temp/getData" // 從介面拿資料賦給ef物件的data層 const updateData = async() => { let res = await fetch(url) let resData = await res.json() app.$data = { home_temperature: resData.home.temperature, home_humidity: resData.home.humidity, comp_temperature: resData.comp.temperature, comp_humidity: resData.comp.humidity, time: (new Date()).toLocaleString() } } updateData() // 把ef物件掛載在dom樹上 app.$mount({target: document.getElementById('app')}) // 每15秒更新一次資料 setInterval("updateData()", 60000); </script> </body></html>後來磕磕碰碰，就只改了這3個檔案，就好了，修改後的程式碼如下（你們可以看看和普通前端有什麼區別）
index.hml<!- index.hml --><div class="container"> <div class="content"> <div class="title"> <text class="text">家裡實時溫溼度</text> </div> <div class="data-box"> <div> <text class="text">溫度:</text> <text class="num">{{home_temperature}}</text> <text class="symbol">°C</text> </div> <div> <text class="text">溼度:</text> <text class="num">{{home_humidity}}</text> <text class="symbol">%</text> </div> </div> </div> <div class="content"> <div class="title"> <text class="text">工位實時溫溼度</text> </div> <div class="data-box"> <div> <text class="text">溫度:</text> <text class="num">{{comp_temperature}}</text> <text class="symbol">°C</text> </div> <div> <text class="text">溼度:</text> <text class="num">{{comp_humidity}}</text> <text class="symbol">%</text> </div> </div> </div></div>// index.jsimport fetch from '@system.fetch';export default { data: { home_temperature: 0, home_humidity: 0, comp_temperature: 0, comp_humidity: 0, }, onInit() { let _this = this // 阿里雲serverless介面 const url = "https://1055462284844024.cn-shenzhen.fc.aliyuncs.com/2016-08-15/proxy/alpaca-iot/alpaca-temp/getData" // 每60秒向阿里雲serverless讀取資料並更新到前端頁面 setInterval(function() { fetch.fetch({ url: url, success: function(response) { const resData = JSON.parse(response.data) _this.home_temperature = resData.home.temperature _this.home_humidity = resData.home.humidity _this.comp_temperature = resData.comp.temperature _this.comp_humidity = resData.comp.humidity }, fail: function(data, code) { console.log('fail callback') }, }); }, 60 * 1000) }} /* index.css */.container { height: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; background-color: black;}.container .content{ width: 600px; flex-wrap: wrap; align-items: center; padding: 10px; margin: 25px 20px; background-color: #f90; border-radius: 8px; color: black;}.container .content .title { width: 580px; margin-bottom: 20px;}.container .content .title .text { width: 580px; text-align: center; font-size: 60px;}.container .content .data-box { flex-direction: row; flex-wrap: wrap; justify-content: space-around;}.container .content .data-box .text{ font-size: 48px;}.container .content .data-box .num{ font-size: 60px;}然後我的鴻蒙物聯網APP Alpaca IOT就這樣跑起來啦！！！
現在既然做出來了，最後一步，就是打包app了，怎麼打包我就不說了，也就是按幾個選單而已，最後就打包出hap字尾的安裝包了。
所以從現在開始，我可以說自己是開發過鴻蒙APP的工程師了！！！
ps.一個開發過程中遇到的一個小插曲
4.其實有些事情還沒做好發現了嗎，我上面一直都是對著遠端的華為裝置進行隔空操作，哪怕APP也打包出來了，也沒地去安裝。
所以很核心的問題來了，要跑在真手機上才有意義！！！
還好昨天華為就公測招募華為鴻蒙OS 2.0手機開發者Beta版，支援Mate 30 / P40系列OTA升級。
而我恰好也有一臺P40PRO，符合裝置要求，所以我也提了申請了！！！
5.最後看到這裡你們肯定要打我，標題鴻蒙物聯網APP說的那麼高大上，現在看來無非就是做了個前端，每60秒往後端拿資料而已，隨便一個前端菜都能做。
這個時候估計不少大佬都要開始嘲諷我了:就這？？？
所以想想看，連我這種前端菜也能有模有樣弄個還能用的APP，而且我還覺得不難，那麼那些有著安卓開發經驗的大佬豈不是隨隨便便都能搞出一堆有用的應用，所以意義就在這裡了。
最後，在這裡我也分享一份乾貨，由大佬收錄整理的 Android學習PDF+架構影片+原始碼筆記，還有高階架構技術進階腦圖、Android開發面試專題資料，高階進階架構資料幫助大家學習提升進階，也節省大家在網上搜索資料的時間來學習，也可以分享給身邊好友一起學習。