鴻蒙初體驗(yàn)（一）：從安裝到第一個程序Hello HarmonyOS

小嵌 · 發(fā)表于 2020-12-21 15:56:19

鴻蒙初體驗(yàn)（一）：從安裝到第一個程序Hello HarmonyOS, 華為鴻蒙OS 2.0就不多介紹了

更多關(guān)于JS API的寫法可以參考：

鴻蒙初體驗(yàn)（二）：使用JS FA應(yīng)用的chart組件畫一個簡單線性圖

鴻蒙初體驗(yàn)（三）：使用JS FA應(yīng)用寫一個簡單的猜數(shù)字游戲

一、源碼和應(yīng)用下載地址 鴻蒙的源碼地址： https://openharmony.gitee.com

華為開發(fā)者聯(lián)盟： https://developer.huawei.com/consumer/cn

官方文檔： https://developer.harmonyos.com/ ... ut-0000001050729536

開發(fā)應(yīng)用下載： https://developer.harmonyos.com/cn/develop/deveco-studio#download

二、安裝與運(yùn)行

1.運(yùn)行環(huán)境要求 DevEco Studio只支持Windows版本，為保證DevEco Studio正常運(yùn)行，建議您的電腦配置滿足如下要求：

操作系統(tǒng)：Windows10 64位
內(nèi)存：8GB及以上
硬盤：100gB及以上
分辨率：1280*800像素及以上

目前DevEco Studio 2.0才支持HarmonyOS開發(fā)，DevEco Studio 1.0暫不支持

2.下載和安裝Node.js Node.js軟件僅在使用到JS語言開發(fā)HarmonyOS應(yīng)用時才需要安裝。使用其它語言開發(fā)，不用安裝Node.js，請?zhí)^此章節(jié)。登錄Node.js官方網(wǎng)站，下載Node.js軟件包。請選擇LTS版本，Windows 64位對應(yīng)的軟件包。

點(diǎn)擊下載后的軟件包進(jìn)行安裝，全部按照默認(rèn)設(shè)置點(diǎn)擊Next，直至Finish。安裝過程中，Node.js會自動在系統(tǒng)的path環(huán)境變量中配置node.exe的目錄路徑。
3.安裝和運(yùn)行DevEco Studio 2.0 開發(fā)應(yīng)用下載：https://developer.harmonyos.com/cn/develop/deveco-studio#download DevEco Studio的編譯構(gòu)建依賴JDK，DevEco Studio預(yù)置了Open JDK，版本為1.8，安裝過程中會自動安裝JDK。
安裝完成啟動會提示下載SDK，點(diǎn)擊取消，搜索SDK，重新自定義SDK路徑。

三、第一個項(xiàng)目 Hello HarmonyOS

打開DevEco Studio，在歡迎頁點(diǎn)擊Create HarmonyOS Project，創(chuàng)建一個新工程。

可以看到這里有三種類型選擇，我們選擇TV版的Empty Feature Ability（Java），點(diǎn)擊Next。
填寫項(xiàng)目相關(guān)信息，保持默認(rèn)值即可，點(diǎn)擊Finish。
首次創(chuàng)建工程時，會自動下載Gradle工具（Gradle下載失敗如何解決?），時間較長，請耐心等待。
在DevEco Studio菜單欄，點(diǎn)擊Tools > HVD Manager。首次使用模擬器，需下載模擬器相關(guān)資源，請點(diǎn)擊OK，等待資源下載完成后，點(diǎn)擊模擬器界面左下角的Refresh按鈕。（查看使用遠(yuǎn)程模擬器的常見問題）

在瀏覽器中彈出華為帳號登錄界面，請輸入已實(shí)名認(rèn)證的華為帳號的用戶名和密碼進(jìn)行登錄。

推薦使用Chrome瀏覽器，如果使用Safari、360等其他瀏覽器，要取消阻止跨站跟蹤和阻止所有Cookie功能。

登錄后，請點(diǎn)擊界面的允許按鈕進(jìn)行授權(quán)。

運(yùn)行成功如上圖所示
三、我的第一個頁面 下面我們用XML的方式編寫了一個包含文本和按鈕的頁面。

在“Project”窗口，打開“entry > src > main > resources > base”，右鍵點(diǎn)擊“base”文件夾，選擇“New > Directory”，命名為“layout”。
右鍵點(diǎn)擊“l(fā)ayout”文件夾，選擇“New > File”，命名為“main_layout.xml”。
打開“main_layout.xml”文件，添加一個文本和一個按鈕，示例代碼如下：

<?xml version=“1.0“ encoding=“utf-8“?>
<DependentLayout
xmlns:ohos=“http://schemas.huawei.com/res/ohos“
ohos:width=“match_parent“
ohos:height=“match_parent“
ohos:background_element=“#ffffff“>
<Text
ohos:id=“$+id:text“
ohos:width=“match_content“
ohos:height=“match_content“
ohos:center_in_parent=“true“
ohos:text=“Hello HarmonyOS“
ohos:text_color=“#000000“
ohos:text_size=“32fp“/>
<Button
ohos:id=“$+id:button“
ohos:width=“match_content“
ohos:height=“match_content“
ohos:text_size=“19fp“
ohos:text=“進(jìn)入“
ohos:top_padding=“8vp“
ohos:bottom_padding=“8vp“
ohos:right_padding=“80vp“
ohos:left_padding=“80vp“
ohos:text_color=“white“
ohos:background_element=“$graphic:button_element“
ohos:center_in_parent=“true“
ohos:align_parent_bottom=“true“/>
</DependentLayout>

