小程序简介好看的登录页面（附源码）

看效果

2.代码

2.1wxml

<view class="main"><view class="login"><view class="kuang shadow"><view class="hint">后台管理</view><open-data class="avatar-open" type="userAvatarUrl"></open-data> <view class="form-group"><view class="title">账号：</view><input placeholder="管理员账号" maxlength="30" bindinput="content" placeholder-class="phc" model:value="{{username}}"></input></view><view class="form-group"><view class="title">密码：</view><input placeholder="管理员密码" maxlength="30" bindinput="password" type="password" placeholder-class="phc" model:value="{{password}}"></input></view><button class="btn" bindtap="bindGetPhoneNumber">点击登录</button><view bindtap="url" data-url="../me/me" class="return">返回</view></view></view><view class="bottom"></view></view>

2.4 wxss

@import "../style/skin.wxss"; .main {width: 100%;height: 100vh;background-color: #0E9489;display: flex;flex-direction: column;justify-content: flex-start;
}.main .login {margin-top: 150rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;flex: 1;
} .main .login .kuang {width: 600rpx;background-color: #fff;height: 750rpx;margin-top: 0rpx;border-radius: 20rpx;display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding: 50rpx 20rpx;
}.main .login .kuang button {width: 85%;background-color: #0E9489;color: #fff;font-size:32rpx;
}.main .login .kuang .hint {width: 100%;color: #aaa;font-size:30rpx;text-align: center;
}.main .login .kuang .return {width: 100%;color: #0E9489;font-size:30rpx;text-align: center;font-size:26rpx;
}.main .avatar-open {width: 180rpx;height: 180rpx;clip-path: circle(90rpx at center);
}.main .bottom {width: 100%;align-self: flex-end;font-size: 26rpx;height: 70rpx;text-align: center;color: #fff;display: flex;flex-direction: column;
}
.form-group .title {font-weight: normal;
}

3.js

//index.js
//获取应用实例
const app = getApp()let username=''let password=''
Page({data: {username: '',password: '',clientHeight:'',list:''},onLoad(){var that=thiswx.getSystemInfo({ success: function (res) { console.log(res.windowHeight)that.setData({ clientHeight:res.windowHeight}); } }) },//获取输入款内容content(e){username=e.detail.value},password(e){password=e.detail.value},//登录事件bindGetPhoneNumber(){console.log(username,password)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)=>{console.log(res.data)this.setData({list:res.data})for (let i = 0; i <this.data.list.length; i++) {  //遍历数据库对象集合if (username === this.data.list[i].username) { //账户已存在flag=true;if (password == this.data.list[i].password) {wx.showToast({  //显示登录成功信息title: '登陆成功！！',icon: 'success',duration: 2500})flag=true;wx.setStorageSync('admin', username)wx.navigateTo({url: '../admin_me/admin_me',})break;}else{wx.showToast({icon:'error',title: '密码错误',})}}};if(flag==false)//遍历完数据后发现没有该账户{wx.showToast({title: '该用户不存在',icon: 'error',duration: 2500})}}})}},
})

3.联系作者

vx：jlm264796
记得点赞哦！

小程序简介好看的登录页面（附源码）相关推荐

springboot基于微信小程序的校园外卖系统毕业设计-附源码091024
Springboot基于微信小程序的校园外卖系统摘要随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化.为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订 ...
Springboot校园在线打印预约系统小程序【纯干货分享，附源码91740】
摘要本文设计了一种基于微信支付的校园在线打印预约系统小程序,系统为人们提供了方便快捷的线上打印服务,包括打印预约.注册登录.打印平台.校园资讯等,用户不仅能够方便快捷在线搜索打印方式.还能进行打印 ...
小程序获取城市行政区号_微信小程序省市区选择器实例详解(附源码下载)
微信小程序省市区选择器: 最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下. 一.区域间手势滑动切换,标题栏高亮随之切换思路是:拿当前的c ...
微信小程序富文本编辑器editor+rich-text(附源码)
之前小程序一直都是使用自己写的接口,小程序远程获取使用富文本编辑器的内容,比如UEditor,wangEditor等.我们可以选择插件wxparse和自带的rich-text,但是这些并不能完全转义他 ...
C语言丨整蛊必备小程序，好玩炸翻天（附源码）
前言感觉学了c语言后仍然一无是处?!!想要整蛊一下朋友仍然不会?!! 别慌,看完这篇文章,你就会了. 下面给大家分享两个基础的整蛊小程序 1.我是猪关机程序 2.无限弹窗程序一.我是猪关机程序效 ...
uniapp开发——微信小程序获取上传图片的拍摄时间（附源码）
如果是单纯地使用uniapp做app或者h5开发,可以直接在上传的时候 uni.chooseImage 获取到图片的最后修改日期,那么可以使用其作为拍摄日期. 但是,一切的一切都源于微信小程序的接口封 ...
一步一步教你搭建外卖cps小程序（分销裂变版本）附源码
美团/饿了么外卖CPS联盟返利公众号小程序裂变核心源码源代码地址 http://y.mybei.cn 步骤下载以上源代码到本地 http://y.mybei.cn 修改为你自己的微信小程序,打开 ...
2020最新款影视小程序后端+前端搭建详细教程附源码
准备工作教程很详细一步步操作都可以上线,教程都是亲自发布的,希望各位要搬运的时候备注来自哪里购买云服务器:教程等待更新购买域名+配置ssl证书:教程待更新常见问题: 问:域名需要备案吗? 回: ...
微信小程序云开发打车系统实现附源码
功能介绍: 实现用户,司机端,用户微信授权登录,司机注册,在线约车,位置定位,订单管理,司机抢单等部分功能截图: 主页预约界面: 预约界面订单界面个人界面源代码获取: 毕业设计,一周类做完,毕 ...
[项目]配合JQuery简洁好看的倒计时页面(附源码)

小程序简介好看的登录页面（附源码）

小程序简介好看的登录页面（附源码）

看效果

2.代码

2.1wxml

2.4 wxss

3.js

3.联系作者

小程序简介好看的登录页面（附源码）相关推荐

最新文章

热门文章