有声,好看的电视剧

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

微信小程序登陸注冊功能的實現(xiàn)代碼-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司長期為近1000家客戶提供的網(wǎng)站建設服務，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為東豐企業(yè)提供專業(yè)的成都網(wǎng)站建設、成都網(wǎng)站設計，東豐網(wǎng)站改版等技術(shù)服務。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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

微信小程序登陸注冊功能的實現(xiàn)代碼

通過上圖可以看到我們主要實現(xiàn)了以下功能1,賬號密碼登陸2，賬號密碼注冊3，退出登陸下面我們就來看下具體實現(xiàn)一，原理講解

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

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

云開發(fā)的知識我講過很多遍了，還不知道云開發(fā)是啥的同學可以翻看下我歷史文章，或者看下我錄制的云開發(fā)基礎(chǔ)入門視頻：《5小時零基礎(chǔ)入門小程序云開發(fā)》

編寫云開發(fā)的時候有幾點注意的事項給大家說下

1，要先注冊小程序獲取appid，因為只有appid你才可以使用云開發(fā)

2，記得在app.js里初始化云開發(fā)環(huán)境id，如下圖

微信小程序登陸注冊功能的實現(xiàn)代碼

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

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

微信小程序登陸注冊功能的實現(xiàn)代碼

四，編寫注冊代碼

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

1，注冊頁面的wxml文件

微信小程序登陸注冊功能的實現(xiàn)代碼

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
}
//注冊功能的實現(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)
 }
})
}
})

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享標題：微信小程序登陸注冊功能的實現(xiàn)代碼-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://fisionsoft.com.cn/article/cecodi.html

新聞中心

其他資訊