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

咱們在開發小程序時，不免會用到登錄註冊功能。一般小程序有爲咱們提供用戶受權登錄的功能，可是這個只能獲取用戶的頭像和暱稱，咱們該怎麼樣來實現小程序帳號密碼的註冊和登錄呢，今天就來手把手的帶你們學習小程序登錄註冊功能的開發。

老規矩，先看效果圖

經過上圖能夠看到咱們主要實現瞭如下功能

• 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://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWJiNmQzMWQxNjBmZjQ5MjA?x-oss-process=image/format,png)

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

我把這節登錄註冊功能的實現錄製了一套課程出來，感興趣的同窗能夠去看下，支持下石頭哥。