復(fù)制代碼

上述按鈕的背景是通過“button_element”來顯示的，需要在“base”目錄下創(chuàng)建“graphic”文件夾，在“graphic”文件夾中新建一個“button_element.xml”文件。

<?xml version=“1.0“ encoding=“utf-8“?>
<shape
xmlns:ohos=“http://schemas.huawei.com/res/ohos“
ohos:shape=“oval“>
<solid
ohos:color=“#007DFF“/>
</shape>

復(fù)制代碼

如果DevEco Studio提示xmlns字段錯誤，請忽略，不影響后續(xù)操作。

在“Project”窗口中，選擇“entry > src > main > java > com.example.helloworld > slice” ，打開“MainAbilitySlice.java”文件。重寫onStart（）方法加載XML布局，示例代碼如下：

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart（Intent intent） {
super.onStart（intent）;
super.setUIContent（ResourceTable.Layout_main_layout）; // 加載XML布局
}
@Override
public void onActive（） {
super.onActive（）;
}
@Override
public void onForeground（Intent intent） {
super.onForeground（intent）;
}
}

復(fù)制代碼

效果圖如下

四、我的第二個頁面 這里用創(chuàng)建布局的方式，來編寫我的第二個頁面。

在“Project”窗口，打開“entry > src > main > java”，右鍵點(diǎn)擊“com.example.myapplication”文件夾，選擇“New > Ability > Empty Feature Ability（Java）”。

配置Ability時，將“Page Name”設(shè)置為“SecondAbility”，點(diǎn)擊“Finish”。創(chuàng)建完成后，可以看到新增了“SecondAbility”和“SecondAbilitySlice”文件。

編寫SecondAbilitySlice文件

package com.example.myapplication.slice;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.DependentLayout;
import ohos.agp.components.DependentLayout.LayoutConfig;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_PARENT;
import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_CONTENT;
public class SecondAbilitySlice extends AbilitySlice {
@Override
public void onStart（Intent intent） {
super.onStart（intent）;
// 聲明布局
DependentLayout myLayout = new DependentLayout（this）;
// 設(shè)置布局大小
myLayout.setWidth（MATCH_PARENT）;
myLayout.setHeight（MATCH_PARENT）;
ShapeElement element = new ShapeElement（）;
element.setRgbColor（new RgbColor（255, 255, 255））;
myLayout.setBackground（element）;
// 創(chuàng)建一個文本
Text text = new Text（this）;
text.setText（“頁面跳轉(zhuǎn)成功“）;
text.setTextColor（Color.BLUE）;
text.setWidth（MATCH_PARENT）;
text.setTextSize（55）;
// 設(shè)置文本的布局
DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig（MATCH_CONTENT,MATCH_CONTENT）;
textConfig.addRule（LayoutConfig.CENTER_IN_PARENT）;
text.setLayoutConfig（textConfig）;
myLayout.addComponent（text）;
super.setUIContent（myLayout）;
}
@Override
public void onActive（） {
super.onActive（）;
}
@Override
public void onForeground（Intent intent） {
super.onForeground（intent）;
}
}

復(fù)制代碼

五、實(shí)現(xiàn)頁面跳轉(zhuǎn) 打開第一個頁面的“MainAbilitySlice.java”文件，重寫onStart（）方法添加按鈕的響應(yīng)邏輯，實(shí)現(xiàn)點(diǎn)擊按鈕跳轉(zhuǎn)到下一頁，示例代碼如下：

package com.example.myapplication.slice;
import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.aafwk.content.Operation;
import ohos.agp.components.*;
public class MainAbilitySlice extends AbilitySlice {
@Override
public void onStart（Intent intent） {
super.onStart（intent）;
super.setUIContent（ResourceTable.Layout_main_layout）;
Button button = （Button） findComponentById（ResourceTable.Id_button）;
if （button != null） {
// 為按鈕設(shè)置點(diǎn)擊回調(diào)
button.setClickedListener（new Component.ClickedListener（） {
@Override
public void onClick（Component component） {
Intent secondIntent = new Intent（）;
// 指定待啟動FA的bundleName和abilityName
Operation operation = new Intent.OperationBuilder（）
.withDeviceId（““）
.withBundleName（“com.example.myapplication“）
.withAbilityName（“com.example.myapplication.SecondAbility“）
.build（）;
secondIntent.setOperation（operation）;
startAbility（secondIntent）; // 通過AbilitySlice的startAbility接口實(shí)現(xiàn)啟動另一個頁面
}
}）;
}
}
@Override
public void onActive（） {
super.onActive（）;
}
@Override
public void onForeground（Intent intent） {
super.onForeground（intent）;
}
}

