快捷導(dǎo)航

微信小程序登錄與注冊(cè)功能的實(shí)現(xiàn)詳解

更新時(shí)間：2022年08月02日 11:43:07 作者：低代碼布道師

在小程序的開(kāi)發(fā)中，可能起點(diǎn)就是用戶(hù)的登錄與注冊(cè)了。和粉絲的互動(dòng)過(guò)程中發(fā)現(xiàn)，對(duì)于用戶(hù)的登錄注冊(cè)還是沒(méi)有徹底掌握。我們本篇就來(lái)分析一下登錄與注冊(cè)如何實(shí)現(xiàn)

小程序中的登錄

在小程序中有一個(gè)概念叫openid，這個(gè)相當(dāng)于登錄小程序用戶(hù)的唯一標(biāo)識(shí)，每個(gè)微信用戶(hù)都不同。那要如何拿到用戶(hù)的唯一標(biāo)識(shí)呢？在微搭低代碼中是通過(guò)調(diào)用系統(tǒng)的api來(lái)獲取的

let userinfo = await app.utils.getWXContext()

我們通過(guò)這行代碼的調(diào)用來(lái)獲取到用戶(hù)的唯一標(biāo)識(shí)，獲取到之后我們其他頁(yè)面也需要使用，那就需要把他存起來(lái)。全局變量的作用域是所有頁(yè)面都可見(jiàn)，所以我們需要在變量中定義一個(gè)全局變量叫openid

在低碼編輯器中如果需要使用全局變量的，是需要通過(guò)變量的路徑來(lái)訪問(wèn)，我們這里的路徑是

$app.dataset.state.openid

既然變量已經(jīng)定義了，我們就可以將獲取到的用戶(hù)信息賦值給全局變量

app.dataset.state.openid = userinfo.OPENID

賦值語(yǔ)句是用=號(hào)來(lái)表達(dá)，=號(hào)左邊的是需要賦值的變量，右邊是賦予的具體的值。我們這里的userinfo是一個(gè)對(duì)象，使用了.的語(yǔ)法來(lái)獲取其中的一個(gè)屬性，OPENID 來(lái)賦值給全局變量。

拿到openid其實(shí)就算實(shí)現(xiàn)了用戶(hù)的登錄，然后我們可以使用openid作為查詢(xún)條件，去我們的用戶(hù)數(shù)據(jù)源去加載數(shù)據(jù)。如果加載到了，我們就將獲取到的用戶(hù)信息再賦值給全局變量。目的是如果已經(jīng)注冊(cè)過(guò)的用戶(hù)不再繼續(xù)往數(shù)據(jù)源里寫(xiě)入數(shù)據(jù)，而是直接展示。

const result = await app.cloud.callModel({
      name: 'user_ev6j94p',
      methodName: 'wedaGetRecords',
      params: {
        "where": [
          {
            "key": "openid",
            "rel": "eq",
            "val": app.dataset.state.openid
          }
        ]
      }
    })

上邊代碼的意思是，訪問(wèn)user_ev6j9rp數(shù)據(jù)源，調(diào)用數(shù)據(jù)源的wedaGetRecords方法，入?yún)⑹莖penid=全局變量獲取到的openid。key是你的查詢(xún)條件，eq表示做相等匹配，匹配的值是從全局變量里獲取。

那如何來(lái)判斷是否找到了呢？方法執(zhí)行的返回結(jié)果是一個(gè)對(duì)象，它有一個(gè)屬性叫total，表示查詢(xún)到多少條數(shù)據(jù)。我們就可以通過(guò)判斷這個(gè)記錄總數(shù)是否大于等于1來(lái)判斷用戶(hù)是否已經(jīng)存在了。

if (result.total >= 1) {
      app.dataset.state.imageurl = result.records[0].imageUrl
      app.dataset.state.userid = result.records[0]._id
      app.dataset.state.islogin = true
    }

