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