開(kāi)發(fā)前可以了解下鴻蒙: [鴻蒙開(kāi)發(fā) 序]華為鴻蒙操作系統(tǒng)(HarmonyOS)簡(jiǎn)介及開(kāi)發(fā)環(huán)境搭建
上黨網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,上黨網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為上黨1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢,請(qǐng)找那個(gè)售后服務(wù)好的上黨做網(wǎng)站的公司定做!
開(kāi)發(fā)前的準(zhǔn)備:「鴻蒙開(kāi)發(fā) 1」華為鴻蒙應(yīng)用集成開(kāi)發(fā)環(huán)境DevEco Studio安裝和設(shè)置
了解鴻蒙應(yīng)用開(kāi)發(fā)的基本開(kāi)發(fā)流程:「鴻蒙開(kāi)發(fā) 2」第一個(gè)華為鴻蒙(HarmonyOS)應(yīng)用程序(App)
本章目標(biāo):
1 了解華為鴻蒙應(yīng)用開(kāi)發(fā)的可視化(低代碼)方式
2 通過(guò)構(gòu)建一個(gè)簡(jiǎn)單的具有頁(yè)面跳轉(zhuǎn)功能的應(yīng)用
低代碼開(kāi)發(fā)方式,即通過(guò)可視化界面開(kāi)發(fā)方式快速構(gòu)建布局、編輯UI界面,可有效降低用戶的上手成本并提升用戶構(gòu)建UI界面的效率。
1 打開(kāi)DevEco Studio,創(chuàng)建一個(gè)新工程,選擇支持Phone / Tablet / Wearable(手機(jī) / 平板 / s可穿戴)的模板,我們?cè)诖酥苯舆x擇Empty Ability
Project name工程名稱填SuperVisual
Development mode開(kāi)發(fā)方式選擇Super Visual
其它的可以使用默認(rèn)設(shè)置,點(diǎn)擊完成,進(jìn)入編輯界面
1 在Project(項(xiàng)目)窗口,刪除工程運(yùn)行默認(rèn)的入口文件夾:“entry src main js default pages index”文件夾
2 在Project窗口,選擇工程中的“entry src main js default pages”,單擊鼠標(biāo)右鍵,選擇“New JS Visual”
JS visual name填first,點(diǎn)擊完成,進(jìn)入編輯界面
創(chuàng)建完成后,可以看到“entry src main supervisual default pages page page.visual”的文件目錄結(jié)構(gòu)
3 第一個(gè)頁(yè)面內(nèi)有一個(gè)容器、文本和一個(gè)按鈕,通過(guò)Div、Text和Button組件來(lái)實(shí)現(xiàn)
(1)分別選中first.visual畫面中的Text、Div組件,單擊鼠標(biāo)右鍵,選擇Delete刪除
(2)選中UI Control中的Div組件,將其拖至畫布
點(diǎn)擊右側(cè)屬性樣式欄中的通用樣式圖標(biāo)(General),設(shè)置Div組件的高度Height為100%,使其占滿屏幕
點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)(Flex),設(shè)置Div組件的FlexDirection樣式為column,使Div的主軸垂直;設(shè)置Div組件的JustifyContent樣式為center,使得其子組件在主軸上居中顯示;設(shè)置Div組件的AlignItems樣式為center,使得其子組件在交叉軸上居中顯示
(3)選中UI Control中的Text組件,將其拖至Div組件的中央?yún)^(qū)域
點(diǎn)擊右側(cè)屬性樣式欄中的屬性圖標(biāo)(Properties),設(shè)置Text組件的Content屬性為 “ Hello World ”
點(diǎn)擊右側(cè)屬性樣式欄中的通用樣式圖標(biāo)(General),設(shè)置Text組件的寬(width)為100%,高(height)為100px
點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)(Feature),設(shè)置組件的FontSize樣式為60px,使得其文字放大;設(shè)置組件的TextAlign樣式為center,使得組件文字居中顯示
(4)選中UI Control中的Button組件,將其拖至Text組件下面
點(diǎn)擊右側(cè)屬性樣式欄中的屬性圖標(biāo)(Properties),設(shè)置Button組件的Value屬性為 “ Next ”,
點(diǎn)擊右側(cè)屬性樣式欄中的通用樣式圖標(biāo)(General),設(shè)置按的寬(width)為40%,高(height)為60px
點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)(Feature),設(shè)置組件的FontSize樣式為40px
至此,第一個(gè)頁(yè)面創(chuàng)建完成
我們可以在預(yù)覽窗口中看效果,點(diǎn)擊右側(cè)邊欄的Preview打開(kāi)預(yù)覽窗口
1 在Project窗口,選擇工程中的“entry src main js default pages”,單擊鼠標(biāo)右鍵,選擇“New JS Visual”
Visual配置界面,JS visual name填second,回車(Enter鍵)或者點(diǎn)擊完成,進(jìn)入編輯界面
2 第二個(gè)頁(yè)面中有一個(gè)容器和文本,通過(guò)Div、Text組件實(shí)現(xiàn),現(xiàn)在編輯器已經(jīng)為我們創(chuàng)建好了,我們就來(lái)修改下它們的屬性(你也可以刪除原有的自己創(chuàng)建,具體步驟參考本章第二節(jié)“二 創(chuàng)建第一個(gè)頁(yè)面”)。
選中Text組件,點(diǎn)擊右側(cè)屬性樣式欄中的屬性圖標(biāo)(Properties),設(shè)置Text組件的Content屬性為 “ Hi,I'm always here. ”
點(diǎn)擊右側(cè)屬性樣式欄中的通用圖標(biāo)(General),設(shè)置組件的寬(width)為100%,高為60px
點(diǎn)擊右側(cè)屬性樣式欄中的樣式圖標(biāo)(Feature),設(shè)置組件的FontSize樣式為36px,TextAlign樣式為center
這樣我們的第二個(gè)頁(yè)面創(chuàng)建成功了
1 在Project窗口,打開(kāi)工程中的“entry src main js default pages first first.js”, 導(dǎo)入router模塊,頁(yè)面路由router根據(jù)頁(yè)面的uri來(lái)找到目標(biāo)頁(yè)面,從而實(shí)現(xiàn)跳轉(zhuǎn)。示例代碼如下:
2 打開(kāi)或者切換到first.visual頁(yè)面,選中畫布上的Button組件,點(diǎn)擊右側(cè)屬性樣式欄中的事件圖標(biāo)(Events),鼠標(biāo)點(diǎn)擊Click事件的輸入框,選擇launch事件
3 在預(yù)覽窗口中查看項(xiàng)目效果,點(diǎn)擊Next按鈕后發(fā)現(xiàn)我們的頁(yè)面成功跳轉(zhuǎn)了。
到此,本章的目標(biāo)就完成了。
之前測(cè)試過(guò)使用華為DevEco開(kāi)發(fā)智能電視應(yīng)用。前幾天華為發(fā)布了手機(jī)的測(cè)試版,不能免俗,抓緊嘗試一下。
手頭沒(méi)有華為手機(jī)測(cè)試系統(tǒng),現(xiàn)在試一下開(kāi)發(fā)環(huán)境跑模擬器感受一下。
以前DevEco里是沒(méi)有手機(jī)選項(xiàng)的,現(xiàn)在該選項(xiàng)可以看到了:
這里測(cè)試一下Business Card Ability(Java)開(kāi)發(fā)。
DevEco和Android Studio一樣基于開(kāi)源的Idea版本開(kāi)發(fā)的,其結(jié)構(gòu)與安卓開(kāi)發(fā)環(huán)境非常像,熟悉安卓的小伙伴應(yīng)該能很快上手。
入口程序是一個(gè)MyApplication,從AbilityPackage繼承。
它首先找到了連接的榮耀手機(jī),但這個(gè)手機(jī)不是鴻蒙系統(tǒng)。
編譯是成功了,但提示設(shè)備無(wú)法使用:
點(diǎn)擊Tools - HVD Manager
首先提示登陸華為賬號(hào),登陸后,選擇一個(gè)模擬器運(yùn)行:
啟動(dòng)以后長(zhǎng)這個(gè)樣:
點(diǎn)擊設(shè)置,先看看關(guān)于:
上面顯示大大的HarmonyOS。但感覺(jué)畫面很模糊,不知道模擬器到底是運(yùn)行在本地的,還是云端的。但DevEco上顯示是Remote Device字樣。
鴻蒙OS版本號(hào) 2.0.0 Developer Beta1。
再點(diǎn)運(yùn)行,在指定的模擬器上運(yùn)行程序。
不過(guò)仍然運(yùn)行失?。?/p>
鴻蒙OS版本與平板是一致的,
程序終于跑起來(lái)了:
看起來(lái)安卓程序好像真能在鴻蒙直接運(yùn)行,安裝一個(gè)快手試試:
還真能看:
我真分不清這是安卓還是鴻蒙了 。
參考 鴻蒙官方文檔(點(diǎn)擊傳送門) ,做一下流程梳理簡(jiǎn)化,及踩坑記錄
華為將真機(jī)調(diào)試分成物理真機(jī)和遠(yuǎn)程真機(jī)。這里說(shuō)的都是物理真機(jī)(手機(jī)、平板)。鴻蒙真機(jī)調(diào)試巨復(fù)雜,不像Android那么容易方便。
貼一下官方的調(diào)試流程圖:
總結(jié)一下:
上面這個(gè)流程可以忽略,沒(méi)講到重點(diǎn)。真機(jī)調(diào)試是需要在 ? AppGallery Connect 中創(chuàng)建應(yīng)用的,調(diào)試應(yīng)用需要的cer和p7b文件是從這里生成的。
先決條件:
1. 鴻蒙手機(jī)通過(guò)USB連接電腦,并開(kāi)啟USB調(diào)試。
2. 一個(gè)華為開(kāi)發(fā)者賬號(hào),實(shí)名認(rèn)證
3. APP開(kāi)發(fā)工具DevEco-Studio
關(guān)鍵流程:
1. Studio創(chuàng)建應(yīng)用
2. 如果未登錄過(guò),F(xiàn)ile Project Structure Project Signing Configs簽名配置頁(yè),點(diǎn)擊“Sign In”
3. AppGallery創(chuàng)建應(yīng)用(包名和Studio創(chuàng)建的一樣)
4. 官方文檔到這在簽名配置頁(yè)就點(diǎn)Try Again可以自動(dòng)簽名,我試了不行,以下全是手動(dòng)
5. Studio中Build Generate key and CSR? ?生成p12和csr文件
6. 獲取手機(jī)udid,命令行hdc shell bm get -udid(下一步設(shè)備管理要用)
7. AppGallery主頁(yè) 用戶與訪問(wèn) 左側(cè)設(shè)備管理添加udid的設(shè)備(生成p7b時(shí)要用)
8. AppGallery主頁(yè) 用戶與訪問(wèn) 左側(cè)證書管理生成cer文件(生成p7b和簽名配置要用)
9. AppGallery主頁(yè) 我的項(xiàng)目 左側(cè)HarmonyOS應(yīng)用 HAP provision profile,生成p7b文件
10. 最后在簽名配置頁(yè)配好 p12、p7b、cer等參數(shù),運(yùn)行鴻蒙應(yīng)用到真機(jī)就行了