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

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

继上一章节柚子完成了注册的逻辑代码，这一章节讲解登录逻辑代码：

下面是柚子写的登录页面，仅供参考：

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="请输入用户名 / 手机号" value='{{mobile}}' placeholder-class="color" bindblur='mobile' /><image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/username.png"></image></view><view class="section"><input password='true' placeholder="请输入密码" value='{{pass}}' placeholder-class="color" bindblur='pass' /><image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/pass.png"></image></view><checkbox-group bindchange="checkboxChange"><label class="checkbox" wx:for="{{items}}" wx:key='this'><checkbox value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}</label></checkbox-group><button class="login" type="primary" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">登录</button><button class="register" type="warn" bindtap="register">没有账号，先注册</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: 15%;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;
}
checkbox-group{display: flex;justify-content:flex-end;margin-top: 30rpx;color: #FFF;box-sizing: border-box;padding-right: 20rpx;
}
.login{margin-top: 260rpx;
}
.register{margin-top: 50rpx;
}

app.wxss

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

大致样子是这样的：

然后是js逻辑代码：

const db = wx.cloud.database()
Page({/*** 页面的初始数据*/data: {items: [{name: '1',checked: false,value: '记住密码'}],//记住密码的复选框isrememberpass: '',//是否记住密码mobile: '',//用户名或者手机号pass: ''//密码},// 授权登录,这里我是先让用户授权才登录的，不需要的也可以直接放个登录按钮，不授权登录bindGetUserInfo: function(e) {if (e.detail.userInfo) {//用户按了允许授权按钮wx.showLoading({title: '正在登录...',})if (this.data.mobile == '') {wx.showToast({title: '用户名或手机号不能为空',icon: 'none',duration: 2000})} else if (this.data.pass == '') {wx.showToast({title: '密码不能为空',icon: 'none',duration: 2000})} else {var that = this// 登录接口var parame = {}// 此处要先判断你输入的是用户名还是手机号，用户名就要用户名的字段去查，手机号就要使用手机号的字段去查if (!(/^1[3456789]\d{9}$/.test(this.data.mobile))) {//验证手机号码是否正确的正则表达式// 不是手机号，说明是输入的用户名parame = {username: this.data.mobile}} else {// 输入的手机号parame = {mobile: this.data.mobile}}db.collection('login_info').where(parame)//查询语句.get({success: function(res) {wx:wx.hideLoading();if (res.data == '') {//为空说明没有查到数据wx.showToast({title: '用户不存在',icon: 'none',duration: 3000})} else {//不为空说明查询到数据了if (res.data[0].pass1 == that.data.pass) {//查询到数据后再判断用户输入的密码是否正确wx.showToast({title: '登录成功',icon: 'none',duration: 3000})if (that.data.isrememberpass != '') { //判断用户是否勾选了记住密码// 勾选了则存储到本地缓存wx.setStorage({key: 'pass',data: that.data.pass,})} else { //不记住密码，删除缓存wx.removeStorage({key: 'pass',success: function(res) {},})}wx.setStorage({ //存储用户名key: 'username',data: that.data.mobile,})wx.setStorage({//存储用户的信息id，作为userIdkey: 'userId',data: res.data[0]._id,})// 这里还可以写一些登录成功后的操作，比如登录成功后跳转到首页之类的}else{wx.showToast({title: '密码错误',icon: 'none',duration: 3000})}}}})}} else {//用户按了拒绝按钮wx.showModal({title: '警告',content: '您点击了拒绝授权，将无法进行账号登录，请授权之后再登录!!!',showCancel: false,confirmText: '返回授权',success: function(res) {}})}},// 用户名失焦mobile(e) {this.setData({mobile: e.detail.value})},// 密码失焦pass(e) {this.setData({pass: e.detail.value})},// 记住密码复选框checkboxChange: function(e) {this.setData({isrememberpass: e.detail.value})},// 点击注册按钮，跳转到注册页面register() {wx.navigateTo({url: "/pages/auto/register/index"})},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function() {},/*** 生命周期函数--监听页面显示*/onShow: function () {//这一段是登录界面初始进入页面时，判断如果没有缓存密码，就说明没有记住密码，只需要显示用户名就行了，如果缓存了密码，说明是记住密码的，要从缓存中获取用户名和密码都显示出来if (wx.getStorageSync('pass') != '') {var check = 'items.[0].checked'this.setData({mobile: wx.getStorageSync('username'),pass: wx.getStorageSync('pass'),[check]: true,isrememberpass: ["1"]})} else {this.setData({mobile: wx.getStorageSync('username'),})}},/*** 生命周期函数--监听页面隐藏*/onHide: function() {},/*** 生命周期函数--监听页面卸载*/onUnload: function() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {}
})

里面注释写的很详细，看不懂的可以留言咨询，希望能帮助到你。后续可能会还有更新，重置密码。

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

微信小程序云开发——实现线上注册，登录的逻辑，并保存账号到云数据库（二）：注册
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 这一章讲解的是用户注册的逻辑: 继上一章节开通云服务之后,首先要做的就是创建一 ...
微信小程序直播助力深圳线上购物节数百场品牌小程序开播
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(香柚帮) 继上一章节柚子完成了登录的逻辑代码已经好久了,都给忘了,这一章节补上修改密码逻 ...
微信小程序-传统开发模式实现授权注册登录流程【超详细，附源码】
微信小程序——传统开发模式与云开发模式对比
目录 1.传统开发模式与云开发模式的对比图 2.云开发技术能力说明 3.云开发技术特点 1.传统开发模式与云开发模式的对比图通过传统开发模式与云开发模式的对比图可以看出传统开发模式需要开发者关注 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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