功能強(qiáng)大易用的HarmonyOS移動(dòng)應(yīng)用開(kāi)發(fā)工具對(duì)HarmonyOS系統(tǒng)的發(fā)展至關(guān)重要，3.0 Beta1版本的DevEco Studio已經(jīng)支持通過(guò)可視化布局編輯器構(gòu)建界面，功能越來(lái)越齊全和穩(wěn)定。

本章為HarmonyOS移動(dòng)應(yīng)用開(kāi)發(fā)的第二章，主要介紹DevEco Studio開(kāi)發(fā)環(huán)境搭建、低代碼開(kāi)發(fā)以及一個(gè)HarmonyOS應(yīng)用從開(kāi)發(fā)到上架的全過(guò)程。

本章節(jié)目標(biāo)

• 了解DevEco Studio的特性；
• 創(chuàng)建第一個(gè)程序Hello World；
• 掌握界面低代碼開(kāi)發(fā)方式；
• 掌握應(yīng)用開(kāi)發(fā)，編譯，調(diào)試和上架方法

一、DevEco基本特性

主要功能

HUAWEI DevEco Studio（以下簡(jiǎn)稱(chēng)DevEco Studio）是基于IntelliJ IDEA Community開(kāi)源版本打造，面向華為終端全場(chǎng)景多設(shè)備的一站式集成開(kāi)發(fā)環(huán)境（IDE），為開(kāi)發(fā)者提供 工程模板創(chuàng)建、開(kāi)發(fā)、編譯、調(diào)試、發(fā)布等端到端的HarmonyOS應(yīng)用開(kāi)發(fā)服務(wù)。通過(guò)使用DevEco Studio，開(kāi)發(fā)者可以更高效的開(kāi)發(fā)具備HarmonyOS分布式能力的應(yīng)用，進(jìn)而提升創(chuàng)新效率

基本特性

• 多設(shè)備統(tǒng)一開(kāi)發(fā)環(huán)境：支持多種HarmonyOS設(shè)備的應(yīng)用開(kāi)發(fā)，包括手機(jī)（Phone）、平 板（Tablet）、車(chē)機(jī)（Car）、智慧屏（TV）、智能穿戴（Wearable），輕量級(jí)智能穿 戴（LiteWearable）和智慧視覺(jué)（Smart Vision）設(shè)備。
• 支持多語(yǔ)言的代碼開(kāi)發(fā)和調(diào)試：包括Java、XML（Extensible Markup Language）、 C/C++ 、 JS（JavaScript）、CSS（Cascading Style Sheets）和HML（HarmonyOS Markup Language）。
• 支持 FA（Feature Ability）和 PA（Particle Ability）快速開(kāi)發(fā)：通過(guò)工程向?qū)Э焖賱?chuàng) 建FA/PA工程模板，一鍵式打包成HAP（HarmonyOS Ability Package）。
• 支持分布式多端應(yīng)用開(kāi)發(fā)：一個(gè)工程和一份代碼可跨設(shè)備運(yùn)行，支持不同設(shè)備界面的實(shí) 時(shí)預(yù)覽和差異化開(kāi)發(fā)，實(shí)現(xiàn)代碼的最大化重用。
• 支持多設(shè)備模擬器：提供多設(shè)備的模擬器資源，包括手機(jī)、平板、車(chē)機(jī)、智慧屏、智能 穿戴設(shè)備的模擬器，方便開(kāi)發(fā)者高效調(diào)試。
• 支持多設(shè)備預(yù)覽器：提供JS和Java預(yù)覽器功能，可以實(shí)時(shí)查看應(yīng)用的布局效果，支持實(shí)時(shí)預(yù)覽和動(dòng)態(tài)預(yù)覽；同時(shí)還支持多設(shè)備同時(shí)預(yù)覽，查看同一個(gè)布局文件在不同設(shè)備上的 呈現(xiàn)效果

應(yīng)用開(kāi)發(fā)流程

二、安裝過(guò)程

搭建開(kāi)發(fā)環(huán)境流程

下載和安裝Node.js

Node.js應(yīng)用于開(kāi)發(fā)JS應(yīng)用和運(yùn)行預(yù)覽器功能，是開(kāi)發(fā)HarmonyOS應(yīng)用過(guò)程中必備的軟 件。

下載和安裝DevEco Studio

• DevEco Studio的編譯構(gòu)建依賴(lài)JDK，DevEco Studio預(yù)置了Open JDK，版本為1.8，安裝 過(guò)程中會(huì)自動(dòng)安裝JDK。
• 如果要下載DevEco Studio，需要先登錄HarmonysOS應(yīng)用開(kāi)發(fā)門(mén)戶(hù)，點(diǎn)擊右上角注冊(cè)按 鈕，注冊(cè)開(kāi)發(fā)者帳號(hào)。如果已有華為開(kāi)發(fā)者聯(lián)盟帳號(hào)，請(qǐng)直接點(diǎn)擊登錄按鈕。

