藉助雲開發實現小程式的登陸註冊功能
- 2019 年 12 月 10 日
- 筆記
我們在開發小程式時，難免會用到登陸註冊功能。通常小程式有為我們提供用戶授權登陸的功能，但是這個只能獲取用戶的頭像和昵稱，我們該怎麼樣來實現小程式帳號密碼的註冊和登陸呢，今天就來手把手的帶大家學習小程式登陸註冊功能的開發。
老規矩，先看效果圖
通過上圖可以看到我們主要實現了以下功能
- 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文件
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) } }) } })
- 2，登陸頁的js（邏輯編寫）頁
- 3,樣式比較簡單
六，編寫個人中心登陸和未登陸狀態的展示，含退出登陸功能
- 1，wxml文件如下
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 }) } } })
- 2，js文件如下,退出登陸和保存登陸狀態也在裡面
- 3，個人中心登陸成功的狀態如下
到這裡我們就完整的實現了小程式的登陸註冊功能了，雖然比較簡單，沒有做密碼加密等一些複雜的操作，但是我們基本的登陸註冊原理就是這樣實現的，你只有先把最基礎的登陸註冊功能實現，學習後面複雜的登陸註冊，驗證碼登陸等一系列知識，才會遊刃有餘。
我把這節登陸註冊功能的實現錄製了一套課程出來，感興趣的同學可以去看下，支援下石頭哥。
https://edu.csdn.net/course/play/26948/348188
