我們?cè)陂_發(fā)小程序時(shí)，難免會(huì)用到登陸注冊(cè)功能。通常小程序有為我們提供用戶授權(quán)登陸的功能，但是這個(gè)只能獲取用戶的頭像和昵稱，我們?cè)撛趺礃觼韺?shí)現(xiàn)小程序賬號(hào)密碼的注冊(cè)和登陸呢，今天就來手把手的帶大家學(xué)習(xí)小程序登陸注冊(cè)功能的開發(fā)。
公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站建設(shè)、成都做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出九原免費(fèi)做網(wǎng)站回饋大家。
因?yàn)槲覀冑~號(hào)密碼的注冊(cè)，就是把用戶設(shè)置的賬號(hào)密碼存到數(shù)據(jù)庫(kù)里，登陸也是從數(shù)據(jù)庫(kù)里取賬號(hào)和密碼來校驗(yàn)。所以我們必須要有數(shù)據(jù)庫(kù)。如果用傳統(tǒng)的數(shù)據(jù)庫(kù)來做，比較麻煩，所以我們今天就借助小程序云開發(fā)數(shù)據(jù)庫(kù)來做。
云開發(fā)的知識(shí)我講過很多遍了，還不知道云開發(fā)是啥的同學(xué)可以翻看下我歷史文章，或者看下我錄制的云開發(fā)基礎(chǔ)入門視頻：《5小時(shí)零基礎(chǔ)入門小程序云開發(fā)》
編寫云開發(fā)的時(shí)候有幾點(diǎn)注意的事項(xiàng)給大家說下
在云開發(fā)管理后臺(tái)，點(diǎn)擊數(shù)據(jù)庫(kù)，然后點(diǎn)擊 + 號(hào)，添加user集合（數(shù)據(jù)表），如下圖
代碼其實(shí)很簡(jiǎn)單，我這里把對(duì)應(yīng)的代碼給大家貼出來。
1，注冊(cè)頁(yè)面的wxml文件
2，注冊(cè)頁(yè)面的js文件
重慶分公司
重慶分公司
Page({
data: {
name: '',
zhanghao: '',
mima: ''
},
//獲取用戶名
getName(event) {
console.log('獲取輸入的用戶名', event.detail.value)
this.setData({
name: event.detail.value
})
},
//獲取用戶賬號(hào)
getZhangHao(event) {
console.log('獲取輸入的賬號(hào)', event.detail.value)
this.setData({
zhanghao: event.detail.value
})
},
// 獲取密碼
getMiMa(event) {
console.log('獲取輸入的密碼', event.detail.value)
this.setData({
mima: event.detail.value
})
},
//注冊(cè)
zhuce() {
let name = this.data.name
let zhanghao = this.data.zhanghao
let mima = this.data.mima
console.log("點(diǎn)擊了注冊(cè)")
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)賬號(hào)
if (zhanghao.length < 4) {
wx.showToast({
icon: 'none',
title: '賬號(hào)至少4位',
})
return
}
//校驗(yàn)密碼
if (mima.length < 4) {
wx.showToast({
icon: 'none',
title: '密碼至少4位',
})
return
}
//注冊(cè)功能的實(shí)現(xiàn)
wx.cloud.database().collection('user').add({
data: {
name: name,
zhanghao: zhanghao,
mima: mima
},
success(res) {
console.log('注冊(cè)成功', res)
wx.showToast({
title: '注冊(cè)成功',
})
wx.navigateTo({
url: '../login/login',
})
},
fail(res) {
console.log('注冊(cè)失敗', res)
}
})
}
})
2，登陸頁(yè)的js（邏輯編寫）頁(yè)
Page({
data: {
zhanghao: '',
mima: ''
},
//獲取輸入的賬號(hào)
getZhanghao(event) {
//console.log('賬號(hào)', 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('賬號(hào)', zhanghao, '密碼', mima)
if (zhanghao.length < 4) {
wx.showToast({
icon: 'none',
title: '賬號(hào)至少4位',
})
return
}
if (mima.length < 4) {
wx.showToast({
icon: 'none',
title: '賬號(hào)至少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: '賬號(hào)或密碼不正確',
})
}
},
fail(res) {
console.log("獲取數(shù)據(jù)失敗", res)
}
})
}
})
2，js文件如下,退出登陸和保存登陸狀態(tài)也在里面
Page({
data: {
loginOK: false
},
//去登陸頁(yè)
denglu() {
wx.navigateTo({
url: '/pages/login/login',
})
},
//去注冊(cè)頁(yè)
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，個(gè)人中心登陸成功的狀態(tài)如下
#### 到這里我們就完整的實(shí)現(xiàn)了小程序的登陸注冊(cè)功能了，雖然比較簡(jiǎn)單，沒有做密碼加密等一些復(fù)雜的操作，但是我們基本的登陸注冊(cè)原理就是這樣實(shí)現(xiàn)的，你只有先把最基礎(chǔ)的登陸注冊(cè)功能實(shí)現(xiàn)，學(xué)習(xí)后面復(fù)雜的登陸注冊(cè)，驗(yàn)證碼登陸等一系列知識(shí)，才會(huì)游刃有余。
我把這節(jié)登陸注冊(cè)功能的實(shí)現(xiàn)錄制了一套課程出來，感興趣的同學(xué)可以去看下，支持下石頭哥。
