HarmonyOSNext模块化计划实践：打造简洁高效的登录注册页面 ...

涉及知识点和装饰器

• @ComponentV2，@Local， @Builder，@Extend， @Event，!!双向绑定，@Require ，@Param，preferences首选项
  

先上结果图

完备代码

登录页

1. import { Route } from '@hzw/zrouter'
2. import { CommonConst, NavName } from 'utils'
3. import { ToastUtil } from '@pura/harmony-utils'
4. import { SwitchLoginTypeComp } from '../components/SwitchLoginTypeComp'
5. import { LoginService } from '../service/LoginService'
6. import json from '@ohos.util.json'
8. @Preview
9. @ComponentV2
10. @Route({ name: NavName.LOGIN_VIEW, description: '登录/注册页' })
11. export struct LoginView {
12.   @Local account: string = '' //  用户名
13.   @Local password: string = '' // 密码
14.   @Local isLogin: boolean = true // 登录注册切换
18.   aboutToAppear(): void {
19.     // console.log(`xxx ： ---` + 'LoginView')
20.     // console.log(`xxx获取参数 ： ---` + ZRouter.getInstance().getParamByName(NavName.LOGIN_VIEW).toString())
22.   }
24.   build() {
25.     NavDestination() {
26.       Column() {
27.         this.headBuilder()
28.        // 登录，注册页面
29.         SwitchLoginTypeComp({
30.           changeFactory: (account: string, password: string, isLogin: boolean) => {
31.             console.log(`xxx ： ---account--` + account + '，password--' + password + '，isLogin--' + isLogin)
32.             this.account = account
33.             this.password = password
34.             this.loadNet()
35.           }
36.         })
39.       }.width(CommonConst.FULL_PARENT)
40.       .height(CommonConst.FULL_PARENT)
41.     }
42.     .hideTitleBar(true)
43.     .backgroundColor($r('app.color.white'))
44.     .width(CommonConst.FULL_PARENT)
45.     .height(CommonConst.FULL_PARENT)
47.   }
49.   async loadNet() {
50.     let login = await LoginService.login({
51.       'username': this.account,
52.       'password': this.password
53.     })
54.     console.log('xxxlogin--' + '' + json.stringify(login))
55.     if (login.data?.getSuccess()) {
57.       console.log('xxxxxdata参数--' + '' + json.stringify(login.data.getData()))
58.     } else {
59.       console.log('xxx--' + login.data?.getMsg())
60.       ToastUtil.showToast(login.data?.getMsg())
61.     }
62.   }
64.   /** 头部 */
65.   @Builder
66.   headBuilder() {
67.     Stack({ alignContent: Alignment.Top }) {
68.       Text()
69.         .width(CommonConst.FULL_PARENT)
70.         .height(250)
71.         .backgroundColor($r('app.color.colorPrimary'))
72.       Text()
73.         .width(CommonConst.FULL_PARENT)
74.         .height(100)
75.         .backgroundColor(Color.White)
76.         .borderRadius(50)
77.         .margin({ top: 210 })
79.       Image($r('app.media.ic_close'))
80.         .width(20)
81.         .height(20)
82.         .position({ x: 20, y: 20 })
83.         .onClick(() => {
84.           ToastUtil.showToast('关闭')
85.         })
87.       Column({ space: 7 }) {
88.         Image($r('app.media.startIcon')).width(100).height(100)
89.         Text('欢迎使用').fontSize(22).fontColor($r('app.color.white')).fontWeight(FontWeight.Bold)
90.         Text('本APP由JasonYin独立开发').fontSize(12).fontColor($r('app.color.white'))
91.       }.margin({ top: 44 })
92.     }.width(CommonConst.FULL_PARENT)
94.   }
95. }

复制代码

登录/注册页面自界说组件

