借助小程序云开发实现小程序的登陆注册功能
有了云开发我们不仅可以方便的获取到用户的openid,还可以通过云开发的数据库来存储用户信息,进而实现小程序用户的登陆与注册功能。本节知识点1,云开发的使用2,云函数的使用3,云数据库的使用4,用户登陆5,用户注册涉及到三个页面1,登陆页面2,注册页面3,登陆成功下面来看具体的代码实现一,注册页面实现1,register.wxml<!--pa...
·
小程序云开发讲解视频:https://edu.csdn.net/course/detail/9604
有了云开发我们不仅可以方便的获取到用户的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__
这样就可以实现小程序的登陆与注册了。
想要完整源码或者有小程序相关的问题,可以加我微信2501902696(备注小程序)
10天零基础入门小程序系列在线视频教程
更多推荐
已为社区贡献15条内容
所有评论(0)