「鴻蒙開發 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按鈕后發現我們的頁面成功跳轉了。

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

harmonyos應用開發環境搭建,不需要我們手動下載安裝的

harmonyos應用開發環境搭建，是需要我們手動下載安裝的。

1、在手機應用商店里面搜索進行下載。

2、點擊安裝即可，HarmonyOS（鴻蒙）提供了支持多種開發語言的API，供開發者進行應用開發。

華為手機鴻蒙系統怎么安裝

首先，您需要了解升級Harmony OS前的準備工作：

1.升級前，請確保設備沒有被Root，并預留10G以上的內部 存儲空間。

2.進入華為應用市場，搜索我的華為，將我的華為應用更新到最新版本。

請提前備份好數據（第三方通訊類應用需單獨備份），并確保設備已經升級到基線版本。不同產品升級基線版本的方法不同，建議您 兩種方法都嘗試下。

方法一：您可以在設置 系統和更新 軟件更新檢查版本并升級到最新版本。

方法二：您可以打開我的華為服務中搜索升級嘗鮮進行升級。

做好準備工作后，您即可通過以下兩種方式完成系統升級：

方法一：通過Harmony OS 公測活動完成系統升級：

打開我的華為升級嘗鮮公測嘗鮮立即嘗鮮，找到對應機型公測活動帖，了解公測活動參與流程、適配機型與基線版本、注意事項。

點擊參加公測活動，閱讀華為公測協議、隱私聲明并同意。然后下載描述文件并安裝成功。若所持機型不適配當前的公測活動，點擊“下載描述文件”將提示“描述文件無效，安裝終止。

進入“設置 系統和更新 軟件更新”下載安裝公測版本，升級體驗。

方法二：通過HarmonyOS 內測活動來完成系統升級：

打開我的華為花粉俱樂部內測報名立即報名，根據提示填寫正確的報名信息，提交 報名信息后彈出“您的內測申請成功，請等待管理員審核”視為報名信息填寫成功。如果點擊立即報名提示“您使用的機型暫無內測活動，感謝您的關注。”說明您的設備當前沒有正在進行中的內測活動，或者報名使用的華為賬號已經在其他設備上報名，其他設備審核通過后該賬號即可重新申請報名。如您報名成功，審核通過后即可在“設置 系統和更新 軟件更新”中檢測到HarmonyOS更新。

如果提交信息后發現填寫錯誤，可通過我的華為花粉俱樂部內測報名我的內測，對報名信息進行修改。