如果存在，那么我就給全局變量賦值，分別給用戶(hù)的頭像賦值，用戶(hù)的數(shù)據(jù)標(biāo)識(shí)賦值，還有就是給是否注冊(cè)賦予為真的結(jié)果。這三個(gè)全局變量的定義如下：

還有就是考慮上述的代碼在哪執(zhí)行，因?yàn)槲覀円淮蜷_(kāi)小程序就要加載用戶(hù)信息，所以應(yīng)該是在全局生命周期函數(shù)里執(zhí)行

我們需要有兩個(gè)地方都執(zhí)行加載，一個(gè)是小程序一啟動(dòng)時(shí)候，onAppLanch，另外一個(gè)就是小程序再次打開(kāi)的時(shí)候onAppShow方法中。全部代碼如下：

/**
 * 可通過(guò) app 獲取或修改全局應(yīng)用的 變量 狀態(tài) 等信息
 * 具體可以console.info 在編輯器Console面板查看更多信息
 * 如果需要 async-await，請(qǐng)?jiān)诜椒ㄇ?async
 **/
//import updateManager from './common/updateManager';
export default {
  async onAppLaunch(launchOpts) {
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
    let userinfo = await app.utils.getWXContext()
    app.dataset.state.openid = userinfo.OPENID
    const userInfo = await $app.auth.getUserInfo();
    console.log('openid:', app.dataset.state.openid);
    const result = await app.cloud.callModel({
      name: 'user_ev6j94p',
      methodName: 'wedaGetRecords',
      params: {
        "where": [
          {
            "key": "openid",
            "rel": "eq",
            "val": app.dataset.state.openid
          }
        ]
      }
    })
    if (result.total >= 1) {
      app.dataset.state.imageurl = result.records[0].imageUrl
      app.dataset.state.userid = result.records[0]._id
      app.dataset.state.islogin = true
    }
    console.log('total:', result.total);
  },
  async onAppShow(appShowOpts) {
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
    //updateManager();
    let userinfo = await app.utils.getWXContext()
    app.dataset.state.openid = userinfo.OPENID
    const userInfo = await $app.auth.getUserInfo();
    console.log('openid:', app.dataset.state.openid);
    const result = await app.cloud.callModel({
      name: 'user_ev6j94p',
      methodName: 'wedaGetRecords',
      params: {
        "where": [
          {
            "key": "openid",
            "rel": "eq",
            "val": app.dataset.state.openid
          }
        ]
      }
    })
    if (result.total >= 1) {
      app.dataset.state.imageurl = result.records[0].imageUrl
      app.dataset.state.userid = result.records[0]._id
      app.dataset.state.islogin = true
    }
    console.log('total:', result.total);
  },
  onAppHide() {
    //console.log('---------> LifeCycle onAppHide')
  },
  onAppError(options) {
    //console.log('---------> LifeCycle onAppError', options)
  },
  onAppPageNotFound(options) {
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  },
  onAppUnhandledRejection(options) {
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  }
}

用戶(hù)注冊(cè)

用戶(hù)登錄的問(wèn)題解決了之后，就是要考慮用戶(hù)的注冊(cè)問(wèn)題。在微搭低代碼獲取用戶(hù)信息提供了對(duì)應(yīng)的組件，我們可以往頁(yè)面中添加相應(yīng)的組件

這個(gè)組件使用的時(shí)候要注意右側(cè)的屬性面板里的信息用途必須填寫(xiě)，否則點(diǎn)擊按鈕無(wú)法彈出授權(quán)按鈕來(lái)。

要想讓用戶(hù)信息寫(xiě)入數(shù)據(jù)源中，我們需要給組件綁定事件，我們這里綁定的是用戶(hù)授權(quán)信息成功這個(gè)事件

綁定的時(shí)候要選擇自定義方法

這個(gè)方法要我們自己定義，主要是將用戶(hù)的授權(quán)信息寫(xiě)入數(shù)據(jù)源中

