在HarmonyOS手机初步实现注册登录功能

登录到鸿蒙-在HarmonyOS手机应用初步实现注册登录功能

1、 亮点说明

注册和登录是所有应用服务的一个基本功能模块，HarmonyOS基于设备的FA是通过统一调用华为的账户进行注册登录。那么其它独立的应用服务呢？我们觉得可能需要有自己的注册登录模块，所以就进行了初步的尝试。具体包括了注册、登录、登录后界面的策划设计。

注册包括用户名，密码，确认密码三个流程，密码现在是明码显示的方式，其中设置了确认密码正确与密码出错的情况。登录包括了用户名，密码两个流程，其中设置了密码错误提示和密码正确登录到一个指定的页面两种情况。

2、 开发过程与要点说明

首先我们创建一个项目

设置项目的名称和存储路径

我们可以通过修改config.json中的icon里面的路径，放上自己想展示的图片用来当做APP的小图标，如下图所示，以及展示效果。

接下里我们在xml文件中进行布局，这里我使用的是“DirectionalLayout”

布局方式进行布局。

DirectionalLayout中可以设置height，width，属性分为两种，一种是填充满整个父类（match_parent），一个是填充满整个内容（match_content），在这里还可以设置布局格式的布局方向，分为水平方向（horizontal）还是垂直方向（vertical），下面我们使用这个布局来进行登录页面的设置吧，代码如下。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical"
ohos:background_element="#87CEEB">
<Component ohos:height="300px"/>

<Text
ohos:height="match_content"
ohos:width="850px"
ohos:text="鸿蒙应用服务登录"
ohos:text_color="#000000"
ohos:layout_alignment="horizontal_center"
ohos:text_size="32fp"
ohos:left_margin="32px"
/>

<Text    ohos:text="用户名："
ohos:height="match_content"
ohos:width="250px"
ohos:text_size="24fp"
ohos:top_margin="100px"
ohos:left_margin="80px"
/>
<TextField  ohos:height="match_content"
ohos:width="600px"
ohos:hint="请输入用户名..."
ohos:background_element="#EAEDED"
ohos:layout_alignment="horizontal_center"
ohos:text_color="#708090"
ohos:text_size="18fp"
ohos:padding="30px"
ohos:top_margin="-95px"
ohos:left_margin="100px"
/>
<Text ohos:text="密 码："
ohos:height="match_content"
ohos:width="250px"
ohos:text_size="24fp"
ohos:top_margin="100px"
ohos:left_margin="80px"
/>
<TextField ohos:height="match_content"
ohos:width="600px"
ohos:hint="请输入密码..."
ohos:background_element="#EAEDED"
ohos:layout_alignment="horizontal_center"
ohos:text_color="#708090"
ohos:text_size="18fp"
ohos:padding="30px"
ohos:top_margin="-95px"
ohos:left_margin="100px"
/>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:orientation="horizontal"
ohos:left_margin="330px">
<Button
ohos:height="match_content"
ohos:width="match_content"
ohos:text="登录"
ohos:text_size="20fp"
ohos:padding="10vp"
ohos:text_color="#FFFFFF"
ohos:background_element="#0EAB8D"
ohos:layout_alignment="horizontal_center"/>

<Button ohos:height="match_content"
ohos:width="match_content"
ohos:text="注册"
ohos:text_size="20fp"
ohos:padding="10vp"
ohos:text_color="#FFFFFF"
ohos:background_element="#0EAB8D"
ohos:layout_alignment="horizontal_center"
ohos:left_margin="160px"/>

</DirectionalLayout>
</DirectionalLayout>

界面展示效果如图所示：

接下里我们设置注册界面，代码如下。

<?xml version="1.0" encoding="utf-8"?>

<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical"
ohos:background_element="#87CEEB">

<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">

<Text
ohos:text="鸿蒙应用服务注册"
ohos:width="match_parent"
ohos:height="match_content"
ohos:layout_alignment="horizontal_center"
ohos:text_size="32fp"
ohos:text_color="#000000"
ohos:text_alignment="center"
/>

</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">

<Text
ohos:text="用 户 名："
ohos:width="match_content"
ohos:height="match_content"
ohos:text_size="24fp"
ohos:left_margin="60px"
/>


<TextField
ohos:height="match_content"
ohos:width="600px"
ohos:hint="请输入用户名..."
ohos:background_element="#EAEDED"
ohos:layout_alignment="horizontal_center"
ohos:text_color="#708090"
ohos:text_size="18fp"
ohos:padding="30px"
ohos:top_margin="-110px"
ohos:left_margin="160px"
/>

</DirectionalLayout>

<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">

<Text
ohos:text="密 码："
ohos:width="match_content"
ohos:height="match_content"
ohos:text_size="24fp"
ohos:left_margin="60px"
/>

<TextField
ohos:height="match_content"
ohos:width="600px"
ohos:hint="请输入密码..."
ohos:background_element="#EAEDED"
ohos:layout_alignment="horizontal_center"
ohos:text_color="#708090"
ohos:text_size="18fp"
ohos:padding="30px"
ohos:top_margin="-110px"
ohos:left_margin="160px"
/>
</DirectionalLayout>

