微信小程序 雲開發 實現登錄注冊

 軟件：微信開發者工具

數據庫環境：雲開發數據庫

 

 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
            }) 
          }
        }
      })
      }
    }
  })
  )
  

創建成功效果圖