小程序登录页面

简介: 该文介绍了使用小程序云开发实现登录和注册的步骤,包括界面设计和后端逻辑。界面使用了`wxss`和`wxml`编写,样式精致,包含手机号和密码输入、登录按钮、注册和忘记密码选项。在`js`中,重点处理了用户输入的账号和密码,通过云数据库查询验证用户是否存在,使用标志位`flag`判断,若账号或密码错误,显示相应提示。文章总结了利用for循环比对数据库账号的难点,并表达了作者的学习心得。

小程序云开发实现登录与注册(附源码)

1. 看效果

image.png

2.wxss

<view class="v1">

 <!-- v2父容器  子view使用绝对布局 -->
   <view class="v2">
     <view class="dltext">登录</view>

     <!-- 手机号 -->
     <view class="phoneCs">
       <image src="/image/zhang.png" class="ph"></image>
       <input placeholder="请输入账号" bindinput="content" />
     </view>

     <!-- 密码 -->
     <view class=passwordCs">
       <image src="/image/mi.png" class="ps"></image>
       <input placeholder="请输入密码" bindinput="password" />
       <image src="/images/eye-open.png" class="eye"></image>
     </view>

     <!-- 注册 和忘记密码  -->
     <view class="zhuce">
       <navigator>立即注册</navigator>
       <navigator>忘记密码?</navigator>
     </view>
     <!-- 登录按钮 -->
     <view class="denglu">
       <button class="btn-dl" type="primary" bindtap="goadmin">登录</button>
     </view>

     <!-- 协议区  xieyi -->
     <view class="xieyi">
       <checkbox class="isXY"></checkbox>
       <view class="text-xy" bindtap="goxieyi">同意小程序的《平台协议》</view>
     </view>
   </view>

 <!-- 提示框  使用以下方式登录 -->
   <view class="v3">
     <view class="line"></view>
     <view class="lText">您还可以使用以下方式登录</view>
     <view class="line"></view>
   </view>

 <!-- qq  weixin  weibo 图标展示view -->
   <view class="qwwIcon">
     <image src="/image/weixin.png" bindtap="other"></image>
     <image src="/image/QQ.png" bindtap="other"></image>
     <image src="/image/csdn.png" bindtap="other"></image>
   </view>

 </view>

3.wcss

