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小时内删除侵权内容。