T O P

[资源分享]     微信小程序云开发-登录功能(账号密码登录)

  • By - 楼主

  • 2021-07-27 12:00:45
  • 一、新建页面

    新建页面loadByAccount

     

     二、代码实现

     1、loadByAccount.wxml

     1 <view>账号</view>
     2 <input type="text" placeholder="请输入账号" bindinput="getAccount"></input>
     3 <view>密码</view>
     4 <input type="text" placeholder="请输入密码" bindinput="getPassword"></input>
     5 <view class="btn">
     6 <button type="primary" bindtap="loadByAccount">登录</button>
     7 </view>
     8 <view class="tosign">
     9 <view bindtap="toSign" >注册</view>
    10 </view>

    2、loadByAccount.wxss

     1 input{
     2   margin: 20rpx;
     3   padding-left: 10rpx;
     4   height: 80rpx;
     5   border: 1rpx solid #c3c3c3;
     6 }
     7 view{
     8   margin: 20rpx;
     9 }
    10 .btn{
    11   display: flex;
    12   margin-top: 50rpx;
    13 }
    14 .tosign{
    15   margin-top: 50rpx;
    16   text-align: center;
    17 }

    3、loadByAccount.js

     1 //自定义变量,存储用户输入的账号
     2 let account = ''
     3 //自定义变量,存储用户输入的密码
     4 let password = ''
     5 Page({
     6 
     7   //点击跳转到注册页
     8   toSign(){
     9     wx.navigateTo({
    10       url: '/pages/sign/sign',
    11     })
    12   },
    13 
    14   //获取用户输入的账号、密码
    15   getAccount(e){
    16     console.log("用户输入的账号",e.detail.value);
    17     account = e.detail.value
    18   },
    19   getPassword(e){
    20     console.log("用户输入的密码",e.detail.value);
    21     password = e.detail.value
    22   },
    23 
    24   //登录功能
    25   loadByAccount(){
    26     //校验账号
    27     if(account.length<4){
    28       wx.showToast({
    29         title: '账号至少4位',
    30         icon:"none"
    31       })
    32       return
    33     }
    34     //登录功能的实现
    35     wx.cloud.database().collection("users")
    36     .where({
    37       Account:account
    38     })
    39     .get({})
    40     .then(res=>{
    41       console.log("获取账号成功",res);
    42       //校验密码长度
    43       if(password.length<4){
    44         wx.showToast({
    45           title: '密码至少4位',
    46           icon:"none"
    47         })
    48         return
    49       }
    50       //校验密码是否等于数据库中的密码
    51       if(password==res.data[0].Password){
    52         console.log("登录成功",res);
    53         //显示登录成功提示
    54         wx.showToast({
    55           title: '登录成功',
    56           icon:"success",
    57           duration:2000,
    58           //提示2秒后自动跳转到首页
    59           success:function(){
    60             setTimeout(function(){
    61               wx.switchTab({
    62               url: '/pages/index/index',
    63               }) 
    64             },2000)
    65           }
    66         })
    67       }else{
    68         console.log("密码不正确,登录失败");
    69         wx.showToast({
    70           title: '密码不正确',
    71           icon:"none"
    72         })
    73       }
    74     })
    75     .catch(err=>{
    76       console.log("获取账号失败",err);
    77       wx.showToast({
    78         title: '账号不存在',
    79         icon:"none"
    80       })
    81     })
    82   },
    83 })

     

    三、效果展示

     

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册