微信小程序毕设——使用云开发实现登录注册

1 wxml

<view class="container">
 <view class="login-icon">
 <image class="login-img" src="../../images/login.jpg"></image>
 </view>
 <view class="login-from">
 <!--账号-->
 <view class="inputView">
 <image class="nameImage" src="../../images/name.png"></image>
 <label class="loginLab">账号</label>
 <input class="inputText" placeholder="请输入账号" 
bindinput="phone" />
 </view>
 <view class="line"></view>
 <!--密码-->
 <view class="inputView">
 <image class="keyImage" src="../../images/key.png"></image>
 <label class="loginLab">密码</label>
 <input class="inputText" password="true" placeholder="请输入密码" bindinput="password" />
 </view>
 <!--按钮-->
 <view class="loginBtnView">
 <button class="loginBtn" type="primary" size="{{primarySize}}" 
loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" 
bindtap="login">登录</button>
<button class="loginBtn" type="primary" size="{{primarySize}}" 
loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" 
bindtap="register">注册</button>
 </view>
 </view>
</view>

2 wxss

page{
    height: 100%;
   }
   .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    background-color: #f2f2f2
   } 
   /*登录图片*/
   .login-icon{
    flex: none;
   }
   .login-img{
    width: 700rpx;
   }
   /*表单内容*/
   .login-from {
    margin-top: 20px;
    flex: auto;
    height:100%;
   }
   .inputView {
    background-color: #fff;
    line-height: 44px;
   }
   /*输入框*/
   .nameImage, .keyImage {
    margin-left: 22px;
    width: 14px;
    height: 15px
   }
   .loginLab {
    margin: 15px 15px 15px 10px;
    color: #545454;
    font-size: 14px
   }
   .inputText {
    flex: block;
    float: right;
    text-align: right;
    margin-right: 22px;
    margin-top: 10px;
    color: #cccccc;
    font-size: 14px
   }
   .line {
    width: 100%;
    height: 1px;
    background-color: #cccccc;
    margin-top: 1px;
   }
   /*按钮*/
   .loginBtnView {
    width: 100%;
    height: auto;
    background-color: #f2f2f2;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
   }
   .loginBtn {
    width: 80%;
    margin-top: 20px;
   }
   

3 js

const app=getApp()
wx.cloud.init({
  env:'cloud1-4g7cuvo07e197c92'
})
const db=wx.cloud.database({
  env:'cloud1-4g7cuvo07e197c92'
})
Page({
  data: {
  phone: null,
  password:null,
  },
 // 获取输入账号
  phone :function (event) {
  this.setData({
  phone:event.detail.value,
  });
  console.log(this.data.phone);
  },
 // 获取输入密码
  password :function (event) {
  this.setData({
  password:event.detail.value,
  });
  console.log(this.data.password);
  },
 

 login:function(event)//登录函数
 {

   const userCollection = db.collection("zc");
   let flag = false  //表示账户是否存在,false为初始值
   userCollection.get({
     success: (res) => {
       let zc = res.data;
       console.log(zc);
       for (let i = 0; i < zc.length; i++) {  //遍历数据库对象集合
         if (this.data.phone === zc[i].phone) { //账户已存在
           if (this.data.password !== zc[i].password) {  //判断密码正确与否
             wx.showToast({  //显示密码错误信息
               title: '密码错误！！',
               icon: 'error',
               duration: 2500
             });
             i=-1; //密码错误则重头开始遍历数据库对象集合
           } else {
             wx.showToast({  //显示登录成功信息
               title: '登录成功！！',
               icon: 'success',
               duration: 2500
             })
             flag=true;
             
             wx.reLaunch({//跳转个人中心
              url: '../index/index' //?useropenid=' + res.data[0]._openid,//利用reLaunch跳转到带tabbar的页面          
            })
            
             break;
           }
         }
       };
       if(flag==false)//遍历完数据后发现没有该账户
       {
         wx.showToast({
           title: '该用户不存在',
           icon: 'error',
           duration: 2500
         })
       }
     }
   })
 },


  register: function(){
    wx.navigateTo({
      url: '../register/register',
    })
  }
 })