微信小程序云开发 / 开普饭

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

这一章讲解的是用户注册的逻辑：

继上一章节开通云服务之后，首先要做的就是创建一个数据库集合，用来存放用户的注册的数据，比如，用户名、密码等

按照步骤，点击数据库，然后点击加号，输入数据库集合表名称即可

创建完成之后，我们就要写页面了，新建注册页面：

在我们写页面之前还要在app.js中做下配置，配置如下：

if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力')
} else {
wx.cloud.init({
// env 参数说明：
// env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
// 如不填则使用默认环境（第一个创建的环境）
// env: 'my-env-id',
traceUser: true,
})
}

这段代码要放在onLaunch: function (){}里面，获取用户信息的下面，配置完成之后，即可开始完成注册页面代码：

下面是我自己写的一套注册页面，仅供参考：

wxml:

<view class="container">
<image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/login_bg.jpg"></image>
</view>
<view class="login_box">
<view class="section">
<input placeholder="请输入用户名" placeholder-class="color" bindblur='username' />
<image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/username.png"></image>
</view>
<view class="section">
<input type='number' maxlength='11' placeholder="请输入手机号" placeholder-class="color" bindblur='mobile' />
<image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/mobile.png"></image>
</view>
<view class="section">
<input password="true" placeholder="请输入密码" placeholder-class="color" bindblur='pass1' />
<image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/pass.png"></image>
</view>
<view class="section">
<input password="true" placeholder="确认密码" placeholder-class="color" bindblur='pass2' />
<image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/pass.png"></image>
</view>
<button class="register" type="warn" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">注册</button>
</view>

wxss:

/* pages/login/login.wxss */
.container {
position: absolute;
width: 100%;
height: 100%;
}
.container image {
width: 100%;
height: 100%;
}
.login_box{
width: 90%;
position: absolute;
top: 10%;
left: 5%;
}
.section{
width: 100%;
border-bottom: 4rpx solid #FFF;
margin-top: 40rpx;
position: relative;
}
.section input{
height: 100rpx;
color: #FFF;
box-sizing: border-box;
padding-left: 80rpx;
font-size: 36rpx;
}
.section image{
width: 60rpx;
height: 60rpx;
position: absolute;
top: 20rpx;
left: 10rpx;
}
.color{
color: #FFF;
}
.register{
margin-top: 200rpx;
}
.register{
background: #fa5151 !important;
color: #FFF !important;
}

app.wxss

.container {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}

大致样式是这样的：

接下来是js逻辑代码

const db = wx.cloud.database() //这一句必不可少
Page({
/**
* 页面的初始数据
*/
data: {
username: '', //用户名
mobile: '', //手机号
pass1: '', //密码
pass2: '', //确认密码
},
// 用户名失去焦点
username(e) {
this.setData({
username: e.detail.value
})
},
// 手机号失去焦点
mobile(e) {
this.setData({
mobile: e.detail.value
})
},
// 密码失去焦点
pass1(e) {
var pattern = /^[\w_]{8,16}$/; //密码正则
if (!pattern.test(e.detail.value)) {
this.setData({
pass1: ''
})
wx.showToast({
title: '密码长度必须为8-16位，并且由字母，数字或下划线组成',
icon: 'none',
duration: 3000
})
} else {
this.setData({
pass1: e.detail.value
})
}
},
// 确认密码失去焦点
pass2(e) {
this.setData({
pass2: e.detail.value
})
},
// 点击注册按钮
bindGetUserInfo: function(e){
if (e.detail.userInfo) {
//用户按了允许授权按钮
wx.showLoading({
title: '正在注册...',
})
if (this.data.username == '') {
wx.showToast({
title: '用户名不能为空',
icon: 'none',
duration: 2000
})
} else if (this.data.mobile == '') {
wx.showToast({
title: '手机号不能为空',
icon: 'none',
duration: 2000
})
} else if (!(/^1[3456789]\d{9}$/.test(this.data.mobile))) {
wx.showToast({
title: '手机号码格式有误，请重新输入！',
icon: 'none',
duration: 2000
})
} else if (this.data.pass1 == '') {
wx.showToast({
title: '密码不能为空',
icon: 'none',
duration: 2000
})
} else if (this.data.pass2 == '') {
wx.showToast({
title: '请再次输入密码',
icon: 'none',
duration: 2000
})
} else if (this.data.pass1 != this.data.pass2) {
wx.showToast({
title: '两次密码输入不一致，请重新输入!',
icon: 'none',
duration: 2000
})
} else {
var that = this
// 注册这个账户之前，我们首先要做的就是查询一下这个集合表中是否已经存在过这个用户了
db.collection('login_info').where({ //查询接口
username: that.data.username //传参，输入的用户名
})
.get({
success: function(res) {
if (res.data.length == 0) { //判断用户名是否被注册过，等于空说明没被查询到，就是没有注册过，
db.collection('login_info').where({ //我写的数用户名和手机号都可以登录，所以同一个手机号和用户名只能算一个账号，也要验证一下手机号是否被注册过
mobile: that.data.mobile
})
.get({
success: function(res) {
if (res.data.length == 0) { //判断手机号是否被注册过，等于空说明没被查询到，就是没有注册过，
// 获取当前时间，写入数据库，可以知道此账号是何时创建
var myDate = new Date();
var y = myDate.getFullYear();
var m = myDate.getMonth() + 1;
var d = myDate.getDate();
var h = myDate.getHours();
var ms = myDate.getMinutes();
var s = myDate.getSeconds();
var time = y + '-' + m + '-' + d + ' ' + h + ':' + ms + ':' + s
db.collection('login_info').add({ //验证完成之后，添加的接口
data: {
username: that.data.username, //用户名
mobile: that.data.mobile, //手机号
pass1: that.data.pass1, //密码
time: time //创建时间
},
success: function(res) {
if (res.errMsg == 'collection.add:ok') { //接口调取成功，也就是注册成功
// 这里面你可以加一下注册成功之后的逻辑，是直接登录也好，或者是跳到登录页面页面
wx.hideLoading();
wx.showToast({
title: '注册成功',
icon: 'none'
})
}
}
})
} else {
wx.showToast({
title: '此手机号已被别人注册，换一个试试！',
icon: 'none',
duration: 2000
})
}
}
})
} else {
wx.showToast({
title: '此用户名已被别人注册，换一个试试！',
icon: 'none',
duration: 2000
})
}
}
})
}
} else {
//用户按了拒绝按钮
wx.showModal({
title: '警告',
content: '您点击了拒绝授权，将无法进行账号注册，请授权之后再注册!!!',
showCancel: false,
confirmText: '返回授权',
success: function(res) {}
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})

这里面注释讲解已经写的很清楚了，如果有看不明白的小伙伴，可以在下方留言

点击注册，提示注册成功之后，就可以看到我们的数据库已经增加了这一条数据

如此，到这一步，我们的注册逻辑已经完成，希望能帮助到一些朋友，有不明白的可以在下方留言

下一章讲解登录逻辑:https://blog.csdn.net/qq_43052274/article/details/105269351

微信小程序云开发

相关推荐