> 文档中心 > HarmonyOS——编写简单的登录页面并实现跳转

HarmonyOS——编写简单的登录页面并实现跳转


登陆页面跳转案例

实现登陆页面

首先简单实现一个登录页面,在xml文件下编写布局如下所示

        ​    ​                ​                    ​    ​                ​                    ​    ​                                        ​​

界面如图所示

实现点击弹窗

new ToastDialog(LoginAbilitySlice.this).setText("点击了登录按钮").setDuration(2000).show();

点击登录按钮后如图所示

实现页面跳转功能

实现页面跳转的无参数传递

首先要明白页面之间交互的概念。交互的概念通俗来说就是有去有回,在函数中的体现是参数和返回值,那么在页面之间的交互就是页面1向页面2传递参数,然后在页面2中将参数接收。

intent可以起到纽带的作用,用于收放参数,参数以键值对的形式进行传递

在登录页面设置要传递的参数,以传递参数username为例

intent.setParam("username","user");//设置参数键值对present(new MainAbilitySlice(),intent);//将参数发送到MainAbilitySlice页面下

在主页面接收登录页面传递过来的参数,并以文本的形式显示

text = (Text) findComponentById(ResourceTable.Id_text);//获取文本组件String username = intent.getStringParam("username");//根据键username获取对应参数的值text.setText(username);//设置文本的值

测试,在登录页点击登录后跳转到主页面,如图所示

当需要进行多个页面的跳转的时候,就需要用presentForResult()方法进行参数的传递

其中requestCode的作用:当接受多个页面的返回值时用于区分接收到的返回值来自哪个页面

public static final int REQUEST_CODE_MAINABILITY = 1;//给主页面设置requestCode = 1presentForResult(new MainAbilitySlice(),intent,REQUEST_CODE_MAINABILITY);

给主页面设置点击事件,当点击文本时返回到登录页面

text.setText(username);text.setClickedListener(new Component.ClickedListener() {    @Override    public void onClick(Component component) { setResult(intent.setParam("result","我是Main页面返回值"));        terminate();//用于结束页面    }});

对setResult()方法的分析

可以看到,参数resultData是当页面被关闭时的返回数据。也可以主动调用terminate()方法直接关闭页面,此时resultData就会直接返回到调用者。

在登录页面接收回调,将返回值用弹窗的形式表现

@Overrideprotected void onResult(int requestCode, Intent resultIntent) {    super.onResult(requestCode, resultIntent);    if (requestCode == REQUEST_CODE_MAINABILITY) {        new ToastDialog(this).setText(resultIntent.getStringParam("result")).setDuration(2000).show();    }}

进行测试,结果如下

 

如果不使用纯Java开发,而是用Java + js混合开发时,js没有slice的概念,因此只能用ability之间的跳转

intent.setOperation(new Intent.OperationBuilder().withAbilityName(MainAbility2.class).withBundleName("com.example.class1").build());startAbility(intent);

其中bundleName的值可以在模块的config.json中找到

进行测试,点击登录后可以跳转到对应页面

尝试编写一个简单的登陆交互,当用户名和密码都为123456时登陆成功

在登陆页面编写如下

package com.example.logindemoforjava.slice;​import com.example.logindemoforjava.MainAbility2;import com.example.logindemoforjava.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.components.Button;import ohos.agp.components.Component;import ohos.agp.components.TextField;import ohos.agp.window.dialog.ToastDialog;import ohos.hiviewdfx.HiLog;import ohos.hiviewdfx.HiLogLabel;​public class LoginAbilitySlice extends AbilitySlice {    private static final HiLogLabel LABEL_LOG = new HiLogLabel(0,0,"MainAbility.class");    private Button btnlogin;    public static final int REQUEST_CODE_MAINABILITY = 1;    private TextField username;    private TextField password;​    @Override    public void onStart(Intent intent) {        super.onStart(intent);        super.setUIContent(ResourceTable.Layout_ability_login);        btnlogin = (Button) findComponentById(ResourceTable.Id_btnLogin);        username = (TextField) findComponentById(ResourceTable.Id_username);        password = (TextField) findComponentById(ResourceTable.Id_password);        btnlogin.setClickedListener(new Component.ClickedListener() {            @Override            public void onClick(Component component) {                HiLog.info(LABEL_LOG, "click");                if (username.getText().equals("123456") && password.getText().equals("123456")) {                    intent.setParam("tips","登陆成功");                    present(new MainAbilitySlice(), intent);                } else {                    new ToastDialog(LoginAbilitySlice.this).setText("登陆失败").setDuration(2000).show();                }            }        });    }​    @Override    public void onActive() {        super.onActive();    }​    @Override    public void onForeground(Intent intent) {        super.onForeground(intent);    }}

进行测试如下,当用户名密码都输入123456时登录成功

当用户名为1234567时登陆失败