小程序云开发实现登录与注册（附源码）
1. 看效果
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来实现用户存在于不存在的判断。
上述皆为本人学习感悟，如有不足，请不吝赐教。