0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙注册登录页面的实现步骤

OpenHarmony技术社区 来源:HarmonyOS技术社区 作者:兮动人 2021-09-06 09:12 次阅读

注册登录页面

设置的要求如下:

新建项目:TextApplication

上面的数值单位都是 px ,所以要转换成 vp 和 fp

在 1920*1080 分辨率下,1px=1/3vp

P40:1080*2340 的分辨率跟上面的 1920*1080 差不多,所以就可以用1:3 的关系来转换

有关 px,vp,fp 三者的关系可以看看我之前写的博文:https://harmonyos.51cto.com/posts/7507

快速格式化页面对齐:Ctrl+Alt+L

ability_main:

《?xml version=“1.0” encoding=“utf-8”?》《DirectionalLayout

xmlns:ohos=“http://schemas.huawei.com/res/ohos”

ohos:height=“match_parent”

ohos:width=“match_parent”

ohos:background_element=“#F2F2F2”

ohos:orientation=“vertical”》

《Text

ohos:height=“50vp”

ohos:width=“319vp”

ohos:background_element=“#FFFFFF”

ohos:layout_alignment=“horizontal_center”

ohos:text=“请输入手机号”

ohos:text_alignment=“center”

ohos:text_color=“#999999”

ohos:text_size=“17fp”

ohos:top_margin=“100vp”

/》

《Text

ohos:height=“50vp”

ohos:width=“319vp”

ohos:background_element=“#FFFFFF”

ohos:layout_alignment=“horizontal_center”

ohos:text=“请输入密码”

ohos:text_alignment=“center”

ohos:text_color=“#999999”

ohos:text_size=“17fp”

ohos:top_margin=“10vp”

/》

《Text

ohos:height=“match_content”

ohos:width=“match_content”

ohos:layout_alignment=“right”

ohos:right_margin=“20vp”

ohos:text=“忘记密码了?”

ohos:text_color=“#979797”

ohos:text_size=“17fp”

ohos:top_margin=“13vp”/》

《Button

ohos:height=“47vp”

ohos:width=“319vp”

ohos:background_element=“#21a8fd”

ohos:layout_alignment=“horizontal_center”

ohos:text=“登录”

ohos:text_alignment=“center”

ohos:text_color=“#FEFEFE”

ohos:text_size=“24fp”

ohos:top_margin=“77vp”

/》

《Button

ohos:height=“47vp”

ohos:width=“319vp”

ohos:background_element=“#21a8fd”

ohos:layout_alignment=“horizontal_center”

ohos:text=“注册”

ohos:text_alignment=“center”

ohos:text_color=“#FEFEFE”

ohos:text_size=“24fp”

ohos:top_margin=“13vp”

/》《/DirectionalLayout》

运行:

修改密码页面

设置的要求如下:

右击 layout 创建第二个页面:

把启动页面设置为第二个页面

second_ability:

《?xml version=“1.0” encoding=“utf-8”?》《DirectionalLayout

xmlns:ohos=“http://schemas.huawei.com/res/ohos”

ohos:height=“match_parent”

ohos:width=“match_parent”

ohos:background_element=“#F2F2F2”

ohos:orientation=“vertical”

《Text

ohos:height=“50vp”

ohos:width=“319vp”

ohos:background_element=“#FFFFFF”

ohos:layout_alignment=“horizontal_center”

ohos:text=“请输入新密码”

ohos:text_alignment=“center”

ohos:text_color=“#999999”

ohos:text_size=“17fp”

ohos:top_margin=“10vp”

/》

《Text

ohos:height=“50vp”

ohos:width=“319vp”

ohos:background_element=“#FFFFFF”

ohos:layout_alignment=“horizontal_center”

ohos:text=“请确认新密码”

ohos:text_alignment=“center”

ohos:text_color=“#999999”

ohos:text_size=“17fp”

ohos:top_margin=“10vp”

/》

《Button

ohos:height=“47vp”

ohos:width=“319vp”

ohos:background_element=“#21a8fd”

ohos:layout_alignment=“horizontal_center”

ohos:text=“完成”

ohos:text_alignment=“center”

ohos:text_color=“#FEFEFE”

ohos:text_size=“24vp”

ohos:top_margin=“12vp”

/》《/DirectionalLayout》

责任编辑:haq

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙系统
    +关注

    关注

    183

    文章

    2598

    浏览量

    65128
  • HarmonyOS
    +关注

    关注

    79

    文章

    1686

    浏览量

    29150

