HarmonyOS應用開發【登錄頁面跳轉示例】

1 HarmonyOS基礎概念

根據官方文檔上的說明，HarmonyOS的用戶應用程序包以APP Pack（Application Package）形式發布，它是由一個或多個HAP（HarmonyOS Ability Package）以及描述每個HAP屬性的pack.info組成。HAP是Ability的部署包，HarmonyOS應用代碼圍繞Ability組件展開。一個HAP是由代碼、資源、第三方庫及應用配置文件組成的模塊包，可分為entry和feature兩種模塊類型：

entry：應用的主模塊。一個APP中，對于同一設備類型必須有且只有一個entry類型的HAP，可獨立安裝運行。

feature：應用的動態特性模塊。一個APP可以包含一個或多個feature類型的HAP，也可以不含。只有包含Ability的HAP才能夠獨立運行。

另外，涉及如下的集中核心概念：

Ability ：是應用所具備的能力的抽象，一個應用可以包含一個或多個Ability。Ability分為兩種類型：FA（Feature Ability）和PA（Particle Ability）。FA/PA是應用的基本組成單元，能夠實現特定的業務功能。FA有UI界面，而PA無UI界面。

庫文件：是應用依賴的第三方代碼（例如so、jar、bin、har等二進制文件），存放在libs目錄。

資源文件：應用的資源文件（字符串、圖片、音頻等）存放于resources目錄下，便于開發者使用和維護。

配置文件 (config.json) ：是應用的Ability信息，用于聲明應用的Ability，以及應用所需權限等信息。

pack.info：描述應用軟件包中每個HAP的屬性，由IDE編譯生成，應用市場根據該文件進行拆包和HAP的分類存儲。

HAR：（HarmonyOS Ability Resources）可以提供構建應用所需的所有內容，包括源代碼、資源文件和config.json文件。HAR不同于HAP，HAR不能獨立安裝運行在設備上，只能作為應用模塊的依賴項被引用。

2 HarmonyOS快速入門

首先需要正確安裝最新版本的DevEco Studio工具并進行華為開發者賬號注冊并實名驗證，如果沒安裝，可參考之前的博客進行學習安裝。當開發環境配置完成后，用DevEco Studio工具創建一個新工程，設備類型以【Phone】為例，使用Java語言開發，模板選擇【Empty Feature Ability(Java)】。在Java UI框架中，提供了兩種編寫布局的方式：在XML中聲明UI布局和在代碼中創建布局。

在【Project】窗口，點擊【entry > src > main > resources > base > layout】，打開【ability_main.xml】文件。ability_main頁面內添加兩個文本和按鈕，通過Text和Button組件來實現，并使用DependentLayout布局，【ability_main.xml】頁面代碼如下：

其中聲明了兩個文本字段，一個表示用戶名，一個表示密碼，其中密碼用ohos:text_input_type="pattern_password"進行定義，而Button控件的UI樣式可以通過ohos:background_element="$graphic:background_button"來定義，這樣定義的樣式，可以在不同的Button實例中引用，非常方便。MainAbilitySlices是第一個加載的Ability，它是由MainAblility啟動的，MainAblility代碼示例如下所示：

package com.example.myhmos; import com.example.myhmos.slice.MainAbilitySlice; import ohos.aafwk.ability.Ability; import ohos.aafwk.content.Intent; public class MainAbility extends Ability { @Override public void onStart(Intent intent) { super.onStart(intent); super.setMainRoute(MainAbilitySlice.class.getName()); } }

而MainAbilitySlices文件要模擬的事情，就是用戶登錄，其示例代碼如下：

package com.example.myhmos.slice; import com.example.myhmos.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.*; import ohos.agp.components.element.FrameAnimationElement; import ohos.agp.components.element.ShapeElement; import ohos.agp.utils.Color; import ohos.agp.window.dialog.ToastDialog; import ohos.hiviewdfx.HiLog; import ohos.hiviewdfx.HiLogLabel; import okhttp3.Call; import okhttp3.OkHttpClient; import okhttp3.Request; import okhttp3.Response; //https://developer.harmonyos.com/cn/docs/documentation/doc-guides/start-overview-0000000000029602 //https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-animation-0000000000580278 public class MainAbilitySlice extends AbilitySlice { FrameAnimationElement frameAnimationElement; DirectionalLayout componentContainer ; @Override public void onStart(Intent intent) { super.onStart(intent); // 加載XML布局 super.setUIContent(ResourceTable.Layout_ability_main); if (componentContainer == null){ frameAnimationElement = new FrameAnimationElement(getContext(), ResourceTable.Graphic_animation_element); Component component = new Component(getContext()); component.setWidth(300); component.setHeight(300); component.setBackground(frameAnimationElement); componentContainer = (DirectionalLayout) findComponentById(ResourceTable.Id_frame_container); frameAnimationElement.start(); componentContainer.removeAllComponents(); componentContainer.addComponent(component); } // 點擊登錄 Button button = (Button) findComponentById(ResourceTable.Id_btn_login); button.setClickedListener((componentE -> { button.setEnabled(false); String uname =""; String upwd =""; TextField txt_username = (TextField) findComponentById(ResourceTable.Id_txt_username); if (txt_username != null){ uname = txt_username.getText().trim(); } TextField txt_pwd = (TextField) findComponentById(ResourceTable.Id_txt_upwd); if (txt_pwd != null){ upwd = txt_pwd.getText().trim(); } if ("admin".equals(uname) && "12345".equals(upwd)){ ToastDialog toastDialog = new ToastDialog(this); toastDialog.setText("登錄成功"); toastDialog.show(); // 點擊按鈕跳轉至第二個頁面 Intent intent2 = new Intent(); intent2.setParam("user",uname); present(new SecondAbilitySlice(), intent2); }else{ // 顯示TextField錯誤 ShapeElement errorElement = new ShapeElement(this, ResourceTable.Graphic_background_text_field_error); errorElement.setAlpha(120); txt_username.setBackground(errorElement); txt_username.setText(""); txt_username.setHint("密碼錯誤"); txt_username.setHintColor(Color.RED); txt_username.setHorizontalPadding(100,20); // TextField失焦 txt_username.clearFocus(); ToastDialog toastDialog = new ToastDialog(this); toastDialog.setText("登錄失敗"); toastDialog.show(); } button.setEnabled(true); })); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } }

此文件中，用FrameAnimationElement frameAnimationElement定義了一個可以用圖片驅動的動畫元素，這個示例也參考自官方的示例代碼。后續就是監聽按鈕單擊事件，并獲取用戶名控件和密碼控件的值，并在本地進行值驗證，當然了，實際項目則需要從數據庫中進行驗證，或者調用遠程API進行驗證。這里只是模擬，并說明如何在不同的頁面進行跳轉。核心代碼如下：

// 點擊按鈕跳轉至第二個頁面 Intent intent2 = new Intent(); intent2.setParam("user",uname); present(new SecondAbilitySlice(), intent2);

第二個頁面SecondAbilitySlice的UI代碼如下：

其邏輯非常簡單，就是獲取第一頁面傳遞過來的用戶名，并顯示，同時用按鈕可以返回第一頁。SecondAbilitySlice后臺代碼如下：

package com.example.myhmos.slice; import com.example.myhmos.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.colors.RgbColor; import ohos.agp.components.Button; import ohos.agp.components.DependentLayout; import ohos.agp.components.Text; import ohos.agp.components.element.ShapeElement; import ohos.agp.utils.Color; import ohos.agp.components.DependentLayout.LayoutConfig; import ohos.global.resource.Resource; public class SecondAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); // 加載XML布局 super.setUIContent(ResourceTable.Layout_ability_second); Button btnPre = (Button) findComponentById(ResourceTable.Id_btn_pre); // 點擊按鈕跳轉至第一個頁面 btnPre.setClickedListener(listener -> present(new MainAbilitySlice(), new Intent())); Text text = (Text) findComponentById(ResourceTable.Id_text_msg); if( text != null ){ text.setText(intent.getStringParam("user")); text.setTextColor(Color.RED); } } }

下面給出Text和Button定義的UI樣式，background_text_field_error.xml代碼如下：

background_button.xml代碼如下：

background_text_field.xml代碼如下：

動畫定義animation_element.xml代碼如下：

至此，本示例代碼的核心項目文件如下所示：

如果鴻蒙OS需要訪問網絡資源，那么config.json中需要設置，這里定義了網絡權限配置以及網絡訪問的設置。根據相關文檔說明，鴻蒙OS默認需要訪問https的網絡資源，如果需要訪問http的，同樣需要配置：

{ "app": { "bundleName": "com.example.myhmos", "vendor": "example", "version": { "code": 1000000, "name": "1.0.0" } }, "deviceConfig": { "default": { "network": { "cleartextTraffic": true, "securityConfig": { "domainSettings": { "cleartextPermitted": true, "domains": [ { "subdomains": true, "name": "192.168.0.107" }, { "subdomains": true, "name": "api.k780.com" } ] } } } } }, "module": { "reqPermissions": [{ "name": "ohos.permission.GET_NETWORK_INFO" },{ "name": "ohos.permission.SET_NETWORK_INFO" },{ "name": "ohos.permission.INTERNET" }], "package": "com.example.myhmos", "name": ".MyApplication", "mainAbility": "com.example.myhmos.MainAbility", "deviceType": [ "phone", "tablet" ], "distro": { "deliveryWithInstall": true, "moduleName": "entry", "moduleType": "entry", "installationFree": false }, "abilities": [ { "skills": [ { "entities": [ "entity.system.home" ], "actions": [ "action.system.home" ] } ], "orientation": "unspecified", "name": "com.example.myhmos.MainAbility", "icon": "$media:icon", "description": "$string:mainability_description", "label": "$string:app_Name", "type": "page", "launchType": "standard" } ] } }

運行此示例，則相關界面如下（圖片是一個動畫效果）：

當登錄信息錯誤時，會顯示紅色的提示，背景色也會變成淡紅色，如下圖所示：

登錄成功后，第二頁可以獲取第一頁傳遞的參數，并顯示，界面如下：

注意： 如果鴻蒙OS需要調用外部API，由于此是遠程模擬器，因此，本地開啟的API地址可能無法直接進行訪問，需要映射到公網IP才行。

Android Java

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。