1. import { ToastUtil } from '@pura/harmony-utils'
2. import { CommonConst } from "utils"
3. import { ProtocolComp } from "./ProtocolComp"
5. @Extend(TextInput)
6. function inputStyle() {
7.   .height(44)
8.   .fontColor($r('app.color.color_222222'))
9.   .fontSize(16)
10.   .placeholderColor($r('app.color.color_999999'))
11.   .placeholderFont({ size: 16 })
12.   .backgroundColor($r('app.color.white'))
13.   .caretColor($r('app.color.colorPrimary'))
14.   .padding({ left: 8 })
15. }
17. @Extend(Divider)
18. function dividerStyle() {
19.   .strokeWidth(1)
20.   .color($r('app.color.color_F0F0F0'))
21.   .padding({ left: 60, right: 60 })
23. }
25. /**
26. * Author:J
27. * Describe: 登录，注册页面
28. */
29. @ComponentV2
30. export struct SwitchLoginTypeComp {
31.   @Local account: string = '鸿蒙屌爆了' //  用户名
32.   @Local password: string = '123456' // 密码
33.   @Local confirmPassword: string = '' // 确认密码
34.   @Local isLogin: boolean = true // 登录注册切换
35.   @Local selectProtocol: boolean = false; //是否勾选协议
36.   @Local confirm: boolean = false; //是否弹窗协议
37.   @Event changeFactory: (account: string, password: string, isLogin: boolean) => void = () => {
38.   }
40.   build() {
41.     Column() {
42.       Text() {
43.         ImageSpan($r('app.media.ic_next'))
44.           .width(15)
45.           .colorBlend($r('app.color.colorPrimary'))
46.           .rotate({ angle: 180 })
47.           .margin({ right: 8, bottom: 2 })
48.           .visibility(this.isLogin ? Visibility.Hidden : Visibility.Visible)
49.         Span(this.isLogin ? '去注册' : '去登录')
50.         ImageSpan($r('app.media.ic_next'))
51.           .width(15).colorBlend($r('app.color.colorPrimary'))
52.           .margin({ left: 8, bottom: 2 })
53.           .visibility(this.isLogin ? Visibility.Visible : Visibility.Hidden)
54.       }
55.       .fontSize(15)
56.       .fontColor($r('app.color.colorPrimary'))
57.       .onClick(() => {
58.         this.isLogin = !this.isLogin
59.         this.account = ''
60.         this.password = ''
61.         this.confirmPassword = ''
62.       })
64.       Row() {
65.         Image($r('app.media.ic_account_normal')).width(24).height(24)
66.         TextInput({ placeholder: '请输入用户名', text: `${this.account}` })
67.           .inputStyle()
68.           .onChange((value: string) => {
69.             this.account = value
70.           })
71.         Image($r('app.media.ic_delete')).width(14).height(14)
72.           .visibility(this.account.length > 0 ? Visibility.Visible : Visibility.None)
73.           .onClick(() => {
74.             this.account = ''
75.           })
76.       }.width(CommonConst.FULL_PARENT).height(44).padding({ left: 60, right: 100 }).margin({ top: 40 })
78.       Divider().dividerStyle()
80.       Row() {
81.         Image($r('app.media.ic_password_normal')).width(24).height(24)
82.         TextInput({ placeholder: '请输入密码', text: `${this.password}` })
83.           .inputStyle()
84.           .type(InputType.Password)
85.           .onChange((value: string) => {
86.             this.password = value
87.           })
88.       }.width(CommonConst.FULL_PARENT).height(44).padding({ left: 60, right: 60 })
90.       Divider().dividerStyle()
92.       Row() {
93.         Image($r('app.media.ic_password_normal')).width(24).height(24)
94.         TextInput({ placeholder: '请确认密码', text: `${this.confirmPassword}` })
95.           .inputStyle()
96.           .type(InputType.Password)
97.           .onChange((value: string) => {
98.             this.confirmPassword = value
99.           })
100.       }
101.       .width(CommonConst.FULL_PARENT)
102.       .height(44)
103.       .padding({ left: 60, right: 60 })
104.       .visibility(this.isLogin ? Visibility.None : Visibility.Visible)
106.       Divider().dividerStyle()
107.       // 协议相关
108.       ProtocolComp({ selectProtocol: this.selectProtocol!!, confirm: this.confirm!! })
111.       Button(this.isLogin ? '登录' : '注册')
112.         .width('80%')
113.         .height(44)
114.         .fontSize(15)
115.         .fontColor($r('app.color.white'))
116.         .backgroundColor($r('app.color.colorPrimary'))
117.         .margin({ top: 31 })
118.         .enabled(this.account.length > 0 && this.password.length > 0)
119.         .onClick(() => {
120.           if (!this.isLogin && this.password != this.confirmPassword) {
121.             ToastUtil.showToast('两次密码不一致')
122.             return
123.           }
124.           if (!this.selectProtocol) {
125.             // ToastUtil.showToast('' + '请勾选协议')
126.             this.confirm = !this.selectProtocol
127.             return
128.           }
129.           this.changeFactory(this.account, this.password, this.isLogin)
130.         })
133.     }
134.     .width(CommonConst.FULL_PARENT)
135.     .margin({ top: -80 })
137.   }
138. }

复制代码

