我们在开发小程序时,难免会用到登陆注册功能。通常小程序有为我们提供用户授权登陆的功能,但是这个只能获取用户的头像和昵称,我们该怎么样来实现小程序账号密码的注册和登陆呢,今天就来手把手的带大家学习小程序登陆注册功能的开发。
老规矩,先看效果图
通过上图可以看到我们主要实现了以下功能,账号密码登陆2,账号密码注册3,退出登陆下面我们就来看下具体实现一,原理讲解
因为我们账号密码的注册,就是把用户设置的账号密码存到数据库里,登陆也是从数据库里取账号和密码来校验,所以我们必须要有数据库。如果用传统的数据库来做,比较麻烦,所以我们今天就借助小程序云开发数据库来做。
云开发的知识我讲过很多遍了,还不知道云开发是啥的同学可以翻看下我历史文章,或者看下我录制的云开发基础入门视频:《5小时零基础入门小程序云开发》
编写云开发的时候有几点注意的事项给大家说下
1时,要先注册小程序获取appid,因为只有appid你才可以使用云开发
2,记得在应用。js里初始化云开发环境id,如下图
在云开发管理后台,点击数据库,然后点击+号,添加用户集合(数据表),如下图
代码其实很简单,我这里把对应的代码给大家贴出来。
1,注册页面的wxml文件
2,注册页面的js文件
页面({
数据:{
名称:”,
公司:”,
米玛:“
}，//获取用户名
getName () {
控制台。日志(“获取输入的用户名”,event.detail.value)
this.setData ({
名称:event.detail.value
}）
}，//获取用户账号
getZhangHao(事件){
控制台。日志(“获取输入的账号”,event.detail.value)
this.setData ({
公司:event.detail.value
}）
}，//获取密码
getMiMa(事件){
控制台。日志(“获取输入的密码”,event.detail.value)
this.setData ({
米玛:event.detail.value
}）
}，//注册
zhuce () {
让name=this.data.name
让公司=this.data.zhanghao
让米玛=this.data.mima
console.log(“点击了注册”)
控制台。日志(“名字”,名称)
控制台。日志(“公司”,公司)
控制台。日志(“米玛”,米玛)//校验用户名
如果名字。长度& lt;2) {
wx.showToast ({
图标:“没有”,
标题:“用户名至少2位,
}）
返回
}
如果名字。长度比;10){
wx.showToast ({
图标:“没有”,
标题:“用户名最多10位,
}）
返回
}//校验账号
如果(公司。长度& lt;4){
wx.showToast ({
图标:“没有”,
标题:“账号至少4位”,
}）
返回
}//校验密码
如果(米玛。长度& lt;4){
wx.showToast ({
图标:“没有”,
标题:“密码至少4位”,
}）
返回
}//注册功能的实现
wx.cloud.database () .collection阀门(“用户”)({
数据:{
名称:姓名、
公司:公司
米玛:米玛
}，
成功(res) {
控制台。日志(注册成功’,res)
wx.showToast ({
标题:“注册成功”,
}）
wx.navigateTo ({
url:“. ./登录/登录”,
}）
}，
失败(res) {
控制台。日志(注册失败”,res)
}
}）
}
})
3注册页面的wxs(样式)页面很简单
