微信小程序云开发——实现线上注册，登录的逻辑，并保存账号到云数据库（二）：注册

要有遥不可及的梦想，也要有脚踏实地的本事。----------- 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 + ':' + sdb.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

微信小程序云开发——实现线上注册，登录的逻辑，并保存账号到云数据库（二）：注册相关推荐

微信小程序直播助力深圳线上购物节数百场品牌小程序开播
3月8日消息,自2月下旬微信宣布小程序直播能力公测以来,零售商家在复工复产关键时期纷纷"入局"小程序直播.微信发布消息称,3月8日"女神节"当天,数百个品牌将同 ...
微信第一个支持小程序版本号与服务器不符,解决微信小程序更新发布之后线上还是之前的老版本...
微信小程序每次发布更新后线上还是之前的老版本,要删除后重新打开才会显示新版本,特烦. 不知道是不是太久没去看文档了,发现 api 中增加了更新 wx.getUpdateManager(),于是立马来试 ...
解决微信小程序更新发布之后线上还是之前的老版本
微信小程序每次发布更新后线上还是之前的老版本,要删除后重新打开才会显示新版本,特烦. 不知道是不是太久没去看文档了,发现 api 中增加了更新 wx.getUpdateManager(),于是立马来试 ...
提交微信小程序的项目为线上版本
1.打开微信开发者工具,导入代码,点击上传 2.成功后的提示,登录微信小程序官网(点击版本管理) 3.然后就能看到你的版本号(设置为1.0.0)或此版本以上(默认1.0.0以上的才可以变成线上版本) ...
微信小程序云开发——实现线上注册，登录的逻辑，并保存账号到云数据库（一）：新建云服务小程序项目
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 首先要实现的是用微信开发者工具新建一个项目: 我们先要做的是注册一个小程序,用 ...
微信小程序云开发——实现线上注册，登录的逻辑，并保存账号到云数据库（三）：登录
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 继上一章节柚子完成了注册的逻辑代码,这一章节讲解登录逻辑代码: 下面是柚子写的 ...
微信小程序云开发——实现线上注册，登录的逻辑，并保存账号到云数据库（四）：修改密码
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 继上一章节柚子完成了登录的逻辑代码已经好久了,都给忘了,这一章节补上修改密码逻 ...
微信小程序-传统开发模式实现授权注册登录流程【超详细，附源码】
微信小程序——传统开发模式与云开发模式对比
目录 1.传统开发模式与云开发模式的对比图 2.云开发技术能力说明 3.云开发技术特点 1.传统开发模式与云开发模式的对比图通过传统开发模式与云开发模式的对比图可以看出传统开发模式需要开发者关注 ...

微信小程序云开发——实现线上注册，登录的逻辑，并保存账号到云数据库（二）：注册

微信小程序云开发——实现线上注册，登录的逻辑，并保存账号到云数据库（二）：注册相关推荐

最新文章

热门文章

微信小程序云开发——实现 线上注册，登录的逻辑，并保存账号到云数据库（ 二 ）：注册

微信小程序云开发——实现 线上注册，登录的逻辑，并保存账号到云数据库（ 二 ）：注册相关推荐

最新文章

热门文章

微信小程序云开发——实现线上注册，登录的逻辑，并保存账号到云数据库（二）：注册

微信小程序云开发——实现线上注册，登录的逻辑，并保存账号到云数据库（二）：注册相关推荐