鸿蒙期末项目（1）

第一步-编写欢迎界面

欢迎界面一共分为3页，分别介绍软件的3个特点，考虑使用一个页面中的tabs组件实现

第一步，创建WelcomeScrollCard，WelcomeCardFirst，WelcomeCardSecond，WelcomeCardThird 三个组件

其中WelcomeScrollCard组件中使用 tabs组件和TabContent组件实现滚动效果，并形成如下层级关系：

为了能够实时预览页面制作的效果，可以先将WelcomeScrollCard组件默认导出后加载到Index.ets中

为了更加美观，可以添加一个表示下标的组件来指示用户现在在欢迎页面的第几页

TypeScript 复制代码

indexNumber: number;
// 注意下标从 0 开始
indexNow: number;
@State indexAll: boolean[] = [];

aboutToAppear() {
    for (let index = 0; index < this.indexNumber; index++) {
        if(index === this.indexNow) {
            this.indexAll.push(true);
        } else {
            this.indexAll.push(false);
        }
    }
}

该组件需要传入两个参数indexNumber以及indexNow，分别用来指明下标的数量和当前的下标，随后声明周期函数abouttoappear会读取这两个值并产生一个数组用于生成元素。

TypeScript 复制代码

Row({ space: 5 }) {
    ForEach(this.indexAll, (item) => {
        if(item) {
            Row()
                .width(45)
                .height(17)
                .borderRadius(20)
                .backgroundColor('#fbc955')
                .borderStyle(BorderStyle.Solid)
                .borderColor('#fbc955')
        } else {
            Row()
                .width(20)
                .height(17)
                .borderRadius(20)
                .backgroundColor('#fff')
                .borderStyle(BorderStyle.Solid)
                .borderColor('#fbc955')
                .borderWidth(3)
        }
    })
}

随后对使用文字和组件以及图片丰富欢迎界面卡片

目前的页面是这个样子，随后更换介绍文字和图片布局另外两个卡片（代码截图略）

同时为最后一个页面加入按钮和跳转事件

TypeScript 复制代码

Button('GET START')
    .startButtonStyle()
    .onClick(() => {
    // todo router to loginPage
})

此时，欢迎界面的构建大致完成，开始编写登入界面的代码

（后话）当登入界面的代码编写完成后，返回欢迎界面加入路由代码

复制代码

Button('GET START')
    .startButtonStyle()
    .onClick(() => {
    router.replaceUrl({
        url: 'pages/LoginPage',
    })
})

编写登入界面

登入界面需要两个按钮，分别对应两种操作：根据已有账号登入，以及新用户注册

页面设计的大题思路是，当用户选择其中之一时，从底部弹出相应的窗口对应各自的操作，因此考虑使用stack布局，选择操作的界面置于最底部，弹出的窗口将覆盖于其上。使用响应式变量page表示当前所处的状态：0-待选，1-登入，2-注册

将state以Link形式传入三个子组件中，当state的值发生改变时，就能相应做出改变。

TypeScript 复制代码

@State page: number = 0;

Stack() {
    QueryView({ page: $page })

    if(this.page === 1) {
        RegisterView({ page: $page })
    } else if(this.page === 2) {
        LoginView({ page: $page })
    }
}

最底部的QueryView界面中设置按钮

TypeScript 复制代码

Button(LoginConstant.loginText)
    .loginButton()
    .onClick(() => {
    this.page = 1;
})

Button(LoginConstant.regText)
    .regButton()
    .onClick(() => {
    this.page = 2;
})

同时在LoginView与RegisterView中设置Later返回按钮，当点击时，改变page的值为0，即可显示最底层的QueryView

此时遇到了一个小问题

当我这么编写的时候

TypeScript 复制代码

if(this.page === 1) {
    LoginView({ page: $page })
}

当this.page变为0时，RegisterView组件并不会消失，而当我改用如下写法时

TypeScript 复制代码

isLogin() {
    return this.page === 1;
}
    
if(this.isLogin()) {
    LoginView({ page: $page })
}

却神奇地正常工作了，暂未想到原因

小插曲结束了，继续来编写登入和注册卡片，登入和注册界面就是简单的两个输入框和一个按钮即可

以注册页面为例

TypeScript 复制代码

Column() {
    Column({ space: 10 }) {
        Row() {
            Text('Later')
                .fontColor('#7c7b80')
                .fontSize(25)
                .onClick(() => {
                this.page = 0;
            })
        }.header()

        Text('Create an account')
            .fontSize(26)
            .fontWeight(FontWeight.Bold)
            .margin({ top: 36 })

        TextInput({ placeholder: 'Email Address'})
            .TextInputStyle(InputType.Email)
            .margin({ top: 40 })

        TextInput({ placeholder: 'Password'})
            .TextInputStyle(InputType.Password)

        Button('Create an Account')
            .regButton()

        Text('Already have a account?')
            .noteText()
            .onClick(() => {
            this.page = 2;
        })

        Divider()
            .width('90%')
            .backgroundColor('#ededed')
            .height(1)
            .margin({ top: 20 })
    }.card()
}.screen()

按钮点击后提示注册成功，并跳转登入界面，由于登入所需账号密码的数据库还未建立，目前设置点击登入按钮就成功。

为注册按钮设置事件

TypeScript 复制代码

Button('Create an Account')
    .regButton()
    .onClick(() => {
    promptAction.showDialog({
        message: 'create successfully',
        buttons: [
            {
                text: 'Cancel',
                color: '#555'
            },
            {
                text: 'Next step',
                color: '#fbc956'
            }
        ]
    }, (error, data) => {
        if(error) {
            this.page = 0;
        } else {
            this.page = data.index
        }
    })
})

点击Next step后即可跳转登入页面，接下来创建app首页MainPage，并为登入按钮添加路由跳转事件

TypeScript 复制代码

Button('LogIn')
    .regButton()
    .onClick(() => {
    router.replaceUrl({
        url: 'pages/MainPage',
    })
})

注意如果上面的 url 你写的是路径，比如../../pages/MainPage 这样子会报错

因为这个url表示的并不是这个文件在你项目中的相对定位，而是你资源目录中resources\base\profile\main_pages.json中的内容，每次创建新的 page 时就会自动更新这个文件中的内容。