HarmonyOS應(yīng)用開(kāi)發(fā)-低代碼開(kāi)發(fā)登錄頁(yè)
想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：
本篇文章我來(lái)手把手教大家做一個(gè)HarmonyOS 應(yīng)用的登錄頁(yè)面，逐步講解，非常細(xì)致，百分百能學(xué)會(huì)，并提供全部源碼。頁(yè)面使用 DevEco Studio 的低代碼開(kāi)發(fā)。通過(guò)本文的實(shí)踐經(jīng)驗(yàn)，我想告訴大家， HarmonyOS 應(yīng)用開(kāi)發(fā)其實(shí)并不難，只要了解具體的開(kāi)發(fā)流程和開(kāi)發(fā)思想，大家都可以很快上手。
下面這張圖是我們的目標(biāo)實(shí)現(xiàn)圖，具體實(shí)現(xiàn)流程將由我一步一步講解：
一、項(xiàng)目初始化
1.創(chuàng)建低代碼項(xiàng)目
下載安裝 DevEco Studio，新建一個(gè)支持 Super Visual 低代碼模式的項(xiàng)目。
2.低代碼項(xiàng)目結(jié)構(gòu)解讀
初始項(xiàng)目目錄如下：
├──entry/src/main/ets // 代碼區(qū)
│ ├──entryability
│ │ └──EntryAbility.ets // 程序入口類(lèi)
│ └──pages
│ └──Index.ets // 首頁(yè)的邏輯描述文件
├──entry/src/main/resources // 資源文件
└──entry/src/main/supervisual
└──pages
└──Index.visual // 首頁(yè)的數(shù)據(jù)模型其中.ets文件就是我們正常編寫(xiě)界面邏輯的文件，語(yǔ)言為ArcTS；
.visual為低代碼項(xiàng)目特有的文件，由系統(tǒng)根據(jù)我們對(duì)界面的可視化設(shè)計(jì)自動(dòng)更新，用寫(xiě)字板打開(kāi)能看到是存儲(chǔ)界面設(shè)計(jì)的Json文本；
二、添加靜態(tài)文件
1.新增圖片文件
ets 文件下創(chuàng)建 common\images\icon 文件夾，icon內(nèi)添加我們需要添加的圖片文件，本教程我們用到了3個(gè)“其他登錄方式”的圖標(biāo)。
添加的圖標(biāo)圖片如下：
增加完三個(gè)圖標(biāo)后，我們的項(xiàng)目結(jié)構(gòu)更新如下：
├──entry/src/main/ets // 代碼區(qū)
│ ├──common
│ │ └──images
│ │ └──icon // 圖標(biāo)圖片
│ │ ├──csdn.png // 圖標(biāo)A
│ │ ├──huawei.png // 圖標(biāo)B
│ │ └──openatom.png // 圖標(biāo)C
│ ├──entryability
│ │ └──EntryAbility.ets // 程序入口類(lèi)
│ └──pages
│ └──Index.ets // 首頁(yè)的邏輯描述文件
├──entry/src/main/resources // 資源文件
└──entry/src/main/supervisual
└──pages
└──Index.visual // 首頁(yè)的數(shù)據(jù)模型
2.新增常量類(lèi)
這一步可選，一般意義上，我們會(huì)根據(jù)系統(tǒng)業(yè)務(wù)需要把一些固定的參數(shù)寫(xiě)到一個(gè)記錄常量的 ArcTS 文件里，比如命名為 Const.ts，本次我們把頁(yè)面需要的常量寫(xiě)到了頁(yè)面自帶的 index.ets文件里，所以沒(méi)有建立常量類(lèi)，特此說(shuō)明。
如果需要添加，我們可以把常量類(lèi) Const.ts 放在和 images 文件夾平級(jí)的位置，添加 Const.ts 之后的項(xiàng)目結(jié)構(gòu)如下：
├──entry/src/main/ets // 代碼區(qū)
│ ├──common
│ │ ├──Const.ts // 常量類(lèi)
│ │ └──images
│ │ └──icon // 圖標(biāo)圖片
│ │ ├──csdn.png // 圖標(biāo)A
│ │ ├──huawei.png // 圖標(biāo)B
│ │ └──openatom.png // 圖標(biāo)C
│ ├──entryability
│ │ └──EntryAbility.ets // 程序入口類(lèi)
│ └──pages
│ └──Index.ets // 首頁(yè)的邏輯描述文件
├──entry/src/main/resources // 資源文件
└──entry/src/main/supervisual
└──pages
└──Index.visual // 首頁(yè)的數(shù)據(jù)模型三、編寫(xiě)登錄頁(yè)界面
1.低代碼設(shè)計(jì)界面布局
放置容器組件
初始話的頁(yè)面如圖，Root 根結(jié)構(gòu)下包含一個(gè) Column 的容器，容器里有一個(gè) “Hello World” 的 Text 文本控件。
我們直接復(fù)用這個(gè) Column 容器，刪除 Text 控件（左側(cè)組件樹(shù)或右側(cè)可視化屏幕里選中控件然后按Backspace鍵就可以刪除）。
放置圖標(biāo)圖片
如圖，我們需要放置一個(gè)水平居中的應(yīng)用圖標(biāo)：
思路：下面我們來(lái)實(shí)現(xiàn)登錄頁(yè)面的圖標(biāo)，我們需要?jiǎng)?chuàng)建一個(gè)行容器(Row)，然后拖一個(gè)圖片組件(Imgae)進(jìn)去，并使圖片居中。
操作：在列容器(Cloumn)里拖一個(gè)行容器(Row)過(guò)去，寬度(width)設(shè)置為 100%，高度(height)設(shè)置為 100vp，設(shè)置水平居中、垂直居中，位置為絕對(duì)定位(Position)，距離頁(yè)面上方 95vp 距離。
然后我們拖入圖片組件(Imgae)，設(shè)置圖片寬高均為 100vp（和Row的高相等）。
圖片的Src(圖片存儲(chǔ)路徑)設(shè)置為app自帶的默認(rèn)圖標(biāo)，至此我們的登錄頁(yè)應(yīng)用圖標(biāo)就顯示出來(lái)了。
放置描述文字
接下來(lái)，我們需要放置描述性文本，如圖：
思路：這里用到的是文本組件(Text)，我們需要填寫(xiě)文字內(nèi)容、定義字體大小和組件的位置。
操作：拖兩個(gè)文本組件(Text)到行容器(Row)下面。
設(shè)置內(nèi)容(Content)為 “用戶登錄”，字體大小(FontSize)為 26fp，字體對(duì)齊(TextAlign)為居中(Center)，文字組件框體大小(Size)為寬度 100%，高度 50vp，位置為絕對(duì)定位(Position)，距離頁(yè)面頂部 200vp。效果圖如下：
同理，我們制作 “登錄賬號(hào)以使用更多服務(wù)” 文本框。
我們?cè)O(shè)置文本框內(nèi)容(Content)為 “登錄賬號(hào)以使用更多服務(wù)”，字體大小(FontSize)為 14fp，字體對(duì)齊(TextAlign)為居中(Center)，文字組件框體大小(Size)為寬度 100%，高度 30vp，位置為絕對(duì)定位(Position)，距離頁(yè)面頂部 250vp，字體顏色(FontColor)為 #8c8c8c(灰色)。效果圖如下：
放置賬號(hào)信息輸入框
接下來(lái)，我們要制作賬號(hào)信息的輸入部分，這里用到的是文本輸入組件(TextInput)。
目標(biāo)實(shí)現(xiàn)效果如下：
思路：我們需要兩個(gè)文本輸入組件(TextInput)用來(lái)實(shí)現(xiàn)賬號(hào)信息的錄入，下方 "短信驗(yàn)證碼登錄" 和 "忘記"，我們使用普通文本組件(Text)實(shí)現(xiàn)，讓兩個(gè)普通文本組件(Text)并列在一行，然后一個(gè)左對(duì)齊，一個(gè)右對(duì)齊。
操作流程：
首先，我們處理賬號(hào)信息的兩個(gè)文本輸入框。
拖兩個(gè)文本輸入組件(TextInput)在我們之前拖的組件下面。
設(shè)置文本輸入組件一(text-input1)：
設(shè)置文本占位符(Placeholder)為 “郵箱/手機(jī)號(hào)/用戶名”，類(lèi)型(Type)為 Normal。
組件框體大小(Size)為寬度(Width)為 100%，高度(Height)為 50vp。
背景顏色(BackgroundColor)為白色(#ffffff)。
邊框(Border)只要底邊框，底邊框?qū)挾?BorderBottomWidth)為 1vp，邊框顏色(BorderColor)為深灰色(#4a4a4a)。
位置為絕對(duì)定位(Position)，距離頁(yè)面頂部 328vp。
效果圖如下：
設(shè)置文本輸入組件二(text-input2)：
設(shè)置文本占位符(Placeholder)為 “郵箱/手機(jī)號(hào)/用戶名”，類(lèi)型(Type)為 Password。
組件框體大小(Size)為寬度(Width)為 100%，高度(Height)為 50vp。
背景顏色(BackgroundColor)為白色(#ffffff)。
邊框(Border)只要底邊框，底邊框?qū)挾?BorderBottomWidth)為 1vp，邊框顏色(BorderColor)為深灰色(#4a4a4a)。
位置為絕對(duì)定位(Position)，距離頁(yè)面頂部 380vp。
效果圖如下：
下一步，我們來(lái)制作兩個(gè)輸入框下面的 “短信驗(yàn)證碼登錄” 和 “忘記”。
拖一個(gè)行容器(Row)到文本輸入框組件下面，設(shè)置行容器(Row)的屬性。
設(shè)置組件居中。
設(shè)置組件的尺寸(Size)，寬度(Width)為 94%，高度(Height)為 30vp。
設(shè)置組件位置為絕對(duì)定位(Position)，距離頁(yè)面頂部 430vp，距離左側(cè)為 3%;
接著，我們往容器里拖兩個(gè)文本組件(Text)。
設(shè)置組件屬性如下：
組件一(text5)內(nèi)容為 “短信驗(yàn)證碼登錄”，字體居左，字體大小為 14fp。
定義尺寸(Size)，寬度(Width)為 50%，高度(Height)為 30vp。
組件位置為絕對(duì)定位(Position)，距離左側(cè)為 0%。
組件二(text6)內(nèi)容為 “忘記”，字體居右，字體大小為 14fp。
定義尺寸(Size)，寬度(Width)為 50%，高度(Height)為 30vp。
組件位置為絕對(duì)定位(Position)，距離左側(cè)為 50%。
放置登錄按鈕
這一步是最簡(jiǎn)單的，制作登錄按鈕部分，只需要一個(gè)按鈕組件(Button)和一個(gè)文本組件(Text)。
目標(biāo)實(shí)現(xiàn)效果如下：
思路：我們拖一個(gè)按鈕組件(Button)，再在按鈕下方拖一個(gè)文本組件(Text)即可。
操作流程：
首先，我們拖一個(gè)按鈕組件。
定義組件的屬性：
設(shè)置組件寬度(Width)為 90%，高度(Height)為 40vp。
內(nèi)容為”登錄”，字體默認(rèn)居中，字體大小為 20fp。
組件位置為絕對(duì)定位(Position)，距離左側(cè)為 5%，距離頂部 530vp。
下方再拖一個(gè)文本組件(Text)，設(shè)置組件屬性：
文本組件內(nèi)容為 “注冊(cè)賬號(hào)”，字體居中，字體大小為 14fp。
定義尺寸(Size)，寬度(Width)為 100%，高度(Height)為 30vp。
組件位置為絕對(duì)定位(Position)，距離頂部為 570vp。
放置Grid網(wǎng)格控件
最后，我們來(lái)制作其他登錄方式的選擇部分，這里用到的是網(wǎng)格組件(Grid)、網(wǎng)格內(nèi)單個(gè)元素(GridItem)、其他常見(jiàn)組件(圖片、文字、行/列等)。
目標(biāo)實(shí)現(xiàn)效果如下：
思路：我們需要一個(gè)網(wǎng)格組件(Grid)，組件內(nèi)包含若干個(gè)子元素，這個(gè)用Grid內(nèi)對(duì)象組件(GridItem)可以實(shí)現(xiàn)，這樣我們就可以根據(jù)我們后端傳值的數(shù)目來(lái)動(dòng)態(tài)顯示登錄方式，而不是把三種登錄方式固定寫(xiě)死。每個(gè)Grid內(nèi)子元素(GridItem)里放置一個(gè)行容器(Row)，行容器(Row)里上方放一個(gè)圖片組件(Image)，下方放一個(gè)文本組件(Text)。
操作流程：
首先，我們拖一個(gè)網(wǎng)格組件(Grid)，設(shè)置組件屬性：
組件寬度(width)設(shè)置為 100%，高度(height)設(shè)置為 10%。
內(nèi)容居中，絕對(duì)定位，距離頂部 90%。
往網(wǎng)格組件(Guid)里拖一個(gè)GuidItem組件，這是一個(gè)動(dòng)態(tài)顯示的子元素組件，會(huì)根據(jù)我們提供的參數(shù)動(dòng)態(tài)進(jìn)行內(nèi)容顯示，由于我們?cè)谠O(shè)計(jì)上固定為行內(nèi)顯示3個(gè)，所以寬度就直接定為33.3%了。
設(shè)置GridItem組件屬性：
組件寬度(width)設(shè)置為 33.3%，高度(height)設(shè)置為 100%(因?yàn)槭窍鄬?duì)于Grid)。
往GridItem里拖入一個(gè)行容器(Row)，設(shè)置組件屬性：
高度和寬度均為 100%。
然后再往行容器(Row)里拖一個(gè)圖片組件(Image)和一個(gè)文本組件(Text)。
設(shè)置組件屬性：
圖片(Image)組件：
- 圖片路徑(Src)，我們使用編譯器自帶的 Logo。
- 對(duì)象適應(yīng)方式(ObjectFit) 為包含(Contain)。
- 組件寬度(width)設(shè)置為 70%，高度(height)設(shè)置為 56%。
- 距離上邊距(MarginTop) 10%。
- 絕對(duì)定位，距離左側(cè) 15%。
文字(Text)組件：
- 文字內(nèi)容(Content)，我們先隨便填個(gè) “測(cè)試”。
- 文本居中。
- 組件寬度(width)設(shè)置為 100%，高度(height)設(shè)置為 24%。
- 絕對(duì)定位，距離頂部 60%(60%~70%均可)。
做到這里，我們的ArcUI的設(shè)計(jì)就完成了，是不是覺(jué)得和下面三個(gè)圖標(biāo)的目標(biāo)效果還有點(diǎn)差距，別急，我們接下來(lái)就來(lái)實(shí)現(xiàn)GridItem數(shù)據(jù)的動(dòng)態(tài)渲染。
2.實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)渲染
下一步，我們來(lái)實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)渲染，在這個(gè)登錄頁(yè)面，我們需要對(duì)GridItem組件及其內(nèi)部組件的屬性進(jìn)行動(dòng)態(tài)賦值。
創(chuàng)建數(shù)據(jù)源
我們先創(chuàng)建數(shù)據(jù)源，打開(kāi)頁(yè)面對(duì)應(yīng)的 ArcTS 文件（比如你現(xiàn)在編輯的可視化低代碼界面是Index.visual，那么對(duì)應(yīng)的 ArcTS 文件就是 Index.ets）
默認(rèn)的頁(yè)面 .ets 文件內(nèi)容如下：
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
}
}我們?cè)谶@里創(chuàng)建 FunctionType 對(duì)象，用來(lái)裝配我們需要顯示的圖片路徑和文字內(nèi)容。
然后再定義狀態(tài)變量 avenues，數(shù)組類(lèi)型，用來(lái)包含我們裝配圖片路徑和文字內(nèi)容的 FunctionType 對(duì)象。
更新后的代碼如下：
class FunctionType {
name: string;
icon: string;
}
@Entry
@Component
struct Index {
@State avenues: Array<FunctionType> = [
{
name: 'HuaWei', icon: "common/images/icon/huawei.png"
},
{
name: 'CSDN', icon: "common/images/icon/csdn.png"
},
{
name: 'OpenAtom', icon: "common/images/icon/openatom.png"
}
]
build() {
}
}更新動(dòng)態(tài)渲染組件屬性
回到我們低代碼頁(yè)面 Index.visual，修改網(wǎng)格子元素組件(GridItem)的Render里的ForEach屬性為this.avenues，其他默認(rèn)；
然后我們?cè)俜謩e選中GridItem里的圖片組件和文本組件，對(duì)其勾選動(dòng)態(tài)值。
圖片組件(Image)的圖片路徑(Src)選擇 item1.icon。
文本組件(Text)的內(nèi)容(Content)選擇 item1.name。
然后我們到預(yù)覽器(Preview)的窗口里就可以看到已經(jīng)完成的效果了。
至此，我們的低代碼開(kāi)發(fā)部分已全部完成！
3.低代碼頁(yè)面轉(zhuǎn)為ArcTs文件
這步是可選步驟，根據(jù)實(shí)際需要決定是否要轉(zhuǎn)，低代碼和 ArcTs 在開(kāi)發(fā)頁(yè)面上各有優(yōu)勢(shì)。低代碼開(kāi)發(fā)迅速、改動(dòng)簡(jiǎn)單，ArcTS 則更方便自定義一些事件，擁有更好的擴(kuò)展性。一般對(duì)于涉及交互業(yè)務(wù)的頁(yè)面，頁(yè)面的功能會(huì)相對(duì)比較復(fù)雜，推薦使用 ArcTS，如果是登錄頁(yè)這種簡(jiǎn)單業(yè)務(wù)邏輯頁(yè)面，可以保留低代碼版本，不必轉(zhuǎn)化為 ArcTS 版本。
如果有需要將 .visual 頁(yè)面轉(zhuǎn)換為 .ets 文件，我們可以點(diǎn)擊右上角的轉(zhuǎn)換按鈕。
此操作能夠?qū)⒌痛a界面轉(zhuǎn)換為 ArcTS 的代碼。
注意：轉(zhuǎn)換完之后原有的 .visual 文件會(huì)被刪除！這個(gè)過(guò)程不可逆！
目前編譯器點(diǎn)擊轉(zhuǎn)換按鈕后會(huì)有 ArcTS 的預(yù)覽代碼，需要點(diǎn)擊 Convert 來(lái)確認(rèn)此次操作，本次界面轉(zhuǎn)換結(jié)果的預(yù)覽代碼如下：
class FunctionType {
name: string;
icon: string;
}
@Entry
@Component
struct Index {
@State avenues: Array<FunctionType> = [
{
name: 'HuaWei', icon: "common/images/icon/huawei.png"
},
{
name: 'CSDN', icon: "common/images/icon/csdn.png"
},
{
name: 'OpenAtom', icon: "common/images/icon/openatom.png"
}
]
build() {
Column() {
Column() {
Row() {
Image($r('app.media.icon'))
.width("100vp")
.height("100vp")
.align(Alignment.Center)
.offset({ x: "0%", y: "0vp" })
.backgroundImageSize(ImageSize.Auto)
}
.width("100%")
.height("100vp")
.position({ x: "0", y: "95vp" })
.displayPriority(0)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
Text("用戶登錄")
.width("100%")
.height("50vp")
.position({ x: "0vp", y: "200vp" })
.borderRadius({ topRight: "0vp" })
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.Clip })
.fontSize("26fp")
.fontWeight(FontWeight.Medium)
.fontFamily("sans-serif")
Text("登錄帳號(hào)以使用更多服務(wù)")
.width("100%")
.height("30vp")
.position({ x: "0vp", y: "250vp" })
.fontColor("#8c8c8c")
.textAlign(TextAlign.Center)
.fontSize("14fp")
TextInput({ placeholder: "郵箱/手機(jī)號(hào)/用戶名" })
.width("100%")
.height("50vp")
.position({ x: "0vp", y: "328vp" })
.borderWidth({ bottom: "1vp" })
.borderColor({ bottom: "#4a4a4a" })
.backgroundColor("#ffffff")
.margin({ bottom: "0vp" })
.padding({ top: "0vp" })
.type(InputType.Normal)
TextInput({ placeholder: "密碼" })
.width("100%")
.height("50vp")
.position({ x: "0vp", y: "380vp" })
.borderWidth({ bottom: "1vp" })
.borderColor({ bottom: "#4a4a4a" })
.backgroundColor("#ffffff")
.type(InputType.Password)
Row() {
Text("忘記密碼")
.width("50%")
.height("30vp")
.position({ x: "50%", y: "0px" })
.textAlign(TextAlign.End)
.fontSize("14fp")
Text("短信驗(yàn)證碼登錄")
.width("50%")
.height("30vp")
.position({ x: "0%", y: "0vp" })
.textAlign(TextAlign.Start)
.fontSize("14fp")
}
.width("94%")
.height("30vp")
.position({ x: "3%", y: "430vp" })
Grid() {
if (true) {
ForEach(this.avenues,
( item1: any, idx1: number) => {
GridItem() {
Row() {
if (true) {
Text( ` ${item1.name}`
)
.width("100%")
.height("24%")
.position({ x: "0%", y: "60%" })
.textAlign(TextAlign.Center)
.fontSize("14fp")
}
Image($r('app.media.icon'))
.width("70%")
.height("56%")
.position({ x: "15%", y: "0vp" })
.margin({ top: "10%", bottom: "0vp", left: "0%", right: "0%" })
.objectFit(ImageFit.Contain)
}
.width("100%")
.height("100%")
}
.width("33.3%")
.height("100%")
.align(Alignment.Start)
.offset({ x: "0vp", y: "0" })})
}
}
.width("100%")
.height("10%")
.align(Alignment.Center)
.position({ x: "0vp", y: "90%" })
.backgroundImageSize(ImageSize.Auto)
.opacity(0.99)
.margin({ top: "0vp", bottom: "0vp", left: "0vp", right: "0vp" })
.padding({ top: "0vp", bottom: "0vp" })
.scrollBar(BarState.Off)
Button("登錄")
.width("90%")
.height("40vp")
.position({ x: "5%", y: "530vp" })
.fontSize("20fp")
Text("注冊(cè)賬號(hào)")
.width("100%")
.height("30vp")
.position({ x: "0vp", y: "570vp" })
.textAlign(TextAlign.Center)
.fontSize("14fp")
Text("其他方式登錄")
.width("100%")
.height("4%")
.align(Alignment.Center)
.position({ x: "0vp", y: "85%" })
.textAlign(TextAlign.Center)
.fontSize("14fp")
}
.width("100%")
.height("100%")
.position({ x: "0vp", y: "0vp" })
.borderWidth({ bottom: "1vp" })
.borderColor({ bottom: "#4a4a4a" })
.justifyContent(FlexAlign.Center)
}
.width("100%")
.height("100%")
}
}四、測(cè)試應(yīng)用
1.啟動(dòng)仿真器
右上角選擇設(shè)備，點(diǎn)擊進(jìn)入設(shè)備管理器，如果沒(méi)有對(duì)應(yīng)的仿真設(shè)備，需要下載安裝，如果已經(jīng)有，選擇 Huawei_Phone 作為調(diào)試的仿真設(shè)備，點(diǎn)擊啟動(dòng)。
2.界面測(cè)試
點(diǎn)擊右上角啟動(dòng)鍵，啟動(dòng)項(xiàng)目。
有的時(shí)候會(huì)因?yàn)轫?yè)面刪除但是頁(yè)面配置沒(méi)清除完全導(dǎo)致運(yùn)行失敗，這個(gè)需要到項(xiàng)目啟動(dòng)類(lèi)的配置文件里手動(dòng)刪除多出來(lái)的頁(yè)面，啟動(dòng)類(lèi)配置文件的路徑是 ：DevEco-Studio\Test-Project\Harmony\entry\src\main\resources\base\profile\main_pages.json；
程序啟動(dòng)成功，運(yùn)行效果如圖：