復(fù)制代碼

就可以通過點(diǎn)擊第一個頁面的“進(jìn)入”來到第二個頁面了
六、文檔學(xué)習(xí) 我們可以通過HarmonyOS的API文檔進(jìn)行學(xué)習(xí)和高效開發(fā)

這里以Java API為例，修改一下我的第二個頁面SecondAbilitySlice 進(jìn)入文檔，我們打開“Java API> ohos.agp.components> class> TickTimer” TickTimer顧名思義也就是計時器啦

往下滑可以看到他已經(jīng)實(shí)現(xiàn)的方法

修改SecondAbilitySlice

package com.example.myapplication.slice;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.DependentLayout;
import ohos.agp.components.DependentLayout.LayoutConfig;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_PARENT;
import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_CONTENT;
public class SecondAbilitySlice extends AbilitySlice {
@Override
public void onStart（Intent intent） {
super.onStart（intent）;
// 聲明布局
DependentLayout myLayout = new DependentLayout（this）;
// 設(shè)置布局大小
myLayout.setWidth（MATCH_PARENT）;
myLayout.setHeight（MATCH_PARENT）;
ShapeElement element = new ShapeElement（）;
element.setRgbColor（new RgbColor（255, 255, 255））;
myLayout.setBackground（element）;
// 創(chuàng)建一個文本
Text text = new Text（this）;
text.setText（“頁面跳轉(zhuǎn)成功“）;
text.setTextColor（Color.BLACK）;
text.setWidth（MATCH_PARENT）;
text.setTextSize（55）;
// 創(chuàng)建一個計時器
TickTimer tickTimer = new TickTimer（this）;
tickTimer.start（）;
// 設(shè)置文本的布局
DependentLayout.LayoutConfig textConfig = new DependentLayout.LayoutConfig（MATCH_CONTENT,MATCH_CONTENT）;
textConfig.addRule（LayoutConfig.ALIGN_PARENT_BOTTOM）;
text.setLayoutConfig（textConfig）;
myLayout.addComponent（text）;
// 設(shè)置計時器的布局
textConfig.addRule（LayoutConfig.CENTER_IN_PARENT）;
tickTimer.setLayoutConfig（textConfig）;
myLayout.addComponent（tickTimer）;
super.setUIContent（myLayout）;
}
@Override
public void onActive（） {
super.onActive（）;
}
@Override
public void onForeground（Intent intent） {
super.onForeground（intent）;
}
}

復(fù)制代碼

如果不熟悉Java寫法的可以從JS API開始更多關(guān)于JS API的寫法可以參考：

鴻蒙初體驗(yàn)（二）：使用JS FA應(yīng)用的chart組件畫一個簡單線性圖

鴻蒙初體驗(yàn)（三）：使用JS FA應(yīng)用寫一個簡單的猜數(shù)字游戲

官方文檔寫得很清楚，而且是中文的，學(xué)起來也很方便

七、總結(jié) HarmonyOS總體語法還是和安卓相似的，學(xué)習(xí)安卓的同學(xué)可以了解一下。

目前HarmonyOS應(yīng)用的領(lǐng)域還是TV端和Wearable端，聽過明年有希望安裝在華為手機(jī)上成為手機(jī)系統(tǒng)。

HarmonyOS2.0發(fā)布會指出HarmonyOS2.0擁有跨設(shè)備、服務(wù)流轉(zhuǎn)、極速直達(dá)、可視可說等特性。

發(fā)展趨勢毋庸置疑，還是5G和物聯(lián)網(wǎng)。

雖然目前鴻蒙OS2.0對比蘋果iOS和谷歌安卓還是略低一籌，也還沒應(yīng)用在手機(jī)端不過據(jù)說HarmonyOS2.0已經(jīng)達(dá)到安卓的70%到80%水平。

鴻蒙系統(tǒng)并不是基于安卓系統(tǒng)開發(fā)，而是一個全新、基于5G物聯(lián)網(wǎng)技術(shù)構(gòu)建獨(dú)立操作系統(tǒng)，并且還能兼容安卓，對安卓開發(fā)者也十分的和諧。

同時，谷歌正在開發(fā)自己的 fuchsia的新系統(tǒng)，也是應(yīng)用于5G和物聯(lián)網(wǎng)。

換言之，安卓是4G時代的產(chǎn)物，鴻蒙要對標(biāo)的不是安卓，而是同樣基于5G應(yīng)用和物聯(lián)網(wǎng)時代開發(fā)的谷歌 fuchsia系統(tǒng)。

1+8+n，萬物互聯(lián)，指日可待！

以上就是我這段時間的摸索過程，和所思所想，希望能幫助你了解HarmonyOS2.0，也歡迎感興趣的小伙伴一起交流學(xué)習(xí)。

文章轉(zhuǎn)自：文化沙漠麥七

鴻蒙初體驗(yàn)（一）：從安裝到第一個程序Hello HarmonyOS

發(fā)表回復(fù)

精選推薦