大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
我们在开发小程序时,难免会用到登陆注册功能。通常小程序有为我们提供用户授权登陆的功能,但是这个只能获取用户的头像和昵称,我们该怎么样来实现小程序账号密码的注册和登陆呢,今天就来手把手的带大家学习小程序登陆注册功能的开发。
公司主营业务:成都网站建设、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出九原免费做网站回馈大家。
因为我们账号密码的注册,就是把用户设置的账号密码存到数据库里,登陆也是从数据库里取账号和密码来校验。所以我们必须要有数据库。如果用传统的数据库来做,比较麻烦,所以我们今天就借助小程序云开发数据库来做。
云开发的知识我讲过很多遍了,还不知道云开发是啥的同学可以翻看下我历史文章,或者看下我录制的云开发基础入门视频:《5小时零基础入门小程序云开发》
编写云开发的时候有几点注意的事项给大家说下
在云开发管理后台,点击数据库,然后点击 + 号,添加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)
}
})
}
})
2,登陆页的js(逻辑编写)页
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文件如下,退出登陆和保存登陆状态也在里面
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
})
}
}
})
- 3,个人中心登陆成功的状态如下
![ ](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82MjczNzEzLWJiNmQzMWQxNjBmZjQ5MjA?x-oss-process=image/format,png)
#### 到这里我们就完整的实现了小程序的登陆注册功能了,虽然比较简单,没有做密码加密等一些复杂的操作,但是我们基本的登陆注册原理就是这样实现的,你只有先把最基础的登陆注册功能实现,学习后面复杂的登陆注册,验证码登陆等一系列知识,才会游刃有余。
我把这节登陆注册功能的实现录制了一套课程出来,感兴趣的同学可以去看下,支持下石头哥。