/* 最大的父元素 */
.v1{
   
   
  display: block;
  position:absolute;
  width: 100%;
  height: 850px;
  background: #356363;
  /* 换图片 */

}
/* 白色区域 */
.v1 .v2{
   
   
  position: relative;
  margin-top: 150rpx;
  left: 100rpx; 
  width: 545rpx;
  height: 750rpx;
  background: #FFFFFF;
  border-radius: 50rpx;
}
/* 白色区域内的登录文本 */
.v1 .v2 .dltext{
   
   
  margin-top: 50rpx;
  position: absolute;
  margin-left:80rpx;
  width: 150rpx;
  height: 100rpx;
  font-size: 60rpx;
  font-family: Helvetica;
  color: #000000;
  line-height: 100rpx;
  letter-spacing: 2rpx;
}
/* 手机图片+输入框+下划线的父容器view */
.v1 .v2 .phoneCs{
   
   
  margin-top: 200rpx;
  margin-left: 35rpx;
  position: absolute;
  display: flex;
  width:450rpx ;
  height: 80rpx ;
  border-bottom: 3rpx solid rgb(58, 57, 57);
}
/* 手机图标 */
.v1 .v2 .phoneCs .ph{
   
   
  margin-top: 5rpx;
  margin-left: 30rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 手机号输入框 */
.v1 .v2 .phoneCs input{
   
   
  width: 200rpx;
  font-size: 25rpx ;
  margin-top: 15rpx;
  margin-left: 30rpx;
}
/* 密码图标+输入框+小眼睛图标+下划线父容器view */
.v1 .v2 .passwordCs{
   
   
  margin-top: 400rpx;
  margin-left: 35rpx;
  position: absolute;
  display: flex;
  width:450rpx ;
  height: 80rpx ;
  border-bottom: 3rpx solid rgb(58, 57, 57);
}
/* 密码图标 */
.v1 .v2 .passwordCs .ps{
   
   
  margin-top: 5rpx;
  margin-left: 30rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 眼睛 图标*/
.v1 .v2 .passwordCs .eye{
   
   
  margin-top: 5rpx;
  margin-left: 65rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 密码输入框 */
.v1 .v2 .passwordCs input{
   
   
  width: 200rpx;
  font-size: 25rpx ;
  margin-top: 15rpx;
  margin-left: 30rpx;
}
/* 注册+忘记密码父容器 */
.v1 .v2 .zhuce{
   
   
  font-size: 25rpx;
  margin-left: 85rpx;
  width: 370rpx;
  margin-top: 540rpx;
  position: absolute;
  display: flex;
  justify-content: space-between;
}
/* 登录按钮容器view */
.v1 .v2 .denglu{
   
   
  width: 350rpx;
  height: 80rpx;
  position: absolute;
  margin-top: 600rpx;
  margin-left: 85rpx;

}
/* 登录按钮 */
.v1 .v2 .denglu button{
   
   
  padding: 0rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  width: 100%;
  height: 100%;
  border-radius: 30rpx;
}
/* 复选框+协议文字容器view */
.v1 .v2 .xieyi{
   
   
  margin-left: 10rpx;
  margin-top: 680rpx;
  width: 400rpx;
  display: flex;
  position: absolute;
}
/* 复选框 */
.v1 .v2 .xieyi .isXY{
   
   
  margin-left: 85rpx;
  /* 修改复选框的大小 */
  transform:scale(.6);
}
/* 协议文本 */
.v1 .v2 .xieyi .text-xy{
   
   
  margin-left: 10rpx;
  margin-top: 20rpx;
  color: #000000;
  font-size:19rpx;
}
/* 提示文本 */
.v3{
   
   
  padding-left: 100rpx;
  display: flex;
  position: relative;
  width: 100%;
  height: 60rpx;
  padding-top: 50rpx;
}
.v3 .line{
   
   
  margin-left: 5rpx;
  margin-top: 18rpx;
  width: 120rpx;
  height: 3rpx;
 background-color:#FFFFFF;
}
.v3 .lText{
   
   
  color: #FFFFFF;
  font-size: 25rpx;
}
/* qq wx wb */
.qwwIcon{
   
   
  margin-top: 100rpx;
  padding-top: 50rpx;
  position: relative;
  display: flex;
  width: 100%;
  height: 150rpx;
}
.qwwIcon image{
   
   
  padding-left: 120rpx;
  width: 80rpx;
  height: 80rpx;
}
.xieyi{
   
   
  color: rgb(0, 119, 255);
}

4.js

//index.js
//获取应用实例
const app = getApp()
 let username=''
 let password=''
Page({
   
   
  data: {
   
   
    username: '',
    password: ''
  },
  //协议
  goxieyi(){
   
   
   wx.navigateTo({
   
   
     url: '/pages/oppoint/oppoint',
   })
  },
  //获取输入款内容
  content(e){
   
   
    username=e.detail.value
  },
  password(e){
   
   
    password=e.detail.value
  },
  //登录事件
  goadmin(){
   
   
    let flag = false  //表示账户是否存在,false为初始值
    if(username=='')
    {
   
   
      wx.showToast({
   
   
        icon:'none',
        title: '账号不能为空',
      })
    }else if(password==''){
   
   
      wx.showToast({
   
   
        icon:'none',
        title: '密码不能为空',
      })
    }else{
   
   
      wx.cloud.database().collection('admin')
      .get({
   
   
        success:(res)=>{
   
   
          let admin=res.data
          for (let i = 0; i < admin.length; i++) {
   
     //遍历数据库对象集合
            if (username === admin[i].username) {
   
    //账户已存在
              flag=true;
              if (password !== admin[i].password) {
   
     //判断密码正确与否
                wx.showToast({
   
     //显示密码错误信息
                  title: '密码错误!!',
                  icon: 'error',
                  duration: 2500
                });
               break;
              } else {
   
   
                wx.showToast({
   
     //显示登录成功信息
                  title: '登陆成功!!',
                  icon: 'success',
                  duration: 2500
                })
                flag=true;
               wx.switchTab({
   
   
                 url: '/pages/home/home',
               })
                break;
              }
            }
          };
          if(flag==false)//遍历完数据后发现没有该账户
          {
   
   
            wx.showToast({
   
   
              title: '该用户不存在',
              icon: 'error',
              duration: 2500
            })
          }
        }
      })
    }
  },
  //开发中
  other(){
   
   
    wx.showToast({
   
   
      icon:'error',
      title: '开发中。。。',
    })
  }
})

5.总结

技术难点是云开发数据库的查找中账号与表中数据的比对,主要通过for循环来实现表的遍历,以此来判断用户输入数据的正确性。其次是通过设立标志位let flag = false通过false和true来实现用户存在于不存在的判断。
上述皆为本人学习感悟,如有不足,请不吝赐教。

目录
相关文章
|
1月前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
1月前
|
缓存 小程序 UED
微信小程序如何在切换页面后原页面状态不变
微信小程序如何在切换页面后原页面状态不变
94 0
|
1月前
|
小程序 UED 开发者
小程序如何监听页面的滚动事件
小程序如何监听页面的滚动事件
52 0
|
10天前
|
小程序 前端开发 Java
(JAVA)支付宝小程序登录相关(authToken获取用户唯一userId、encryptedData解密手机号)
(JAVA)支付宝小程序登录相关(authToken获取用户唯一userId、encryptedData解密手机号)
|
22天前
|
XML 小程序 JavaScript
小程序页面传值
本文介绍了微信小程序中父子页面的传值方法。父页面向子页面传值可通过绑定事件跳转,使用`data-`属性传递参数,然后在子页面的`onLoad`中接收。子页面向父页面传值则通过用户选择内容后调用父页面的方法,利用`getCurrentPages()`获取父页面实例,进而修改父页面的数据。
24 2
|
22天前
|
存储 小程序 前端开发
超简单实现小程序用户授权登录与退出
本文介绍了如何轻松实现小程序的用户授权登录与退出功能。通过调用微信的`wx.getUserProfile` API获取用户信息,成功后存储到本地以实现授权登录,并在WXML、CSS和JS中提供示例代码。用户信息存储使用`wx.setStorageSync`,退出登录则清除相关缓存,提升用户体验。
23 1
|
1月前
|
小程序
小程序和页面生命周期详解
小程序和页面生命周期详解
21 0
|
1月前
|
存储 缓存 小程序
微信小程序页面传值的几种方式
微信小程序页面传值的几种方式
|
1月前
|
小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
27 0
|
1月前
|
缓存 小程序 开发者
微信小程序如何刷新当前页面
微信小程序如何刷新当前页面
103 0

热门文章

最新文章