在小程序中，登錄是一個常見的場景。比如我們在小程序預約或者購買時，通常要求用戶先登錄后購買。如果使用傳統方案，登錄這個動作其實最終的目的是為了獲取用戶的openid。而使用低代碼方案，打開小程序就已經匿名登錄了，并不需要再去通過調用登錄接口獲取openid。

既然這樣，為什么我們還需要進行登錄呢？主要是為了兩個目的，第一是為了獲取用戶的昵稱和頭像，在后續用戶評價的時候顯的更真實。第二方面是通過登錄的動作去獲取用戶的unionid，為了方便給用戶發送公眾號消息。本篇就介紹一下如何開發登錄功能。

1 創建全局變量

在微搭中如果定義變量的話，會有生命周期的區別。如果定義為頁面級別的變量，那只能在當前頁面使用，如果定義為全局變量，所有頁面都可以共享。

我們就需要定義一個全局變量用戶獲取用戶的身份信息，打開應用的編輯器，在代碼區展開全局，點擊立即新建

選擇新建微搭數據表查詢

選擇我們的用戶管理數據源，方法選擇查詢單條

查詢條件設置為openid等于我們系統變量里的openId

2 創建頁面

點擊創建頁面的圖標，新建一個我的頁面

3 搭建頁面

往頁面中添加普通容器組件，里邊放置圖片、文本、按鈕組件。我們想要實現的效果是，如果用戶登錄則顯示用戶的頭像和昵稱，如果未登錄則顯示默認的頭像和用戶登錄的按鈕。

修改圖片的寬和高，設置為72px，圓角設置為90


將我們默認的頭像上傳到素材里

復制一下頭像的鏈接

在圖片的地址綁定里，我們通過短路運算符給頭像綁定地址

$w.userInfo.data.tx||"https://lowcode-9g6zlcz504383ac8-1305601167.tcloudbaseapp.com/resources/2024-06/lowcode-1830431" 

短路運算符會檢查表達式兩邊的值，如果我們現在已經登錄了，就獲取用戶信息里的頭像，如果未登錄我們就獲取素材里的圖片

接著綁定文本組件的文本內容

$w.userInfo.data.nc||"匿名用戶"

邏輯和上邊是一樣的

接著給按鈕綁定條件展示

4 實現登錄邏輯

在點擊登錄的時候，我們需要彈出界面，讓用戶選擇上傳頭像和昵稱，先拖入彈窗組件

在內容區域添加一個圖片上傳組件，并且打開小程序端獲取頭像配置

添加一個單行輸入組件，打開小程序端獲取微信昵稱配置

在代碼區創建一個javascript方法

輸入如下代碼

export default async function({event, data}) {const wx = await app.utils.getWXContext()const unionid = wx.UNIONIDconst openid = wx.OPENIDconst avatar = $w.uploadImage1.valueconsole.log("avatar",avatar)console.log("unionid",unionid)const nickname = $w.input1.valueconst user = await $w.cloud.callDataSource({dataSourceName: "yhgl_2rtx1m9",methodName: "wedaGetItemV2",params: {// 篩選內容，篩選內容推薦使用編輯器數據篩選器生成filter: {where: {$and: [{gzhunionid: {$eq: unionid, // 獲取單條時，推薦傳入_id數據標識進行操作},},],},},select: {$master: true, // 常見的配置，返回主表},},});console.log("user",user)console.log("ssss",Object.keys(user).length)if(Object.keys(user).length>0){const updateResult = await $w.cloud.callDataSource({dataSourceName: "yhgl_2rtx1m9",methodName: "wedaUpdateV2",params: {// 更新數據data: {tp: avatar,nc: nickname},// 篩選內容，篩選內容推薦使用編輯器數據篩選器生成filter: {where: {$and: [{_id: {$eq: user._id, // 更新單條時，推薦傳入_id數據標識進行操作},},],},},},});}else{console.log("新增頭像",avatar)const createResult = await $w.cloud.callDataSource({dataSourceName: "yhgl_2rtx1m9",methodName: "wedaCreateV2",params: {data: {tx: avatar,nc: nickname,openid:openid},},});console.log("createResult",createResult)}await $w.userInfo.trigger()
}

這里的邏輯是先根據unionid去看用戶是否關注公眾號了，如果關注過我就更新一下用戶的頭像和昵稱信息，如果沒有關注過，我就將用戶填寫的信息寫入用戶表。

總結

本篇我們實現了用戶登錄的過程，用戶登錄是一個常見的場景，后續就可以給用戶發送在線的消息，提醒訂單的變化。