原文标题:如何实现一个鸿蒙注册登录页面?

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:OpenHarmony技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    鸿蒙原生应用元服务实战-Serverless华为账户认证登录需尽快适配

    一、ArkTS\\\\API9,服务器端基于serverless开发的应用与元服务华为账号注册登录功能暂时是不支持的 二、3月1日后的审核要求 3月1日的时间是快到了。 三、会导致的结果
    发表于 02-20 10:14

    鸿蒙NEXT-Column和Row组件的使用

    ,先确定页面的布局,再分析页面上的内容分别使用哪些组件来实现。 我们仔细分析这个登录页面。在静态布局中,组件整体是从上到下布局的,因此构建该
    发表于 01-18 16:44

    鸿蒙开发基础-Web组件之cookie操作

    使用ArkTS语言实现一个简单的免登录过程,向大家介绍基本的cookie管理操作。主要包含以下功能: 获取指定url对应的cookie的值。 设置cookie。 清除所有cookie。 免登录访问
    发表于 01-14 21:31

    鸿蒙实战基础(ArkTS)-窗口管理

    基于窗口能力,实现验证码登录的场景,主要完成以下功能: 登录页面主窗口实现沉浸式。 输入用户名和密码后,拉起验证码校验子窗口。 验证码校验成
    发表于 01-12 17:51

    鸿蒙原生应用/元服务开发-AGC分发如何下载管理Profile

    一、收到通知 尊敬的开发者: 您好,为支撑鸿蒙生态发展,HUAWEI AppGallery Connect已于X月XX日完成存量HarmonyOS应用/元服务的Profile文件更新,更新后
    发表于 11-29 15:10

    鸿蒙原生应用开发-关于页面接口router返回问题与解决思路

    、问题 在测试demo登录的时候,登录成功后返回到主页面,然后进入到登录页点击退出,结果退出后实际还是登录状态,后台打印信息也没有出现报错。
    发表于 11-15 10:11

    SpringBoot分布式验证码登录方案

    传统的项目大都是基于session交互的,前后端都在一个项目里面,比如传统的SSH项目或者一些JSP系统,当前端页面触发到获取验证码请求,可以将验证码里面的信息存在上下文中,所以登录的时候只需要 用户名、密码、验证码即可。
    的头像 发表于 10-12 17:34 392次阅读
    SpringBoot分布式验证码<b class='flag-5'>登录</b>方案

    DGUS 功能升级:任意页面控件均可灵活叠加

    针对进一步提升DGUS平台控件组合灵活度的市场需求,迪文在DGUS平台中新增设了“页面叠加开关”接口,可用于实现全局动态报警提示等功能。使用该功能,用户可以将任意页面的控件叠加到全部剩余页面
    的头像 发表于 09-22 08:15 485次阅读
    DGUS 功能升级:任意<b class='flag-5'>页面</b>控件均可灵活叠加

    Harmony自定义页面请求与前端页面调试

    。 在下面的示例中,Web组件通过拦截页面请求“https://www.intercept.com/test.html”,在应用侧代码构建响应资源,实现自定义页面响应场景。 ● 前端
    发表于 09-20 17:55

    智算盒子SE5/SM5 使用SD卡刷方式升级为2.6.0版本,刷完后原来的web页面不能登录如何解决?

    智算盒子SE5/SM5 使用SD卡刷方式升级为2.6.0版本,刷完后原来的web页面不能登录
    发表于 09-18 09:09

    HarmonyOS应用侧与前端页面数据通道建立

    ()\'); }) } } } 二、 前端页面调用应用侧函数 开发者使用Web组件将应用侧代码注册到前端页面中,注册完成之后,前端页面
    发表于 09-15 15:31

    如何注册CHATGPT,接下来给大家带来CHATGPT登录注册教程!

    如何注册CHATGPT,接下来给大家带来CHATGPT登录注册教程!
    的头像 发表于 08-30 21:28 1.9w次阅读
    如何<b class='flag-5'>注册</b>CHATGPT,接下来给大家带来CHATGPT<b class='flag-5'>登录</b><b class='flag-5'>注册</b>教程!

    【芒果派MangoPi MQ Pro】+在Armbian桌面的SSH登录

    介绍在Armbian桌面实现SSH登录的实时步骤等内容
    的头像 发表于 07-11 11:58 1211次阅读
    【芒果派MangoPi  MQ Pro】+在Armbian桌<b class='flag-5'>面的</b>SSH<b class='flag-5'>登录</b>

    如何使用ESP8266登录网页?

    和 arduino 制作电路。到目前为止,我还没有刷过 NodeMCU 固件。我不能使用 thingspeak 因为没有登录,所有页面都会将它重定向到登录页面,所以我的 esp826
    发表于 05-24 07:49

    什么是函数回调注册机制?实现的大致步骤介绍

    嵌入式函数回调注册机制是一种常用的解耦技术,它通过在应用程序中注册回调函数的方式来实现模块之间的通信
    的头像 发表于 05-20 16:43 2886次阅读