配置開(kāi)發(fā)環(huán)境

• npm設(shè)置
• 設(shè)置Gradle代理
• 設(shè)置DevEco Studio代理
• 下載HarmonyOS SDK

網(wǎng)絡(luò)設(shè)置

DevEco Studio開(kāi)發(fā)環(huán)境需要依賴(lài)于網(wǎng)絡(luò)環(huán)境，需要連接上網(wǎng)絡(luò)才能確保工具的正常使用， 可以根據(jù)如下兩種情況來(lái)配置開(kāi)發(fā)環(huán)境：

• 如果可以直接訪(fǎng)問(wèn)Internet，只需進(jìn)行設(shè)置npm倉(cāng)庫(kù)和下載HarmonyOS SDK操作。

• 如果網(wǎng)絡(luò)不能直接訪(fǎng)問(wèn)Internet，需要通過(guò)代理服務(wù)器才可以訪(fǎng)問(wèn)。

  

設(shè)置npm倉(cāng)庫(kù)

為了提升下載JS SDK時(shí)，使用npm安裝JS依賴(lài)的速度，建議在命令行工具中執(zhí)行如下命 令，重新設(shè)置npm倉(cāng)庫(kù)地址。

• npm config set registry https://mirrors.huaweicloud.com/repository/npm/

三、Gradle的作用

設(shè)置Gradle代理

• Gradle是一個(gè)基于Apache Ant和Apache Maven概念的項(xiàng)目自動(dòng)化構(gòu)建開(kāi)源工具。它使 用一種基于Groovy的特定領(lǐng)域語(yǔ)言(DSL)來(lái)聲明項(xiàng)目設(shè)置，拋棄了基于XML的各種繁瑣 配置。
• 面向Java應(yīng)用為主。當(dāng)前其支持的語(yǔ)言限于Java、Groovy、Kotlin和Scala，計(jì)劃未來(lái)將 支持更多的語(yǔ)言。

Gradle主要依賴(lài)部件

項(xiàng)目自動(dòng)化

• 在我們開(kāi)發(fā)軟件時(shí)，會(huì)面臨相似的情況就是，我們需要去用IDE來(lái)進(jìn)行編碼，當(dāng)完成一些功能時(shí)會(huì)進(jìn)行編譯、單元測(cè)試、打包等工作，這些工作都需要開(kāi)發(fā)人員手動(dòng)來(lái)實(shí)現(xiàn)。而 一般的軟件都是迭代式開(kāi)發(fā)的，一個(gè)版本接著一本版本，每個(gè)版本又可能有很多的功能， 如果開(kāi)發(fā)每次實(shí)現(xiàn)功能時(shí)都需要手動(dòng)的進(jìn)行編譯、單元測(cè)試和打包等工作，那顯然會(huì)非 常耗時(shí)而且也容易出現(xiàn)問(wèn)題，因此項(xiàng)目自動(dòng)化應(yīng)運(yùn)而生
• 項(xiàng)目自動(dòng)化的優(yōu)點(diǎn)
  • 它可以盡量防止開(kāi)發(fā)手動(dòng)介入從而節(jié)省了開(kāi)發(fā)的時(shí)間并減少錯(cuò)誤的發(fā)生。
  • 自動(dòng)化可以自定義有序的步驟來(lái)完成代碼的編譯、測(cè)試和打包等工作，讓重復(fù)的步驟變 得簡(jiǎn)單。
  • IDE可能受到不同操作系統(tǒng)的限制，而自動(dòng)化構(gòu)建是不會(huì)依賴(lài)于特定的操作系統(tǒng)和IDE的， 具有平臺(tái)無(wú)關(guān)性

構(gòu)建工具

構(gòu)建工具用于實(shí)現(xiàn)項(xiàng)目自動(dòng)化，是一種可編程的工具，你可以用代碼來(lái)控制構(gòu)建流程最終生成可交付的軟件。構(gòu)建工具可以幫助你創(chuàng)建一個(gè)重復(fù)的、可靠的、無(wú)需手動(dòng)介入的、 不依賴(lài)于特定操作系統(tǒng)和IDE的構(gòu)建

Android項(xiàng)目APK構(gòu)建過(guò)程

HarmonyOS項(xiàng)目中的Gradle