export default async function({event, data}) {
  console.log(event.detail.avatarUrl)
  const result = await app.cloud.callModel({
    name:'user_ev6j94p',
    methodName:'wedaCreate',
    params:{
      openid:app.dataset.state.openid,
      nickName:event.detail.nickName,
      imageUrl:event.detail.avatarUrl
    }
  })
  $app.dataset.state.imageurl = event.detail.avatarUrl
  $app.dataset.state.userid = result._id
  console.log($app.dataset.state.userid)
  $app.dataset.state.islogin = true
}

寫(xiě)入方法本身不復(fù)雜，粉絲在照著教程做的時(shí)候最大的問(wèn)題是發(fā)現(xiàn)，點(diǎn)擊授權(quán)按鈕時(shí)候按鈕不自動(dòng)消失，可以反復(fù)注冊(cè)。第二個(gè)是頭像沒(méi)有自動(dòng)顯示。

要解決上邊的問(wèn)題，首先需要給注冊(cè)按鈕綁定條件展示。我們?cè)诘卿浌δ芾锒x了一個(gè)全局變量islogin。如果未注冊(cè)之前，這個(gè)變量的值是false，注冊(cè)之后就變成了true。我們給注冊(cè)按鈕的條件展示綁定表達(dá)式，對(duì)islogin取一下反就可以

!app.dataset.state.islogin

用戶(hù)的頭像我們可以直接從全局變量里綁定

用戶(hù)信息修改

當(dāng)把用戶(hù)信息寫(xiě)入之后，后續(xù)可能還有修改的需求，這就要求在頁(yè)面點(diǎn)擊修改按鈕時(shí)候?qū)⒂脩?hù)的數(shù)據(jù)標(biāo)識(shí)傳入修改頁(yè)面

數(shù)據(jù)綁定的時(shí)候我們從全局變量里選擇。有的粉絲可能會(huì)有疑問(wèn)，你這個(gè)userid是怎么有值呢？分為兩種情況，第一種是用戶(hù)剛注冊(cè)的時(shí)候就直接點(diǎn)修改，這個(gè)時(shí)候我們是在注冊(cè)的自定義方法呢獲取的用戶(hù)的數(shù)據(jù)標(biāo)識(shí)

  $app.dataset.state.userid = result._id

第二種情況是在下一次啟動(dòng)小程序我們?cè)谌稚芷诶锛虞d的用戶(hù)的數(shù)據(jù)標(biāo)識(shí)

app.dataset.state.userid = result.records[0]._id

這樣就保證點(diǎn)擊修改信息時(shí)候有值。當(dāng)然還有一種情況是用戶(hù)不點(diǎn)擊注冊(cè)按鈕直接點(diǎn)擊修改個(gè)人信息，這種情況數(shù)據(jù)庫(kù)是不允許提交的，報(bào)一個(gè)錯(cuò)也行。

然后就是在修改界面我們可以直接使用表單容器來(lái)實(shí)現(xiàn)個(gè)人信息的修改

這里注意的是我們的數(shù)據(jù)標(biāo)識(shí)是綁定我們頁(yè)面定義的參數(shù)變量即可

總結(jié)

我們本篇詳細(xì)的分解了一下用戶(hù)的登錄及注冊(cè)功能，這兩個(gè)場(chǎng)景在小程序開(kāi)發(fā)中還是挺常見(jiàn)的，關(guān)鍵是要概念清晰，設(shè)置準(zhǔn)確。把這個(gè)搭建好了，后邊結(jié)合角色授權(quán)的功能就可以按照自己的需要進(jìn)行功能拓展了。如果覺(jué)得有用，點(diǎn)贊、關(guān)注加評(píng)論呀。

到此這篇關(guān)于微信小程序登錄與注冊(cè)功能的實(shí)現(xiàn)詳解的文章就介紹到這了,更多相關(guān)小程序登錄與注冊(cè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: