（一）微信小程序云开发之登录界面设计

最近在开发微信小程序，现阶段采用的云开发的方式。云开发与使用本地服务器开发还存在着一定的差异。本地服务器的开发后续记录。这里并没有记录微信小程序的云开发项目的创建方式。

先对微信小程序简单的登录界面做出实例。

1、登录界面UI

2、代码

2.1wxml


请输入用户姓名
<!--pages/logintest/logintest.wxml-->
<view class="container">
  <image src="https://gimg2.baidu/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun%2Fe3126920d86a09385ee29ff142123690c292e31413028-uuY2aM_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631690126&t=be87aa949f3c29779688ce1c15b14aef"></image>
</view>
<view class="login_box">
  <view class="section">
    <input placeholder="请输入用户名" placeholder-class="color" bindblur='getusername' />
    <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='getpass1' />
    <image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/pass.png"></image>
  </view>

  <!--登录按钮-->
  <button class="login" type="primary" bindtap="login" >登录</button>

</view>

2.2 login.wxss

/* pages/login/login.wxss */
.input{
  border: 1px solid black;
  margin: 20rpx;
}

/* 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;
}

2.3 login.js

const DB = wx.cloud.database().collection('user')
Page({
  data: {
    username: '',
    pass1: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  //获取输入的账号
  getusername(event) {
    console.log('账号', event.detail.value)
    this.setData({
      username: event.detail.value
    })
  },
  //获取输入的密码
  getpass1(event) {
    console.log('密码', event.detail.value)
    this.setData({
      pass1: event.detail.value
    })
  },
  //点击登陆
  login() {
    let username = this.data.username
    let pass1 = this.data.pass1
    //console.log('账号', username, '密码', pass1)

    if (username == '' || pass1 == '') {
      wx.showToast({
        title: '用户或密码不能为空',
        icon: 'none',
        duration: 2000
      })
    } else {
      //登陆
      DB.where({
        username: username,
        pass1: pass1
      }).get({

        success(res) {
          console.log("获取数据成功", res)
          if (res.data.length == 0) {
            console.log('登陆失败')
            wx.showToast({
              icon: 'none',
              title: '账号不存在,请重新输入',
            })

          } else {
            let user = res.data[0]
            //console.log("user", user)
            if (pass1 == user.pass1 && user.type == 0) {
              console.log('登陆成功')
              wx.showToast({
                title: '登陆成功',
              })
              console.log("user", user)
              //保存用户登陆状态
              wx.setStorageSync('user', user)
              //页面跳转
              wx.switchTab({
                url: '../personal/personal'
              })

            } else {
              console.log('登陆失败')
              wx.showToast({
                icon: 'none',
                title: '账号或密码不正确',
              })
            }
          }
        },
        fail(res) {
          console.log("获取数据失败", res)
        }
      })
    }

  },
}, 2000)

记录学习过程，存在问题大家共同讨论。

更多推荐

（一）微信小程序云开发之登录界面设计