我們在開發(fā)小程序時，難免會用到登陸注冊功能。通常小程序有為我們提供用戶授權(quán)登陸的功能，但是這個只能獲取用戶的頭像和昵稱，我們該怎么樣來實(shí)現(xiàn)小程序賬號密碼的注冊和登陸呢，今天就來手把手的帶大家學(xué)習(xí)小程序登陸注冊功能的開發(fā)。

公司主營業(yè)務(wù)：成都網(wǎng)站建設(shè)、成都做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出九原免費(fèi)做網(wǎng)站回饋大家。

老規(guī)矩，先看效果圖

通過上圖可以看到我們主要實(shí)現(xiàn)了以下功能

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

  下面我們就來看下具體實(shí)現(xiàn)

  一，原理講解

  因?yàn)槲覀冑~號密碼的注冊，就是把用戶設(shè)置的賬號密碼存到數(shù)據(jù)庫里，登陸也是從數(shù)據(jù)庫里取賬號和密碼來校驗(yàn)。所以我們必須要有數(shù)據(jù)庫。如果用傳統(tǒng)的數(shù)據(jù)庫來做，比較麻煩，所以我們今天就借助小程序云開發(fā)數(shù)據(jù)庫來做。

二，編寫一個云開發(fā)的小程序

云開發(fā)的知識我講過很多遍了，還不知道云開發(fā)是啥的同學(xué)可以翻看下我歷史文章，或者看下我錄制的云開發(fā)基礎(chǔ)入門視頻：《5小時零基礎(chǔ)入門小程序云開發(fā)》
編寫云開發(fā)的時候有幾點(diǎn)注意的事項(xiàng)給大家說下

• 1，要先注冊小程序獲取appid，因?yàn)橹挥衋ppid你才可以使用云開發(fā)
• 2，記得在app.js里初始化云開發(fā)環(huán)境id，如下圖
  

三，設(shè)置用戶存儲用戶的數(shù)據(jù)庫（集合）

在云開發(fā)管理后臺，點(diǎn)擊數(shù)據(jù)庫，然后點(diǎn)擊 + 號，添加user集合（數(shù)據(jù)表），如下圖

四，編寫注冊代碼

代碼其實(shí)很簡單，我這里把對應(yīng)的代碼給大家貼出來。

• 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("點(diǎn)擊了注冊")
  console.log("name", name)
  console.log("zhanghao", zhanghao)
  console.log("mima", mima)
  //校驗(yàn)用戶名
  if (name.length < 2) {
    wx.showToast({
      icon: 'none',
      title: '用戶名至少2位',
    })
    return
  }
  if (name.length > 10) {
    wx.showToast({
      icon: 'none',
      title: '用戶名最多10位',
    })
    return
  }
  //校驗(yàn)賬號
  if (zhanghao.length < 4) {
    wx.showToast({
      icon: 'none',
      title: '賬號至少4位',
    })
    return
  }
  //校驗(yàn)密碼
  if (mima.length < 4) {
    wx.showToast({
      icon: 'none',
      title: '密碼至少4位',
    })
    return
  }
  //注冊功能的實(shí)現(xiàn)
  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（樣式）頁面很簡單
  
  我這只做下簡單的樣式美化，主要還是來實(shí)現(xiàn)功能的。

五，編寫登陸頁面的代碼

• 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
  })
  },
  //點(diǎn)擊登陸
  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("獲取數(shù)據(jù)成功", 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',
        })
        //保存用戶登陸狀態(tài)
        wx.setStorageSync('user', user)
      } else {
        console.log('登陸失敗')
        wx.showToast({
          icon: 'none',
          title: '賬號或密碼不正確',
        })
      }
    },
    fail(res) {
      console.log("獲取數(shù)據(jù)失敗", res)
    }
  })
  
  }
  })

• 3,樣式比較簡單
  

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

• 1，wxml文件如下
  

• 2，js文件如下,退出登陸和保存登陸狀態(tài)也在里面

  
  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，個人中心登陸成功的狀態(tài)如下
![ ](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWJiNmQzMWQxNjBmZjQ5MjA?x-oss-process=image/format,png)

#### 到這里我們就完整的實(shí)現(xiàn)了小程序的登陸注冊功能了，雖然比較簡單，沒有做密碼加密等一些復(fù)雜的操作，但是我們基本的登陸注冊原理就是這樣實(shí)現(xiàn)的，你只有先把最基礎(chǔ)的登陸注冊功能實(shí)現(xiàn)，學(xué)習(xí)后面復(fù)雜的登陸注冊，驗(yàn)證碼登陸等一系列知識，才會游刃有余。

我把這節(jié)登陸注冊功能的實(shí)現(xiàn)錄制了一套課程出來，感興趣的同學(xué)可以去看下，支持下石頭哥。

文章標(biāo)題：小程序登陸注冊功能的實(shí)現(xiàn)
轉(zhuǎn)載來源：http://www.rwnh.cn/article26/gshojg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、關(guān)鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站收錄、軟件開發(fā)、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)