有了雲開發我們不僅可以方便的獲取到使用者的openid，還可以通過雲開發的資料庫來儲存使用者資訊，進而實現小程式使用者的登陸與註冊功能。
本節知識點
- 1，雲開發的使用
- 2，雲函式的使用
- 3，雲資料庫的使用
- 4，使用者登陸
- 5，使用者註冊
涉及到三個頁面
- 1，登陸頁面
- 2，註冊頁面
- 3，登陸成功
下面來看具體的程式碼實現
一，註冊頁面實現
- 1,register.wxml
<!--pages/register/register.wxml-->
<input class='input' placeholder='請輸入使用者名稱' bindinput='inputName'></input>
<input class='input' placeholder='請輸入密碼' bindinput='inputPassword'></input>
<input class='input' placeholder='請輸入電話' bindinput='inputPhone'></input>
<input class='input' placeholder='請輸入地址' bindinput='inputAddress'></input>
<button class='button' type='primary' bindtap='register'>註冊</button>
複製程式碼- 2,register.js 需要注意的是我們註冊時需要使用到雲開發資料庫，在使用雲開發資料庫之前還需要初始化雲開發，程式碼裡都有註釋
// pages/register/register.js
let app = getApp();
// 獲取資料庫引用
const db = wx.cloud.database();
const userListDB = db.collection('userlist');
let name = null;
let password = null;
let phone = null;
let address = null;
Page({
/**
* 頁面的初始資料
*/
data: {
},
//輸入使用者名稱
inputName(evnet) {
name = evnet.detail.value;
},
//輸入密碼
inputPassword(evnet) {
password = evnet.detail.value;
},
//輸入手機號
inputPhone(evnet) {
phone = evnet.detail.value;
},
//輸入地址
inputAddress(evnet) {
address = evnet.detail.value;
},
//註冊
register() {
let that = this;
if (!app.checkNamePassword(name, password)) {
return;
}
if (!app.checkPhoneAddress(phone, address)) {
return;
}
//查詢使用者是否已經註冊
userListDB.where({
_openid: app.globalData.openid // 填入當前使用者 openid
}).get({
success: function(res) {
let userInfos = res.data;
console.log(res.data)
if (userInfos && userInfos.length > 0) {
let user = userInfos[0];
if (user && user.name) {
wx.showModal({
title: '提示',
content: '您已註冊，確定要更新賬號密碼嗎？',
success: function(res) {
if (res.confirm) {
console.log('使用者點選確定')
that.saveuserinfo();
}
}
})
}
} else {
that.saveuserinfo();
}
}
})
},
saveuserinfo() {
let that = this;
userListDB.doc('_openid').set({
data: {
name: name,
password: password,
phone: phone,
address: address
}
}).then(res => {
app.showTips('註冊成功');
})
},
})
複製程式碼- 3，在app.js裡初始化雲開發 下面的prod-8aa9a5就是我們雲開發的環境id
//app.js
App({
onLaunch: function() {
//雲開發初始化
wx.cloud.init({
env: 'prod-8aa9a5',
traceUser: true
})
}
})
複製程式碼
- 4，註冊成功後，我們在雲開發控制檯的資料庫裡就可以看到註冊資訊了。
二，註冊成功後，就要實現登陸功能了
我們這裡的登陸功能需要用到第一步註冊時的使用者名稱和密碼，也就是上圖資料庫裡的name和password欄位
- 1，登陸頁面實現程式碼 login.wxml
<!--pages/login/login.wxml-->
<input class='input' placeholder='請輸入使用者名稱' bindinput='inputName'></input>
<input class='input' placeholder='請輸入密碼' bindinput='inputPassword'></input>
<button class='button' type='primary' bindtap='login'>登陸</button>
<button class='button' type='primary' bindtap='register'>去註冊</button>
複製程式碼- 2,登陸功能實現
// pages/login/login.js
let app = getApp();
// 獲取資料庫引用
const db = wx.cloud.database();
const userListDB = db.collection('userlist');
let name = null;
let password = null;
Page({
data: {
},
//輸入使用者名稱
inputName(evnet) {
console.log(evnet.detail.value)
name = evnet.detail.value;
},
//輸入密碼
inputPassword(evnet) {
password = evnet.detail.value;
},
//登陸
login() {
let that = this;
if (!app.checkNamePassword(name, password)) {
return;
}
//登陸獲取使用者資訊
userListDB.where({
_openid: app.globalData.openid
}).get({
success: function(res) {
let userInfos = res.data;
console.log(res.data)
if (userInfos && userInfos.length > 0) {
let user = userInfos[0];
if (user.name !== name) {
app.showTips('使用者名稱不匹配');
} else if (user.password !== password) {
app.showTips('密碼不匹配');
} else {
app.showTips('登陸成功');
let jsonStr=JSON.stringify(user);
wx.navigateTo({
url: '../index/index?jsonStr=' + jsonStr,
})
}
} else {
app.showTips('使用者不存在');
}
}
})
},
register() {
wx.navigateTo({
url: '../register/register',
})
},
})
複製程式碼- 3，登陸成功後顯示使用者資訊
電話號碼是胡亂填的，想聯絡我可以__加我微信2501902696__
這樣就可以實現小程式的登陸與註冊了。