【關鍵字】

HarmonyOS、低代碼平臺、組件拖拽、登錄組件、代碼編輯器

1、寫在前面

前面我們介紹了低代碼中堆疊容器、滾動容器、網格布局、頁簽容器以及一些常用容器和組件的拖拽使用方法，本篇我們來介紹一個新的組件，這個組件是屬于業務組件——登錄組件，同樣的，我會通過動圖的形式展示整個登錄流程的實現過程，大家跟著我的步驟一起來操作吧！

2、開發實戰

2.1、頁面布局

首先，進入到畫布編輯頁面，可以看到頁面最外層是一個垂直容器，然后我們先拖拽一個文本組件來實現頁面標題：

然后拖拽一個橫向容器，實現左圖片右文本的結構，表示左側是用戶頭像右側是用戶名，用來展示默認情況下未登錄時的頁面布局：

然后同樣的結構，我們再來拖拽一個橫向容器，用來實現登錄進來后展示的頁面布局：

然后再來拖拽一個垂直容器，在里面拖入登錄組件和一個按鈕組件，登錄組件用來展示未登錄時的頁面效果，按鈕組件我們填入文本內容：“退出登錄”，用來實現登錄進來之后頁面展示的效果：

接著我們來定義一個變量userInfo，設置這個變量為Object對象類型，給該變量新增四個字段，分別為：showUnLogin、showLogin、userName、url，前兩個字段是布爾類型，分別表示未登錄和登錄時的狀態，后兩個字段是字符串類型分別表示獲取到的用戶名和頭像地址：

然后我們給兩個橫向容器、登錄組件及退出登錄的按鈕分別使用條件渲染，控制未登錄和登錄時分別展示那些組件：

最后我們給未登錄時的頭像設置一個默認的圖片，然后給登錄時的頭像和用戶名綁定上userInfo變量里對應的字段：

2.2、自定義代碼

點擊代碼編輯器找到我們的頁面，在生命周期lifecycle中，在頁面展示的回調方法中獲取用戶的登錄信息，如果有數據則賦值給userInfo對應的字段：

然后點擊handler右側的“+”，給退出登錄添加兩個函數，來實現退出登錄時的回調方法：

最后給退出登錄按鈕綁定點擊事件在彈出框中選擇登錄認證，執行動作選擇登出，然后在成功和失敗的地方選擇自定義代碼，綁定我們在上面創建的退出登錄的成功和失敗的回調方法：

到這里，我們的登錄組件的開發過程就已經完成了。

2.3、開發配置

開發工作完成之后，我們還不能立刻將應用安裝到手機上，因為我們還有一些必須的配置沒有完成。

首先我們需要到AppGallery Connect中找到我們的項目，然后在左側菜單欄中選中“認證服務”，在認證方式中將“手機號碼”和“華為帳號”這兩項選擇啟用：

?

然后回到項目設置，在對應的應用下面，配置SHA256證書指紋：

?

做完這兩步，整個開發過程才能算是真正的完成。

3、效果展示

最后，我們打包將應用安裝到手機上，來看一下最終的實現效果吧：

好了，本期關于登錄組件的使用，就介紹到這里了，咱們下期再會！