微信小程序 云开发 实现登录注册

 软件：微信开发者工具

数据库环境：云开发数据库

 

 login.wxml页面

<view class="login">
  <input class="inputText" placeholder="请输入账号" name="account"  bindchange="getAccount" /> 
 <!--密码-->
  <input class="inputText" password="true" placeholder="请输入密码" name="password" bindchange="getPwd" /> 
</view>
<!--按钮-->
<view class="button">
  <button class="loginBtn" type="primary" bindtap="login" form-type="submit">登录</button> 
  <button class="regBtn" type="primary" bindtap="reg" form-type="submit">注册</button> 
</view>

login.wxss

.login{
  text-align: center;
  margin: 70rpx 0 0 50px;
}
.login .inputText{
  border: 2px solid #00b271;
  width: 500rpx;
  height: 100rpx;
  border-radius: 18px;
  outline: none;
  margin-top: 10rpx;
}
.button{
  margin-top: 30rpx;
}
.regBtn{
  margin-top: 10rpx;
}

login.js页面

const db = wx.cloud.database(
  Page({
    data: {
      account:[],
      password:[],
    } , 
    getAccount:function(e)
    {
      //将账号数据存进data
      this.setData({
        account:e.detail.value
      });
    },
    getPwd:function(e)
    {
      //将密码数据存进data
      this.setData({
        password:e.detail.value
      });
    },
    /*登录函数*/
    login:function(e)
    {
      const userCollection = db.collection("user");
      let flag = false  //表示账户是否存在,false为初始值
      console.log(this.data.account)
      //账号密码为空时弹出提示
      if(this.data.account==''||this.data.password==''){
        wx.showToast({  //显示密码错误信息
          title: '账号或密码为空',
          icon: 'error',
          duration: 2500
        });
      }else{
      userCollection.get({
        success: (res) => {
          let user = res.data;
          console.log(user);
          for (let i = 0; i < user.length; i++) {  //遍历数据库对象集合
            if (this.data.account === user[i].account) { //账户已存在
              flag=true;
              if (this.data.password !== user[i].password) {  //判断密码正确与否
                wx.showToast({  //显示密码错误信息
                  title: '密码错误！！',
                  icon: 'error',
                  duration: 2500
                });
               break;
              } else {
                wx.showToast({  //显示登录成功信息
                  title: '登陆成功！！',
                  icon: 'success',
                  duration: 2500
                })
                flag=true;
                wx.navigateBack({  //登录成功后跳转页面
                  delta:1
                }) 
                break;
              }
            }
          };
          if(flag==false)//遍历完数据后发现没有该账户
          {
            wx.showToast({
              title: '该用户不存在',
              icon: 'error',
              duration: 2500
            })
          }
        }
      })
    }
    },
    /*注册*/
    reg:function(e){
      //获取云数据库user表
      const userCollection = db.collection("user");
      let flag = false  //表示账户是否存在,false为初始值
      //账号密码为空时弹出提示
      if(this.data.account==''||this.data.password==''){
        wx.showToast({  //显示密码错误信息
          title: '账号或密码为空',
          icon: 'error',
          duration: 2500
        });
      }else{
      userCollection.get({
        success: (res) => {
          let user = res.data;  //获取到的对象数组数据
          console.log(user);
          for (let i = 0; i < user.length; i++) {  //遍历数据库对象集合
            if (this.data.account === user[i].account) { //账户已存在
              flag = true;
              break;
            }
          }
          if (flag === true) {  //账户已存在
            wx.showToast({
              title: '账号已注册！',
              icon: 'error',
              duration: 2500
            })
          }
          else {  //账户未注册
            userCollection.add({
              data:{
                account:this.data.account,
                password:this.data.password
              }
            })
            //如果要实现先弹窗提示再跳转页面，可以使用以下方法
            //wx.showToast({//显示注册成功信息
            //   title: '添加成功',
            //   icon:'注册成功！',
            //   duration:2000,
            //   success:function(){
            //     setTimeout(function(){
            //       wx.navigateBack({
            //         delta: 1
            //       });
            //   },2000);
            //   }
            // })
            wx.showToast({    //显示注册成功信息
              title: '注册成功！',
              icon: 'success',
              duration: 2500
            })
            wx.navigateBack({//注册成功后跳转页面
              delta:1
            }) 
          }
        }
      })
      }
    }
  })
  )
  

创建成功效果图