微信小程序简洁登录页面（附源码）

文章目录

微信小程序简洁登录页面（附源码）
- 1. 群聊（开源项目以及技术交流）
- 2.看效果
- 3.用户不存在
- 4.上代码
- - 4.1login.wxml
  - 4.2login.css
  - 4.3login.js
- 5.总结

1. 群聊（开源项目以及技术交流）

2.看效果

3.用户不存在

4.上代码

4.1login.wxml

<view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}"><!-- v2父容器  子view使用绝对布局 --><view class="v2"><view class="dltext" style="width: 232rpx; height: 92rpx; display: block; box-sizing: border-box; left: 0rpx; top: -2rpx">登录</view><!-- 手机号 --><view class="phoneCs"><!-- <image src="/images/zhang.png" class="ph"></image> --><input placeholder="请输入账号" type="number" bindinput="content" /></view><!-- 密码 --><view class=passwordCs"><!-- <image src="/images/mi.png" class="ps"></image> --><input placeholder="请输入密码" type="password" bindinput="password" /></view><!-- 登录按钮 --><view class="denglu"><button class="btn-dl" type="primary" bindtap="goadmin">登录</button></view></view></view>

4.2login.css

/* pages/login/login.wxss *//* 最大的父元素 */
.v1{display: block;position:absolute;width: 100%;background-color: rgb(250, 248, 248);
}
/* 白色区域 */
.v1 .v2{position: relative;margin-top: 150rpx;left: 100rpx; width: 545rpx;height: 600rpx;background-color: rgb(250, 248, 248);border-radius: 50rpx;
}
/* 白色区域内的登录文本 */
.v1 .v2 .dltext{margin-top: 50rpx;position: absolute;margin-left:50rpx;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: 25rpx;position: absolute;display: flex;width:480rpx ;height: 90rpx ;background-color: white;}
/* 手机图标 */
.v1 .v2 .phoneCs .ph{margin-top: 5rpx;margin-left: 30rpx;width: 55rpx;height: 55rpx;
}
/* 手机号输入框 */
.v1 .v2 .phoneCs input{width: 400rpx;font-size: 30rpx ;margin-top: 25rpx;margin-left: 30rpx;
}
/* 密码图标+输入框+小眼睛图标+下划线父容器view */
.v1 .v2 .passwordCs{margin-top: 350rpx;margin-left: 25rpx;position: absolute;display: flex;width:480rpx ;height: 90rpx ;background-color: white;}
/* 密码图标 */
.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: 400rpx;font-size: 30rpx ;margin-top: 25rpx;margin-left: 30rpx;
}
/* 登录按钮容器view */
.v1 .v2 .denglu{width: 480rpx;height: 80rpx;position: absolute;margin-top:515rpx;margin-left:25rpx;}
/* 登录按钮 */
.v1 .v2 .denglu button{padding: 0rpx;line-height: 70rpx;font-size: 30rpx;width: 100%;height: 100%;border-radius: 5rpx;
}

4.3login.js

//index.js
//获取应用实例
const app = getApp()let username=''let password=''
Page({data: {username: '',password: '',clientHeight:''},onLoad(){var that=thiswx.getSystemInfo({ success: function (res) { console.log(res.windowHeight)that.setData({ clientHeight:res.windowHeight}); } }) },//协议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('adminShop').get({success:(res)=>{console.log(res.data)let admin=res.datafor (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.setStorageSync('admin', password)wx.navigateTo({url: '/pages/admin/admin',})break;}}};if(flag==false)//遍历完数据后发现没有该账户{wx.showToast({title: '该用户不存在',icon: 'error',duration: 2500})}}})}},
})

5.总结

小程序的页面的简洁可以给用户带来很好的体验。
当用户在输入信息后逻辑层通过for循环来遍历数据库的中数据。
好了，今天的分享就到这里了。点个赞吧

微信小程序简洁登录页面（附源码）相关推荐

微信小程序实现天气预报功能(附源码)
目录前言效果图天气API获取微信小程序后台域名配置页面代码注意问题(必看) 留言前言最近在学小程序开发,刚好学到天气预报功能的制作,于是给大家分享下. 效果图天气API获取这里我用 ...
到家服务公司php源码,微信小程序-仿五洲到家商城源码
微信小程序-仿五洲到家商城源码微信小程序仿五洲到家商城源码是一款精仿五洲到家app界面的小程序源码,适用于各类小程序商城系统,功能及模块均值得借鉴! 对应功能模块 > * 首页(定位成功情况且 ...
开源微信小程序自助建站系统源码含精美的多行业模板和搭建教程
分享一个微信小程序自助建站系统源码,含各行各业的小程序模板和搭建教程,可一键切换模板,自由DIY,搭建属于你自己的小程序. 特色功能一览: 11.支持创建多个小程序!(没有数量限制,后续免费升级) ...
微信小程序：强大工具箱组合源码
这是一个比较强大的一款工具箱内有去水印功能(支持几十家平台去水印) 朋友圈功能|(发圈套图等) 头像,朋友圈封面,壁纸等另外还有快递查询,手持弹幕等另外还有一个强大的去水印历史记录历史记录可以 ...
微信小程序更换头像的实现源码
微信小程序更换头像的实现源码 html <view class='top_head_border'> <image class='top_head' src='{{head}}'&g ...
小程序源码：最新wordpress黑金壁纸微信小程序二开修复版源码下载支持流量主收益
这是一款wordpress系统框架的壁纸小程序源码相信很多人以前也有用过这类的壁纸小程序源码吧现在给大家发的这一款是二开修复版的和以前的安装方式差不多,支持流量主收益模式介绍: WordPre ...
最新wordpress黑金壁纸微信小程序二开修复版源码下载支持流量主收益
这是一款wordpress系统框架的壁纸小程序源码相信很多人以前也有用过这类的壁纸小程序源码吧现在给大家发的这一款是二开修复版的和以前的安装方式差不多,支持流量主收益模式介绍: WordPre ...
最新wordpress黑金壁纸微信小程序二开修复版源码下载
这是一款wordpress系统框架的壁纸小程序源码相信很多人以前也有用过这类的壁纸小程序源码吧现在给大家发的这一款是二开修复版的和以前的安装方式差不多, 介绍: WordPress独立后台壁纸小 ...
微信小程序：最新wordpress黑金壁纸微信小程序二开修复版源码下载支持流量主收益
这是一款wordpress系统框架的壁纸小程序源码相信很多人以前也有用过这类的壁纸小程序源码吧现在给大家发的这一款是二开修复版的和以前的安装方式差不多,支持流量主收益模式介绍: WordPre ...
微信小程序授权登录页面（有提示窗）
微信小程序授权登录(有弹窗提示) 1 效果显示 1.1 授权登录页面 1.2 授权登录提示弹窗 1.3 拒绝授权登录 1.4 允许登录后,跳转到小程序首页 2 代码 2.1 wxml 文件 <v ...

微信小程序简洁登录页面（附源码）

微信小程序简洁登录页面（附源码）

文章目录

1. 群聊（开源项目以及技术交流）

2.看效果

3.用户不存在

4.上代码

4.1login.wxml

4.2login.css

4.3login.js

5.总结

微信小程序简洁登录页面（附源码）相关推荐

最新文章

热门文章