<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">

<Text
ohos:text="确认密码："
ohos:width="match_content"
ohos:height="match_content"
ohos:text_size="24fp"
ohos:left_margin="60px"
/>


<TextField
ohos:height="match_content"
ohos:width="600px"
ohos:hint="请再次输入密码..."
ohos:background_element="#EAEDED"
ohos:layout_alignment="horizontal_center"
ohos:text_color="#708090"
ohos:text_size="18fp"
ohos:padding="30px"
ohos:top_margin="-110px"
ohos:left_margin="160px"
/>

</DirectionalLayout>
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
ohos:orientation="horizontal"
ohos:left_margin="330px">

<Button
ohos:height="match_content"
ohos:width="match_content"
ohos:text="立即注册"
ohos:text_size="20fp"
ohos:padding="10vp"
ohos:text_color="#FFFFFF"
ohos:background_element="#0EAB8D"
ohos:layout_alignment="horizontal_center"
ohos:left_margin="160px"/>
</DirectionalLayout>
</DirectionalLayout>

首页的设置代码如下：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical"
ohos:background_element="#87CEEB">

<Text
ohos:width="350vp"
ohos:height="match_parent"
ohos:text="欢迎来到
鸿蒙时代
与鸿蒙世界，
开启分布式、全场景
应用服务新纪元！"
ohos:text_size="28fp"
ohos:text_color="#0000FF"
ohos:italic="true"
ohos:text_weight="700"
ohos:text_font="serif"
ohos:multiple_lines="true"
ohos:max_text_lines="3"
ohos:layout_alignment="horizontal_center"
ohos:text_alignment="center"
/>
</DirectionalLayout>

界面展示效果如图所示。

接下里我们这里需要实现的是登录，这里用的是模拟用户的登录，这边设置了一个固定的值进行登录，用户输入正确即可跳转到首页，失败则会给你一个提示，如图所示。

这里用户输入的用户名或密码有误会有一个提示。

输入正确则进行跳转，如下图所示。

这里是获取到输入框里面的值，并且对里面的值进行判断，是否这个值与你设置的用户名和密码相符，判断为true登陆成功，false提示用户用户名或者密码错误，实现代码如下。

public class MainAbilitySlice extends AbilitySlice {
private Button button1,button2;
private TextField text_name;
private TextField text_password;
@Override
public void onStart(Intent intent) {
   super.onStart(intent);
   super.setUIContent(ResourceTable.Layout_ability_main);
   button1 = (Button) findComponentById(ResourceTable.Id_login_btnzhuce);
   button2 = (Button) findComponentById(ResourceTable.Id_login_btn1);
   text_name = (TextField) findComponentById(ResourceTable.Id_text_name);
   text_password = (TextField) findComponentById(ResourceTable.Id_text_password);
}

private void zhuce(){
// 为按钮设置点击回调
button1.setClickedListener(new Component.ClickedListener() {

@Override
public void onClick(Component component) {
   if(button1!=null){
       present(new LoginAbilitySlice(),new Intent());
   }
}
});
};

private void login(){
button2.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
  if(button2!=null && name.equals("鸿蒙登录") && password.equals("2023")){
       present(new HomeAbilitySlice(),new Intent());
      new ToastDialog(context).setText("登录成功").show();
  }else {
      new ToastDialog(context).setText("用户名或密码有误请重新输入").show();
  }
}
});
};
}

注册界面也是相同获取注册界面的输入框里面的值，并且对里面的值进行一个判断，用户名，密码，确认密码，判断输入框里面的值是否完善，没有完善注册会给一个提示，密码和确认密码也有一个判断，如果密码不一致，注册也会给一个提示，如下图所示。

信息不完善提示：

密码不一致提示出错信息，输入正确信息跳转到登录界面：

实现代码如下：

public class LoginAbilitySlice extends AbilitySlice {
private Button button_zhuce;
private TextField name_zhuce,password_zhuce,password_queren;
private ResourceBundle bundle;

@Override
public void onStart(Intent intent) {
   super.onStart(intent);
   super.setUIContent(ResourceTable.Layout_ability_zhuce);
   name_zhuce = (TextField) findComponentById(ResourceTable.Id_name_zhuce);
   password_zhuce = (TextField) findComponentById(ResourceTable.Id_password_zhuce);
   button_zhuce = (Button) findComponentById(ResourceTable.Id_login_btn2);
   password_queren = (TextField) findComponentById(ResourceTable.Id_password_queren);
}
private void zhuce_login(){
// 为按钮设置点击回调
button_zhuce.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
if(!name.equals(null) && !name.equals("") && !password.equals(queren)){
     new ToastDialog(context).setText("密码不一致，请重新尝试！").show();
}else if (button_zhuce!=null && !name.equals(null)&& !name.equals("") && !password.equals(null) && !password.equals("") && password.equals(queren)){
      new ToastDialog(context).setText("注册成功！").show();
    present(new MainAbilitySlice(),new Intent());
}else{
    new ToastDialog(context).setText("请输入完整信息！").show();
}
}
});
};

}

以下无正文