往期知识点整理
介绍
本例介绍各种应用登录页面。
- 全屏登录页面:在主页面点击跳转到全屏登录页后,显示全屏模态页面,全屏模态页面从下方滑出并覆盖整个屏幕,模态页面内容自定义,此处分为默认一键登录方式和其他登录方式。
效果图预览
使用说明
- 点击主页面按钮"点击跳转到全屏登录页",显示全屏模态页面。
- 不选中"阅读并同意服务协议及个人信息处理规则",点击一键登录,提示"请先阅读并同意协议";选中则提示"登录成功"。
- 点击左下方"其他登录方式",页面中显示其他登录方式页面。
- 在手机号输入框输入11位数字后,“发送短信验证码"按钮由灰变蓝,选中"阅读并同意服务协议及个人信息处理规则”,点击"发送短信验证码"按钮,提示"验证码已发送"。
- 点击左上角返回图标回到一键登录页面,再次点击返回图标收起模态页面。
实现思路
本例涉及的关键特性和实现方案如下:
- 通过 bindContentCover 组件绑定全屏模态页面,模态页面内容通过@Builder装饰器 自定义。
Button($r('app.string.full_screen_modal_login_description'))
.fontColor(Color.White)
.borderRadius($r('app.integer.border_radius'))
.type(ButtonType.Normal)
.backgroundColor($r('app.color.grey_2'))
.width($r('app.string.size_full'))
.bindContentCover(this.isPresent, this.loginBuilder)
.onClick(() => {
this.isPresent = true;
})
- 模态页面显示后,默认展示一键登录页面。页面需要在一个模态页面中切换,此处使用if进行条件渲染。
if (this.isDefaultLogin) {
// 默认一键登录方式
...
} else {
// 其他登录方式
OtherWaysToLogin()
.transition(this.effect)
}
- 点击其他登录方式,切换过程涉及到组件的显示和消失,使用 transition 属性设置出现或消失转场。
OtherWaysToLogin()
.transition(this.effect)
- 通过Stack组件,两个页面共用一个返回图标。
Stack() {
Image($r('app.media.arrow_back')) // 通过Stack组件,两个页面只实现一个back
.width($r('app.integer.height_twenty_five')).height($r('app.integer.height_twenty_five'))
.margin({ top: $r('app.integer.margin_mid') })
.onClick(() => {
if (this.isDefaultLogin) {
this.isPresentInLoginView = false;
} else {
this.isDefaultLogin = true
}
})
}
高性能知识点
不涉及。
工程结构&模块类型
modalwindow // har包
|---model
| |---DefaultLogin.ets // 默认一键登录页面
| |---OtherWaysToLogin.ets // 其他登录方式页面
|---ModalWindow.ets // 主页面,提供登录类型选项
模块依赖
不涉及。
最后
总是有很多小伙伴反馈说:鸿蒙开发不知道学习哪些技术?不知道需要重点掌握哪些鸿蒙开发知识点? 为了解决大家这些学习烦恼。在这准备了一份很实用的鸿蒙全栈开发学习路线与学习文档给大家用来跟着学习。
针对一些列因素,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线,包含了鸿蒙开发必掌握的核心知识要点,内容有(OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植……等)技术知识点。
《鸿蒙 (Harmony OS)开发学习手册》(共计892页):https://gitcode.com/HarmonyOS_MN/733GH/overview
如何快速入门?
1.基本概念
2.构建第一个ArkTS应用
3.……
鸿蒙开发面试真题(含参考答案):
《OpenHarmony源码解析》:
- 搭建开发环境
- Windows 开发环境的搭建
- Ubuntu 开发环境搭建
- Linux 与 Windows 之间的文件共享
- ……
- 系统架构分析
- 构建子系统
- 启动流程
- 子系统
- 分布式任务调度子系统
- 分布式通信子系统
- 驱动子系统
- ……