微信小程式登入與註冊功能的實現詳解

2022-08-02 14:02:55

小程式中的登入

在小程式中有一個概念叫openid，這個相當於登入小程式使用者的唯一標識，每個微信使用者都不同。那要如何拿到使用者的唯一標識呢？在微搭低程式碼中是通過呼叫系統的api來獲取的

let userinfo = await app.utils.getWXContext()

我們通過這行程式碼的呼叫來獲取到使用者的唯一標識，獲取到之後我們其他頁面也需要使用，那就需要把他存起來。全域性變數的作用域是所有頁面都可見，所以我們需要在變數中定義一個全域性變數叫openid

在低碼編輯器中如果需要使用全域性變數的，是需要通過變數的路徑來存取，我們這裡的路徑是

$app.dataset.state.openid

既然變數已經定義了，我們就可以將獲取到的使用者資訊賦值給全域性變數

app.dataset.state.openid = userinfo.OPENID

賦值語句是用=號來表達，=號左邊的是需要賦值的變數，右邊是賦予的具體的值。我們這裡的userinfo是一個物件，使用了.的語法來獲取其中的一個屬性，OPENID 來賦值給全域性變數。

拿到openid其實就算實現了使用者的登入，然後我們可以使用openid作為查詢條件，去我們的使用者資料來源去載入資料。如果載入到了，我們就將獲取到的使用者資訊再賦值給全域性變數。目的是如果已經註冊過的使用者不再繼續往資料來源裡寫入資料，而是直接展示。

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

上邊程式碼的意思是，存取user_ev6j9rp資料來源，呼叫資料來源的wedaGetRecords方法，入參是openid=全域性變數獲取到的openid。key是你的查詢條件，eq表示做相等匹配，匹配的值是從全域性變數裡獲取。

那如何來判斷是否找到了呢？方法執行的返回結果是一個物件，它有一個屬性叫total，表示查詢到多少條資料。我們就可以通過判斷這個記錄總數是否大於等於1來判斷使用者是否已經存在了。

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
    }

如果存在，那麼我就給全域性變數賦值，分別給使用者的頭像賦值，使用者的資料標識賦值，還有就是給是否註冊賦予為真的結果。這三個全域性變數的定義如下：

還有就是考慮上述的程式碼在哪執行，因為我們一開啟小程式就要載入使用者資訊，所以應該是在全域性生命週期函數裡執行

我們需要有兩個地方都執行載入，一個是小程式一啟動時候，onAppLanch，另外一個就是小程式再次開啟的時候onAppShow方法中。全部程式碼如下：

/**
 * 可通過 app 獲取或修改全域性應用的 變數 狀態 等資訊
 * 具體可以console.info 在編輯器Console面板檢視更多資訊
 * 如果需要 async-await，請在方法前 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)
  }
}

使用者註冊

使用者登入的問題解決了之後，就是要考慮使用者的註冊問題。在微搭低程式碼獲取使用者資訊提供了對應的元件，我們可以往頁面中新增相應的元件

這個元件使用的時候要注意右側的屬性面板裡的資訊用途必須填寫，否則點選按鈕無法彈出授權按鈕來。

要想讓使用者資訊寫入資料來源中，我們需要給元件繫結事件，我們這裡繫結的是使用者授權資訊成功這個事件

繫結的時候要選擇自定義方法

這個方法要我們自己定義，主要是將使用者的授權資訊寫入資料來源中

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
}

寫入方法本身不復雜，粉絲在照著教學做的時候最大的問題是發現，點選授權按鈕時候按鈕不自動消失，可以反覆註冊。第二個是頭像沒有自動顯示。

要解決上邊的問題，首先需要給註冊按鈕繫結條件展示。我們在登入功能裡定義了一個全域性變數islogin。如果未註冊之前，這個變數的值是false，註冊之後就變成了true。我們給註冊按鈕的條件展示繫結表示式，對islogin取一下反就可以

!app.dataset.state.islogin

使用者的頭像我們可以直接從全域性變數裡繫結

使用者資訊修改

當把使用者資訊寫入之後，後續可能還有修改的需求，這就要求在頁面點選修改按鈕時候將使用者的資料標識傳入修改頁面

資料繫結的時候我們從全域性變數裡選擇。有的粉絲可能會有疑問，你這個userid是怎麼有值呢？分為兩種情況，第一種是使用者剛註冊的時候就直接點修改，這個時候我們是在註冊的自定義方法呢獲取的使用者的資料標識

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

第二種情況是在下一次啟動小程式我們在全域性生命週期裡載入的使用者的資料標識

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

這樣就保證點選修改資訊時候有值。當然還有一種情況是使用者不點選註冊按鈕直接點選修改個人資訊，這種情況資料庫是不允許提交的，報一個錯也行。

然後就是在修改介面我們可以直接使用表單容器來實現個人資訊的修改

這裡注意的是我們的資料標識是繫結我們頁面定義的引數變數即可

總結

我們本篇詳細的分解了一下使用者的登入及註冊功能，這兩個場景在小程式開發中還是挺常見的，關鍵是要概念清晰，設定準確。把這個搭建好了，後邊結合角色授權的功能就可以按照自己的需要進行功能拓展了。如果覺得有用，點贊、關注加評論呀。

到此這篇關於微信小程式登入與註冊功能的實現詳解的文章就介紹到這了,更多相關小程式登入與註冊內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

微信小程式登入與註冊功能的實現詳解

目錄

小程式中的登入

使用者註冊

使用者資訊修改

總結

熱門文章