0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會(huì)員中心
电子发烧友
开通电子发烧友VIP会员 尊享10大特权
海量资料免费下载
精品直播免费看
优质内容免费畅学
课程9折专享价
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙注冊(cè)登錄頁(yè)面的實(shí)現(xiàn)步驟

OpenHarmony技術(shù)社區(qū) ? 來(lái)源:HarmonyOS技術(shù)社區(qū) ? 作者:兮動(dòng)人 ? 2021-09-06 09:12 ? 次閱讀

注冊(cè)登錄頁(yè)面

設(shè)置的要求如下:

新建項(xiàng)目:TextApplication

上面的數(shù)值單位都是 px ,所以要轉(zhuǎn)換成 vp 和 fp

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

P40:1080*2340 的分辨率跟上面的 1920*1080 差不多,所以就可以用1:3 的關(guān)系來(lái)轉(zhuǎn)換

有關(guān) px,vp,fp 三者的關(guān)系可以看看我之前寫的博文:https://harmonyos.51cto.com/posts/7507

快速格式化頁(yè)面對(duì)齊: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=“請(qǐng)輸入手機(jī)號(hào)”

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=“請(qǐng)輸入密碼”

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=“注冊(cè)”

ohos:text_alignment=“center”

ohos:text_color=“#FEFEFE”

ohos:text_size=“24fp”

ohos:top_margin=“13vp”

/》《/DirectionalLayout》

運(yùn)行:

修改密碼頁(yè)面

設(shè)置的要求如下:

右擊 layout 創(chuàng)建第二個(gè)頁(yè)面:

把啟動(dòng)頁(yè)面設(shè)置為第二個(gè)頁(yè)面

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=“請(qǐng)輸入新密碼”

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=“請(qǐng)確認(rèn)新密碼”

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》

責(zé)任編輯:haq

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • 鴻蒙系統(tǒng)
    +關(guān)注

    關(guān)注

    183

    文章

    2638

    瀏覽量

    66593
  • HarmonyOS
    +關(guān)注

    關(guān)注

    79

    文章

    1982

    瀏覽量

    30422

原文標(biāo)題:如何實(shí)現(xiàn)一個(gè)鴻蒙注冊(cè)登錄頁(yè)面?

文章出處:【微信號(hào):gh_834c4b3d87fe,微信公眾號(hào):OpenHarmony技術(shù)社區(qū)】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。

收藏 0人收藏

    評(píng)論

    相關(guān)推薦

    鴻蒙原生頁(yè)面高性能解決方案上線OpenHarmony社區(qū) 助力打造高性能原生應(yīng)用

    NEXT的原生頁(yè)面高性能解決方案,從頁(yè)面滑動(dòng)、跳轉(zhuǎn)及應(yīng)用冷啟動(dòng)等關(guān)鍵環(huán)節(jié),為開發(fā)者提供全面的支持。目前,這些解決方案均已上線OpenHarmony開源社區(qū),可在OpenHarmony三方庫(kù)中心倉(cāng)進(jìn)行搜索,歡迎開發(fā)者多多使用和共
    發(fā)表于 01-02 18:00

    HarmonyOS Web頁(yè)面加載的原理和優(yōu)化方法

    在移動(dòng)互聯(lián)網(wǎng)時(shí)代,應(yīng)用的頁(yè)面渲染速度對(duì)于用戶體驗(yàn)至關(guān)重要。相對(duì)于原生頁(yè)面,Web頁(yè)面的性能存在多方面的技術(shù)挑戰(zhàn)。本文以HarmonyOS的ArkWeb組件為基礎(chǔ),介紹了Web
    的頭像 發(fā)表于 12-05 15:14 ?336次閱讀
    HarmonyOS Web<b class='flag-5'>頁(yè)面</b>加載的原理和優(yōu)化方法

    調(diào)用云服務(wù)認(rèn)證體系

    一、介紹 基于鴻蒙Next實(shí)現(xiàn)應(yīng)用的認(rèn)證注冊(cè)流程。二、場(chǎng)景需求 用戶注冊(cè)模塊: 郵箱/手機(jī)號(hào)驗(yàn)證: 密碼設(shè)置: 個(gè)人信息填寫: 用戶登錄模塊
    發(fā)表于 09-05 09:39

    模擬登錄頁(yè),華為賬號(hào)一鍵登錄

    一、介紹 基于鴻蒙Next模擬賬號(hào)一鍵登錄,免去賬號(hào)注冊(cè)環(huán)節(jié)二、場(chǎng)景需求 用戶場(chǎng)景 新用戶: 需要快速注冊(cè)登錄,以體驗(yàn)華為的服務(wù)。 老用戶
    發(fā)表于 08-29 17:15

    Linux內(nèi)核中的頁(yè)面分配機(jī)制

    Linux內(nèi)核中是如何分配出頁(yè)面的,如果我們站在CPU的角度去看這個(gè)問(wèn)題,CPU能分配出來(lái)的頁(yè)面是以物理頁(yè)面為單位的。也就是我們計(jì)算機(jī)中常講的分頁(yè)機(jī)制。本文就看下Linux內(nèi)核是如何管理,釋放和分配這些物理
    的頭像 發(fā)表于 08-07 15:51 ?337次閱讀
    Linux內(nèi)核中的<b class='flag-5'>頁(yè)面</b>分配機(jī)制

    鴻蒙開發(fā):【頁(yè)面棧及任務(wù)鏈】

    單個(gè)UIAbility組件可以實(shí)現(xiàn)多個(gè)頁(yè)面,并在多個(gè)頁(yè)面之間跳轉(zhuǎn),這種UIAbility組件內(nèi)部的頁(yè)面跳轉(zhuǎn)關(guān)系稱為“頁(yè)面?!?,由ArkUI框
    的頭像 發(fā)表于 06-14 10:10 ?474次閱讀
    <b class='flag-5'>鴻蒙</b>開發(fā):【<b class='flag-5'>頁(yè)面</b>棧及任務(wù)鏈】

    鴻蒙Ability Kit(程序框架服務(wù))【UIAbility內(nèi)和UIAbility間頁(yè)面的跳轉(zhuǎn)】

    基于Stage模型下的UIAbility開發(fā),實(shí)現(xiàn)UIAbility內(nèi)和UIAbility間頁(yè)面的跳轉(zhuǎn)。
    的頭像 發(fā)表于 06-03 14:13 ?804次閱讀
    <b class='flag-5'>鴻蒙</b>Ability Kit(程序框架服務(wù))【UIAbility內(nèi)和UIAbility間<b class='flag-5'>頁(yè)面的</b>跳轉(zhuǎn)】

    鴻蒙開發(fā)接口UI界面:【@ohos.router (頁(yè)面路由)】

    本模塊首批接口從API version 8開始支持。后續(xù)版本的新增接口,采用上角標(biāo)單獨(dú)標(biāo)記接口的起始版本。 > - 頁(yè)面路由需要在頁(yè)面渲染完成之后才能調(diào)用,在onInit和onReady生命周期中頁(yè)面還處于渲染階段,禁止調(diào)用
    的頭像 發(fā)表于 05-28 16:26 ?996次閱讀
    <b class='flag-5'>鴻蒙</b>開發(fā)接口UI界面:【@ohos.router (<b class='flag-5'>頁(yè)面</b>路由)】

    純血鴻蒙開發(fā)教程-運(yùn)行時(shí)動(dòng)態(tài)加載頁(yè)面提升性能

    下面示例應(yīng)用通過(guò)Navigation組件常規(guī)加載與動(dòng)態(tài)加載的對(duì)比,介紹如何在跳轉(zhuǎn)時(shí)觸發(fā)加載方法,實(shí)現(xiàn)按需加載子模塊。 常規(guī)加載 開發(fā)者使用Navigation組件時(shí),通常會(huì)在主頁(yè)引入各子頁(yè)面組件,在按
    發(fā)表于 05-10 20:52

    HarmonyOS開發(fā)案例:【UIAbility內(nèi)和UIAbility間頁(yè)面的跳轉(zhuǎn)】

    基于Stage模型下的UIAbility開發(fā),實(shí)現(xiàn)UIAbility內(nèi)和UIAbility間頁(yè)面的跳轉(zhuǎn)。
    的頭像 發(fā)表于 05-09 15:06 ?1660次閱讀
    HarmonyOS開發(fā)案例:【UIAbility內(nèi)和UIAbility間<b class='flag-5'>頁(yè)面的</b>跳轉(zhuǎn)】

    HarmonyOS實(shí)戰(zhàn)開發(fā)-如何在Navigation中完成路由攔截

    、子模塊中定義業(yè)務(wù)具體攔截邏輯,做具體的攔截實(shí)現(xiàn):通過(guò)routerInfo判斷目的地為\"我的頁(yè)面\"時(shí)判斷登錄狀態(tài)是\"未登錄\",此時(shí)執(zhí)行跳轉(zhuǎn)到
    發(fā)表于 05-08 14:21

    鴻蒙原生應(yīng)用元服務(wù)開發(fā)-Web前端頁(yè)面調(diào)用應(yīng)用側(cè)函數(shù)

    開發(fā)者使用Web組件將應(yīng)用側(cè)代碼注冊(cè)到前端頁(yè)面中,注冊(cè)完成之后,前端頁(yè)面中使用注冊(cè)的對(duì)象名稱就可以調(diào)用應(yīng)用側(cè)的函數(shù),
    發(fā)表于 05-07 15:03

    企業(yè)鴻蒙原生應(yīng)用元服務(wù)備案實(shí)操包名公鑰簽名信息

    信息? (1)登錄 AppGallery Connect ,點(diǎn)擊“用戶與訪問(wèn)”,在頁(yè)面左側(cè)點(diǎn)擊“證書管理”,下載需要備案的鴻蒙應(yīng)用/元服務(wù)開發(fā)者證書; (2)使用文本編輯器(如,記事本)打開已下載的證書
    發(fā)表于 04-10 15:32

    Google賬戶登錄頁(yè)面支持使用Windows Hello驗(yàn)證身份

    谷歌對(duì)通行碼的使用說(shuō)明描述為:“相比獨(dú)立密碼,通行碼是更為便捷且保密的選擇。用戶將借此通過(guò)指紋、面部識(shí)別或設(shè)備屏保(例如PIN碼)來(lái)登錄Google賬戶。”
    的頭像 發(fā)表于 03-29 13:46 ?681次閱讀

    鴻蒙頁(yè)面示例

    : string = '登錄頁(yè)面' build() { Row() { Column() { Text(this.title).fontSize(20) .fontWeight
    的頭像 發(fā)表于 02-01 11:24 ?493次閱讀

    電子發(fā)燒友

    中國(guó)電子工程師最喜歡的網(wǎng)站

    • 2931785位工程師會(huì)員交流學(xué)習(xí)
    • 獲取您個(gè)性化的科技前沿技術(shù)信息
    • 參加活動(dòng)獲取豐厚的禮品