小程序登陸註冊功能的實現

我們在開發小程序時，難免會用到登陸註冊功能。通常小程序有爲我們提供用戶授權登陸的功能，但是這個只能獲取用戶的頭像和暱稱，我們該怎麼樣來實現小程序賬號密碼的註冊和登陸呢，今天就來手把手的帶大家學習小程序登陸註冊功能的開發。

老規矩，先看效果圖

通過上圖可以看到我們主要實現了以下功能

• 1,賬號密碼登陸
• 2，賬號密碼註冊
• 3，退出登陸

下面我們就來看下具體實現

一，原理講解

因爲我們賬號密碼的註冊，就是把用戶設置的賬號密碼存到數據庫裏，登陸也是從數據庫裏取賬號和密碼來校驗。所以我們必須要有數據庫。如果用傳統的數據庫來做，比較麻煩，所以我們今天就藉助小程序雲開發數據庫來做。

二，編寫一個雲開發的小程序

雲開發的知識我講過很多遍了，還不知道雲開發是啥的同學可以翻看下我歷史文章，或者看下我錄製的雲開發基礎入門視頻：《5小時零基礎入門小程序雲開發》
編寫雲開發的時候有幾點注意的事項給大家說下

• 1，要先註冊小程序獲取appid，因爲只有appid你纔可以使用雲開發
• 2，記得在app.js裏初始化雲開發環境id，如下圖
  

三，設置用戶存儲用戶的數據庫（集合）

在雲開發管理後臺，點擊數據庫，然後點擊 + 號，添加user集合（數據表），如下圖

四，編寫註冊代碼

代碼其實很簡單，我這裏把對應的代碼給大家貼出來。

• 1，註冊頁面的wxml文件
  

• 2，註冊頁面的js文件

Page({
  data: {
    name: '',
    zhanghao: '',
    mima: ''
  },
  //獲取用戶名
  getName(event) {
    console.log('獲取輸入的用戶名', event.detail.value)
    this.setData({
      name: event.detail.value
    })
  },
  //獲取用戶賬號
  getZhangHao(event) {
    console.log('獲取輸入的賬號', event.detail.value)
    this.setData({
      zhanghao: event.detail.value
    })
  },
  // 獲取密碼
  getMiMa(event) {
    console.log('獲取輸入的密碼', event.detail.value)
    this.setData({
      mima: event.detail.value
    })
  },

  //註冊
  zhuce() {
    let name = this.data.name
    let zhanghao = this.data.zhanghao
    let mima = this.data.mima
    console.log("點擊了註冊")
    console.log("name", name)
    console.log("zhanghao", zhanghao)
    console.log("mima", mima)
    //校驗用戶名
    if (name.length < 2) {
      wx.showToast({
        icon: 'none',
        title: '用戶名至少2位',
      })
      return
    }
    if (name.length > 10) {
      wx.showToast({
        icon: 'none',
        title: '用戶名最多10位',
      })
      return
    }
    //校驗賬號
    if (zhanghao.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '賬號至少4位',
      })
      return
    }
    //校驗密碼
    if (mima.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '密碼至少4位',
      })
      return
    }
    //註冊功能的實現
    wx.cloud.database().collection('user').add({
      data: {
        name: name,
        zhanghao: zhanghao,
        mima: mima
      },
      success(res) {
        console.log('註冊成功', res)
        wx.showToast({
          title: '註冊成功',
        })
        wx.navigateTo({
          url: '../login/login',
        })
      },
      fail(res) {
        console.log('註冊失敗', res)
      }
    })
  }
})

• 3,註冊頁面的wxss（樣式）頁面很簡單
  
  我這隻做下簡單的樣式美化，主要還是來實現功能的。

五，編寫登陸頁面的代碼

• 1，登陸頁面的wxml文件
  
• 2，登陸頁的js（邏輯編寫）頁

Page({
  data: {
    zhanghao: '',
    mima: ''
  },
  //獲取輸入的賬號
  getZhanghao(event) {
    //console.log('賬號', event.detail.value)
    this.setData({
      zhanghao: event.detail.value
    })

  },
  //獲取輸入的密碼
  getMima(event) {
    // console.log('密碼', event.detail.value)
    this.setData({
      mima: event.detail.value
    })
  },
  //點擊登陸
  login() {
    let zhanghao = this.data.zhanghao
    let mima = this.data.mima
    console.log('賬號', zhanghao, '密碼', mima)
    if (zhanghao.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '賬號至少4位',
      })
      return
    }
    if (mima.length < 4) {
      wx.showToast({
        icon: 'none',
        title: '賬號至少4位',
      })
      return
    }


    //登陸
    wx.cloud.database().collection('user').where({
      zhanghao: zhanghao
    }).get({
      success(res) {
        console.log("獲取數據成功", res)
        let user = res.data[0]
        console.log("user", user)
        if (mima == user.mima) {
          console.log('登陸成功')
          wx.showToast({
            title: '登陸成功',
          })
          // wx.navigateTo({
          //   url: '../home/home?name=' + user.name,
          // })
          wx.navigateTo({
            url: '/pages/me/me',
          })
          //保存用戶登陸狀態
          wx.setStorageSync('user', user)
        } else {
          console.log('登陸失敗')
          wx.showToast({
            icon: 'none',
            title: '賬號或密碼不正確',
          })
        }
      },
      fail(res) {
        console.log("獲取數據失敗", res)
      }
    })

  }
})

• 3,樣式比較簡單
  

六，編寫個人中心登陸和未登陸狀態的展示，含退出登陸功能

• 1，wxml文件如下
  
• 2，js文件如下,退出登陸和保存登陸狀態也在裏面

Page({
  data: {
    loginOK: false
  },
  //去登陸頁
  denglu() {
    wx.navigateTo({
      url: '/pages/login/login',
    })
  },
  //去註冊頁
  zhuce() {
    wx.navigateTo({
      url: '/pages/index/index',
    })
  },
  onShow() {
    let user = wx.getStorageSync('user')
    if (user && user.name) {
      this.setData({
        loginOK: true,
        name: user.name
      })
    } else {
      this.setData({
        loginOK: false
      })
    }
  },

  //退出登陸
  tuichu() {
    wx.setStorageSync('user', null)
    let user = wx.getStorageSync('user')
    if (user && user.name) {
      this.setData({
        loginOK: true,
        name: user.name
      })
    } else {
      this.setData({
        loginOK: false
      })
    }
  }

})

• 3，個人中心登陸成功的狀態如下
  

到這裏我們就完整的實現了小程序的登陸註冊功能了，雖然比較簡單，沒有做密碼加密等一些複雜的操作，但是我們基本的登陸註冊原理就是這樣實現的，你只有先把最基礎的登陸註冊功能實現，學習後面複雜的登陸註冊，驗證碼登陸等一系列知識，纔會遊刃有餘。

我把這節登陸註冊功能的實現錄製了一套課程出來，感興趣的同學可以去看下，支持下石頭哥。
https://edu.csdn.net/course/play/26948/348188