用户协议、隐私政策相关

1. import { ToastUtil } from '@pura/harmony-utils'
2. import { CommonConst } from "utils";
4. /**
5. * Author:J
6. * Describe:协议
7. */
8. @ComponentV2
9. export struct ProtocolComp {
10.   @Require @Param selectProtocol: boolean=false //是否勾选协议
11.   @Event $selectProtocol: (val: boolean) => void = () => {
12.   }
13.   @Require @Param confirm: boolean=false //是否弹窗协议
14.   @Event $confirm: (val: boolean) => void = () => {
15.   }
17.   build() {
18.     Column() {
19.       Row() {
20.         Checkbox()
21.           .select(this.selectProtocol)
22.           .selectedColor($r('app.color.colorPrimary'))
23.           .onChange((value: boolean) => {
24.             this.$selectProtocol(value)
25.             //协议不选中,不赋值confirm
26.             if (!value) {
27.               return
28.             }
29.             this.$confirm(!value)
30.           })
31.         Text() {
32.           span('登录即表示您已同意我们的 ', $r('app.color.color_999999'))
33.           span('《隐私政策》', $r('app.color.colorPrimary'), 1, true)
34.           span('、', $r('app.color.color_999999'))
35.           span('《用户服务协议》', $r('app.color.colorPrimary'), 2, true)
36.           span('、', $r('app.color.color_999999'))
37.           span('《服务条款》', $r('app.color.colorPrimary'), 3, true)
38.         }
39.       }
40.       .justifyContent(FlexAlign.Start)
41.       .alignItems(VerticalAlign.Top)
42.       .margin({ top: 14, right: 30 })
44.       // 若没有勾选协议，则会出现提示文本：“请阅读并勾选协议”
45.       if (this.confirm) {
46.         Row() {
47.           Column() {
48.             Image($r('app.media.login_popup'))
49.               .width(10)
50.               .height(10)
51.               .position({ x: 7, y: 1 })
52.               .opacity(0.8)
54.             Text('请阅读并勾选协议')
55.               .fontColor($r('app.color.white'))
56.               .fontSize(10)
57.               .textAlign(TextAlign.Center)
58.               .backgroundColor($r('app.color.black'))
59.               .width(100)
60.               .height(20)
61.               .position({ x: 3, y: 9 })
62.               .borderRadius(4)
63.               .opacity(0.8)
64.           }
65.           .width(100)
66.           .height(30)
67.         }
68.         .height(30)
69.         .width('100%')
70.       }
73.     }.width(CommonConst.FULL_PARENT)
74.     .height(50)
75.     .padding({ left: 60, right: 60 })
77.   }
78. }
81. @Builder
82. function span(value: string | Resource, fontColor: ResourceColor, k: number = 0, isClick: boolean = false) {
83.   Span(value)
84.     .fontColor(fontColor)
85.     .fontSize(12)
86.     .onClick(() => {
87.       if (!isClick) {
88.         return
89.       }
90.       ToastUtil.showToast(`我要进web页面了k：${value}=====值：${k}`)
91.     })
92. }

复制代码

使用首选项存储用户信息到本地

1. // 存
2. PreferencesUtil.put(PreferencesConst.KEY_LOGIN_USER_BEAN, JSONUtil.beanToJsonStr(login.data?.getData()))
3. // 取
4. let user = await PreferencesUtil.getString(PreferencesConst.KEY_LOGIN_USER_BEAN)
5. let userBean = JSONUtil.jsonToBean(UserLoginBean, user)

复制代码

以往系列文章

• 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 模块化底子篇》
  
• 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建底子特性层》
  
• 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— 构建公共能力层》
  
• 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 —— Tabs底部导航栏》
  
• 《探索 HarmonyOS NEXT (5.0)：开启构建模块化项目架构奇幻之旅 —— 动态路由 ZRouter：引领高效模块通讯的智慧中枢》
  
• 《探索 HarmonyOS NEXT(5.0)：开启构建模块化项目架构奇幻之旅 ——第三方库的使用：网络哀求RCP、二次封装上下拉革新、弹窗》
  
• HarmonyOS NEXT：模块化项目 ——修改应用图标+启动页等
  

若本文对您稍有资助，诚望您不吝点赞，多谢。
有兴趣的同砚可以点击检察源码

• gitee：https://gitee.com/jiaojiaoone/explore-harmony-next/tree/case%2Fwanandroid/
  
• github：https://github.com/JasonYinH/ExploreHarmonyNext.git
  

接待加我微信一起交换：+V：yinshiyuba


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。