• 工程Project 中的 build.gradle : 工程控制Gradle編譯配置；
• 模塊module中的 build.gradle ： 控制每個(gè)Module的編譯過(guò)程；
• gradle.properties : gradle動(dòng)態(tài)參數(shù)的配置文件；
• local.properties ： 本地的配置，如：SDK位置；
• gradle-wrapper.properties ：gradle本地代理，聲明了指向目錄和版本；
• distributionUrl : 指定gradle版本不存在時(shí)，就從Value的地址中去下載。很多時(shí)候，我 們只要版本換成我們本地存在的gradle版本就可以了；
• settings.gradle ： 配置Gradle中的Module管理。

設(shè)置Gradle代理

• 如果網(wǎng)絡(luò)不能直接訪(fǎng)問(wèn)Internet，而是需要通過(guò)代理服務(wù)器才可以訪(fǎng)問(wèn)，這種情況下，需 要設(shè)置Gradle代理，來(lái)訪(fǎng)問(wèn)和下載Gradle所需的依賴(lài)。
  • 打開(kāi)“此電腦”，在文件夾地址欄中輸入%userprofile%（Mac系統(tǒng)請(qǐng)點(diǎn)擊前往 > 個(gè)人）， 進(jìn)入個(gè)人用戶(hù)界面；
  • 創(chuàng)建一個(gè)文件夾，命名為.gradle；
  • 進(jìn)入.gradle文件夾，新建一個(gè)文本文檔，命名為gradle，并修改后綴為.properties；
  • 打開(kāi)gradle.properties文件中，添加代理需要的腳本

設(shè)置DevEco Studio代理

四Hello World創(chuàng)建

創(chuàng)建和運(yùn)行Hello World

項(xiàng)目配置

項(xiàng)目啟動(dòng)

• 系統(tǒng)自動(dòng)下載Gradle；

• 在DevEco Studio菜單欄，點(diǎn)擊Tools > Device Manager。首次使用模擬器，需下載模擬器相關(guān)資源；

  

• 選擇第二個(gè)remote emulator，點(diǎn)擊sign in(登錄)，在瀏覽器中彈出華為開(kāi)發(fā)者聯(lián)盟帳號(hào)登錄界面，請(qǐng)輸入已實(shí)名認(rèn)證的華為開(kāi)發(fā)者聯(lián)盟帳號(hào)的用戶(hù)名和密碼進(jìn)行登錄

  • local emulator： 本地模擬器
  • remote emulator： 遠(yuǎn)程模擬器（云端）
  • remote decice： 遠(yuǎn)程設(shè)備 （云端）

項(xiàng)目運(yùn)行

五、JS項(xiàng)目基本結(jié)構(gòu)

JS項(xiàng)目目錄結(jié)構(gòu)

項(xiàng)目文件解析

• .gradle：Gradle配置文件，由系統(tǒng)自動(dòng)生成，一般情況下不需要進(jìn)行修改。

• entry：默認(rèn)啟動(dòng)模塊（主模塊），開(kāi)發(fā)者用于編寫(xiě)源碼文件以及開(kāi)發(fā)資源文件的目錄。

• entry>libs：用于存放entry模塊的依賴(lài)文件；

• entry>src>main>Java：用于存放Java源碼；

• entry>src>main>resources：用于存放應(yīng)用所用到的資源文件，如圖形、多媒體、字符串、布 局文件等

頁(yè)面文件解析

• js>defalut>common目錄：可選，用于存放公共資源文件，如媒體資源、自定義組件和 JS文檔等；
• js>defalut>i18n目錄：可選，用于存放多語(yǔ)言的json文件，可以在該目錄下定義應(yīng)用在 不同語(yǔ)言系統(tǒng)下顯示的內(nèi)容，如應(yīng)用文本詞條、圖片路徑等；
• js>defalut>resources：可選，用于存放資源配置文件，比如：全局樣式、多分辨率加載 等配置文件；
• js>defalut>app.js文件：全局的JavaScript邏輯文件和應(yīng)用的生命周期管理。

pages目錄結(jié)構(gòu)

• pages目錄：pages文件夾下可以包含1個(gè)或多個(gè)頁(yè)面，每個(gè)頁(yè)面都需要?jiǎng)?chuàng)建一個(gè)文件夾 （如圖中的index）。頁(yè)面文件夾下主要包含3種文件類(lèi)型：.css、.js和.hml文件；
• pages>index>index.hml文件：hml文件定義了頁(yè)面的布局結(jié)構(gòu)，使用到的組件，以及這 些組件的層級(jí)關(guān)系；
• pages>index>index.css文件：css文件定義了頁(yè)面的樣式與布局，包含樣式選擇器和各種 樣式屬性等；
• pages>index>index.js文件：js文件描述了頁(yè)面的行為邏輯，此文件里定義了頁(yè)面里所用 到的邏輯關(guān)系，比如數(shù)據(jù)、事件等。

支持的設(shè)備模板和編程語(yǔ)言

JS Component和JS Page

• JS Component：在JS工程中，可以存在多個(gè)JS Component（例如js目錄下的default文件夾就是一個(gè)JS Component），一個(gè)JS FA對(duì)應(yīng)一個(gè)JS Component，可以獨(dú)立編譯、運(yùn)行 和調(diào)試。
• JS Page：Page是表示JS FA的一個(gè)前臺(tái)頁(yè)面，由.js、.hml和.css文件組成，是Component 的最基本單元，構(gòu)成了JS FA的每一個(gè)界面

定義HarmonyOS IDL接口

• HarmonyOS Interface Definition Language（簡(jiǎn)稱(chēng)HarmonyOS IDL）是HarmonyOS的接口描述語(yǔ)言。HarmonyOS IDL與其他接口語(yǔ)言類(lèi)似，通過(guò)HarmonyOS IDL定義客戶(hù)端與服務(wù)端均認(rèn)可的編程接口，可以實(shí)現(xiàn)在二者間的跨進(jìn)程通信（IPC，Inter-Process Communication）?？邕M(jìn)程通信意味著我們可以在一個(gè)進(jìn)程訪(fǎng)問(wèn)另一個(gè)進(jìn)程的數(shù)據(jù)，或 調(diào)用另一個(gè)進(jìn)程的方法。
• 通常我們把應(yīng)用接口提供方（供調(diào)用）稱(chēng)為服務(wù)端，調(diào)用方稱(chēng)為客戶(hù)端?？蛻?hù)端通過(guò)綁定服務(wù)端的Ability來(lái)與之進(jìn)行交互，類(lèi)似于綁定服務(wù)

六、低代碼開(kāi)發(fā)

低代碼開(kāi)發(fā)

• HarmonyOS低代碼開(kāi)發(fā)方式，具有豐富的UI界面編輯功能，遵循HarmonyOS JS開(kāi)發(fā)規(guī) 范，通過(guò)可視化界面開(kāi)發(fā)方式快速構(gòu)建布局，可有效降低用戶(hù)的時(shí)間成本和提升用戶(hù)構(gòu) 建UI界面的效率

低代碼主界面

新建JS Visual

低代碼目錄結(jié)構(gòu)

七、HarmonyOS App真機(jī)運(yùn)行和上架

真機(jī)設(shè)備調(diào)試運(yùn)行

? 通過(guò)DevEco Studio在真機(jī)設(shè)備上調(diào)試HarmonyOS應(yīng)用時(shí)，可以自動(dòng)生成調(diào)試證書(shū)和 Profile文件，并對(duì)HAP進(jìn)行簽名后才能在真機(jī)設(shè)備上運(yùn)行（在Smart Vision設(shè)備除外）。 在真機(jī)設(shè)備上調(diào)試應(yīng)用的流程如下所示

自動(dòng)簽名

應(yīng)用發(fā)布

• 發(fā)布流程
• 準(zhǔn)備簽名文件
• 配置簽名信息
• 編譯構(gòu)建APP
• 發(fā)布APP到華為應(yīng)用市場(chǎng)

詳細(xì)步驟

八、總結(jié)

• 本章介紹了DevEco Stduio開(kāi)發(fā)工具的特性
• 使用它來(lái)開(kāi)發(fā)HarmonyOS APP的關(guān)鍵步驟，包括環(huán)境搭建、代碼編寫(xiě)、編輯構(gòu)建、應(yīng)用調(diào)試和應(yīng)用發(fā)布等。
• 其中輔助編譯構(gòu)建的項(xiàng)目自動(dòng)化管理工具Gradle的使用是本章難點(diǎn)。
• 此外，使用DevEco Stduio的新特性-低代碼開(kāi)發(fā)模式來(lái)快速構(gòu)建APP前端的方法在本章中
  也有描述

BQH1-1641895980275)]

詳細(xì)步驟

[外鏈圖片轉(zhuǎn)存中…(img-6nhwTWSP-1641895980276)]文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-490603.html

八、總結(jié)

• 本章介紹了DevEco Stduio開(kāi)發(fā)工具的特性
• 使用它來(lái)開(kāi)發(fā)HarmonyOS APP的關(guān)鍵步驟，包括環(huán)境搭建、代碼編寫(xiě)、編輯構(gòu)建、應(yīng)用調(diào)試和應(yīng)用發(fā)布等。
• 其中輔助編譯構(gòu)建的項(xiàng)目自動(dòng)化管理工具Gradle的使用是本章難點(diǎn)。
• 此外，使用DevEco Stduio的新特性-低代碼開(kāi)發(fā)模式來(lái)快速構(gòu)建APP前端的方法在本章中
  也有描述

到了這里，關(guān)于CH2-開(kāi)發(fā)工具DevEco Studio的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！