華為鴻蒙手機應用開發上手體驗

之前測試過使用華為DevEco開發智能電視應用。前幾天華為發布了手機的測試版，不能免俗，抓緊嘗試一下。

太平ssl適用于網站、小程序/APP、API接口等需要進行數據傳輸應用場景，ssl證書未來市場廣闊！成為成都創新互聯公司的ssl證書銷售渠道，可以享受市場價格4-6折優惠！如果有意向歡迎電話聯系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

手頭沒有華為手機測試系統，現在試一下開發環境跑模擬器感受一下。

以前DevEco里是沒有手機選項的，現在該選項可以看到了：

這里測試一下Business Card Ability(Java)開發。

DevEco和Android Studio一樣基于開源的Idea版本開發的，其結構與安卓開發環境非常像，熟悉安卓的小伙伴應該能很快上手。

入口程序是一個MyApplication，從AbilityPackage繼承。

它首先找到了連接的榮耀手機，但這個手機不是鴻蒙系統。

編譯是成功了，但提示設備無法使用：

點擊Tools - HVD Manager

首先提示登陸華為賬號，登陸后，選擇一個模擬器運行：

啟動以后長這個樣：

點擊設置，先看看關于：

上面顯示大大的HarmonyOS。但感覺畫面很模糊，不知道模擬器到底是運行在本地的，還是云端的。但DevEco上顯示是Remote Device字樣。

鴻蒙OS版本號 2.0.0 Developer Beta1。

再點運行，在指定的模擬器上運行程序。

不過仍然運行失敗：

鴻蒙OS版本與平板是一致的，

程序終于跑起來了：

看起來安卓程序好像真能在鴻蒙直接運行，安裝一個快手試試：

還真能看：

我真分不清這是安卓還是鴻蒙了 。

華為手機如何開啟鴻蒙系統？

華為手機開啟鴻蒙系統需要安裝更新，操作方法如下：

設備：華為榮耀10

系統：EMUI10.0.0.175

軟件：我的華為10.0.10

1、在手機中打開我的華為。

2、點擊進入鴻蒙系統公測。

3、查看升級機型，點擊參加公測。

4、點擊參加公測。

5、點擊下載描述文件。

6、進入軟件更新，點擊新版本進行更新即可（更新之后即可成為鴻蒙系統）。

「鴻蒙開發 3」華為鴻蒙應用開發的低代碼（Super Visual）開發方式

開發前可以了解下鴻蒙： [鴻蒙開發 序]華為鴻蒙操作系統（HarmonyOS）簡介及開發環境搭建

開發前的準備：「鴻蒙開發 1」華為鴻蒙應用集成開發環境DevEco Studio安裝和設置

了解鴻蒙應用開發的基本開發流程：「鴻蒙開發 2」第一個華為鴻蒙（HarmonyOS）應用程序（App）

本章目標：

1 了解華為鴻蒙應用開發的可視化（低代碼）方式

2 通過構建一個簡單的具有頁面跳轉功能的應用

低代碼開發方式，即通過可視化界面開發方式快速構建布局、編輯UI界面，可有效降低用戶的上手成本并提升用戶構建UI界面的效率。

1 打開DevEco Studio，創建一個新工程，選擇支持Phone / Tablet / Wearable（手機 / 平板 / s可穿戴）的模板，我們在此直接選擇Empty Ability

Project name工程名稱填SuperVisual

Development mode開發方式選擇Super Visual

其它的可以使用默認設置，點擊完成，進入編輯界面

1 在Project（項目）窗口，刪除工程運行默認的入口文件夾：“entry src main js default pages index”文件夾

2 在Project窗口，選擇工程中的“entry src main js default pages”，單擊鼠標右鍵，選擇“New JS Visual”

JS visual name填first，點擊完成，進入編輯界面

創建完成后，可以看到“entry src main supervisual default pages page page.visual”的文件目錄結構

3 第一個頁面內有一個容器、文本和一個按鈕，通過Div、Text和Button組件來實現

（1）分別選中first.visual畫面中的Text、Div組件，單擊鼠標右鍵，選擇Delete刪除

（2）選中UI Control中的Div組件，將其拖至畫布

點擊右側屬性樣式欄中的通用樣式圖標（General），設置Div組件的高度Height為100%，使其占滿屏幕

點擊右側屬性樣式欄中的樣式圖標（Flex），設置Div組件的FlexDirection樣式為column，使Div的主軸垂直；設置Div組件的JustifyContent樣式為center，使得其子組件在主軸上居中顯示；設置Div組件的AlignItems樣式為center，使得其子組件在交叉軸上居中顯示

（3）選中UI Control中的Text組件，將其拖至Div組件的中央區域

點擊右側屬性樣式欄中的屬性圖標（Properties），設置Text組件的Content屬性為 “ Hello World ”

點擊右側屬性樣式欄中的通用樣式圖標（General），設置Text組件的寬（width）為100%，高（height）為100px

點擊右側屬性樣式欄中的樣式圖標（Feature），設置組件的FontSize樣式為60px，使得其文字放大；設置組件的TextAlign樣式為center，使得組件文字居中顯示

（4）選中UI Control中的Button組件，將其拖至Text組件下面

點擊右側屬性樣式欄中的屬性圖標（Properties），設置Button組件的Value屬性為 “ Next ”，

點擊右側屬性樣式欄中的通用樣式圖標（General），設置按的寬（width）為40%，高（height）為60px

點擊右側屬性樣式欄中的樣式圖標（Feature），設置組件的FontSize樣式為40px

至此，第一個頁面創建完成

我們可以在預覽窗口中看效果，點擊右側邊欄的Preview打開預覽窗口

1 在Project窗口，選擇工程中的“entry src main js default pages”，單擊鼠標右鍵，選擇“New JS Visual”

Visual配置界面，JS visual name填second，回車（Enter鍵）或者點擊完成，進入編輯界面

2 第二個頁面中有一個容器和文本，通過Div、Text組件實現，現在編輯器已經為我們創建好了，我們就來修改下它們的屬性（你也可以刪除原有的自己創建，具體步驟參考本章第二節“二 創建第一個頁面”）。

選中Text組件，點擊右側屬性樣式欄中的屬性圖標（Properties），設置Text組件的Content屬性為 “ Hi，I'm always here. ”

點擊右側屬性樣式欄中的通用圖標（General），設置組件的寬（width）為100%，高為60px

點擊右側屬性樣式欄中的樣式圖標（Feature），設置組件的FontSize樣式為36px，TextAlign樣式為center

這樣我們的第二個頁面創建成功了

1 在Project窗口，打開工程中的“entry src main js default pages first first.js”， 導入router模塊，頁面路由router根據頁面的uri來找到目標頁面，從而實現跳轉。示例代碼如下：

2 打開或者切換到first.visual頁面，選中畫布上的Button組件，點擊右側屬性樣式欄中的事件圖標（Events），鼠標點擊Click事件的輸入框，選擇launch事件

3 在預覽窗口中查看項目效果，點擊Next按鈕后發現我們的頁面成功跳轉了。

到此，本章的目標就完成了。

網站題目：初次上手開發華為鴻蒙,華為鴻蒙系統開發教程
網頁地址：http://m.newbst.com/article8/dssigop.html

成都網站建設公司_創新互聯，為您提供品牌網站制作、電子商務、企業建站、關鍵詞優化、建站公司、軟件開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