鸿蒙期末作业记录1（登录页面记录）

写在开头

        最开始要让我写大作业的时候我不知道写什么，纠结是写老师给的案例，还是自己写一个，后来在网上找案例的时候发现有一个登录页面超级好看，我就想反正啥软件都得有个登录吧，我就先开始写的登录页面，后来下课的时候，我点开某江、某佩等软件要看小说的时候想要不就写一个这种类型的，所以就有了这个项目。

        实力不够，有很多不足。

登录页面的产生

 先看一下最终效果：

  

该页面总代码如下：

import router from '@ohos.router';

@Entry
@Component
struct Index {

  @State username: string = '';
  @State password: string = '';

  build() {
    Column() {
      Text('Welcome Back')
        .fontSize(30)
        .fontWeight(FontWeight.Bolder)
        .fontColor('#EA7293');
      Column() {
        TextInput({ placeholder: '请输入用户名' })
          .onChange((value: string) => {
            this.username = value;
          })
          .width('100%')
          .height('7%')
          .margin(20);
        TextInput({ placeholder: '输入密码' })
          .onChange((value: string) => {
            this.password = value;
          })
          .type(InputType.Password)
          .width('100%')
          .height('7%')
          .margin(20)
      }
      Column() {
        Button('login')
          .width('50%')
          .height('7%')
          .fontSize(20)
          .backgroundColor('#EA7293')
          .onClick(() => {
            this.onJumpClick();
          });
      }
      .padding(20)
      .width('100%');
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%');
  }

  onJumpClick(): void {
    router.replaceUrl({
      url: 'pages/MainPage',
      params: {
        username: this.username,
        password: this.password
      }
    }, router.RouterMode.Standard, (err) => {
      if (err) {
        console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
        return;
      }
      console.info('Invoke replaceUrl succeeded.');
    });
  }
}

        这些基本组件都很简单能写出来，写完以后我发现登录之后要把用户信息（登录名）之类的传过去吧，我就想到了用页面路由，当我点击登录按钮的时候，我要把参数传过去。所以我在Button组件上设置了点击事件，点击之后可以把这些信息传过去。

页面路由的代码：

onJumpClick(): void {
    router.replaceUrl({
      url: 'pages/MainPage',
      params: {
        username: this.username,
        password: this.password
      }
    }, router.RouterMode.Standard, (err) => {
      if (err) {
        console.error(`Invoke replaceUrl failed, code is ${err.code}, message is ${err.message}`);
        return;
      }
      console.info('Invoke replaceUrl succeeded.');
    });
  }

效果如下登陆后“我的页面”会接收参数

接收代码

 @State ID: string= router.getParams()?.['username'] as string;
 @State PAW:String=router.getParams()?.['password'] as  string;

该页面全部完成。

        其实这个界面最大的bug就是没有数据库，只是在button上加了一个页面路由，很荒谬，如果以后有时间会再加上。

总结        

嘻嘻。这篇就写到这了。