鸿蒙期末项目（1）

第一步-编写欢迎界面

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

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

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

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

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

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会读取这两个值并产生一个数组用于生成元素。

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)}})
}

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

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

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

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的值发生改变时，就能相应做出改变。

@State page: number = 0;

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

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

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

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

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

此时遇到了一个小问题

当我这么编写的时候

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

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

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

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

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

以注册页面为例

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()

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

为注册按钮设置事件

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，并为登入按钮添加路由跳转事件

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

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

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