业务流程
- 1.进入小程序到登录/注册界面
- 2.用户未注册时进入注册界面进行用户注册,注册完成后自动跳转至登录界面(符合常见业务流程)
- 3.用户成功登录后进入个人中心页(此部分涉及用户信息的本地缓存与获取)
一,用户信息数据库结构
别忘记更改数据集合权限
二,整体代码
1.登录/注册、个人中心页
- me.wxml
<!-- 未登录 -->
<view wx:if="{{!loginOK}}">
<button type="primary" class="zuche" bindtap="denglu">登陆</button>
<button type="primary" class="zuche" bindtap="zhuce">注册</button>
</view>
<!-- 登陆成功 -->
<view wx:else class="login-ok">
<text>登陆成功</text>
<view>
<text>{{name}}</text>
</view>
<button bindtap="tuichu">退出</button>
</view>
- me.wxss
/* pages/me/me.wxss */
.zuche{
margin-top: 50rpx;
}
.login-ok{
text-align: center;
}
- me.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
})
}
}
})
2.用户注册页
- index.wxml
输入用户名
<input class="input" bindinput="getName"></input>
输入用户账号
<input class="input" bindinput="getZhangHao"></input>
输入您的密码
<input class="input" bindinput="getMiMa"></input>
<button bindtap="zhuce" type="primary">注册</button>
- index.wxss
.input{
border: 1px solid gainsboro;
margin: 15rpx;
}
- index.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('yunkaifa_user').add({
data: {
name: name,
zhanghao: zhanghao,
mima: mima
},
success(res) {
console.log('注册成功', res)
wx.showToast({
title: '注册成功',
})
//注册成功后立即跳转至登录界面,符合常用app的业务逻辑
wx.navigateTo({
url: '../login/login',
})
},
fail(res) {
console.log('注册失败', res)
}
})
}
})
3.用户登录界面
- login.wxml
输入账号:
<input class="input" bindinput="getZhanghao"></input>
输入密码:
<input class="input" bindinput="getMima"></input>
<button type="primary" bindtap="login">登陆</button>
- login.wxss
/* pages/login/login.wxss */
.input{
border: 1px solid gainsboro;
margin: 20rpx;
}
- login.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('yunkaifa_user').where({
zhanghao: zhanghao
}).get()
.then(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: '/pages/me/me',
})
//保存用户登陆状态,固定下保存的关键字,符合只保存本机用户信息的业务逻辑
wx.setStorageSync('user', user)
} else {
console.log('登陆失败')
wx.showToast({
icon: 'none',
title: '账号或密码不正确',
})
}
})
.catch(err => {
console.log("获取数据失败", err)
wx.showToast({
icon: 'none',
title: '账号或密码不正确',
})
})
}
})