php小程序实战注册,微信小程序之登录页面制作实例详解

这篇文章主要为大家详细介绍了微信小程序实战之登录页面制作代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

提供一个登录页的案例，供同学们使用

项目效果图：

目录结构：

图片资源：

name.png

key.png

loginLog.jpg

login.wxml：

账号

密码

登录

login.wxss：page{

height: 100%;

}

.container {

height: 100%;

display: flex;

flex-direction: column;

padding: 0;

box-sizing: border-box;

background-color: #f2f2f2

}

/*登录图片*/

.login-icon{

flex: none;

}

.login-img{

width: 750rpx;

}

/*表单内容*/

.login-from {

margin-top: 20px;

flex: auto;

height:100%;

}

.inputView {

background-color: #fff;

line-height: 44px;

}

/*输入框*/

.nameImage, .keyImage {

margin-left: 22px;

width: 14px;

height: 14px

}

.loginLab {

margin: 15px 15px 15px 10px;

color: #545454;

font-size: 14px

}

.inputText {

flex: block;

float: right;

text-align: right;

margin-right: 22px;

margin-top: 11px;

color: #cccccc;

font-size: 14px

}

.line {

width: 100%;

height: 1px;

background-color: #cccccc;

margin-top: 1px;

}

/*按钮*/

.loginBtnView {

width: 100%;

height: auto;

background-color: #f2f2f2;

margin-top: 0px;

margin-bottom: 0px;

padding-bottom: 0px;

}

.loginBtn {

width: 80%;

margin-top: 35px;

}

login.js：Page({

data: {

phone: '',

password:''

},

// 获取输入账号

phoneInput :function (e) {

this.setData({

phone:e.detail.value

})

},

// 获取输入密码

passwordInput :function (e) {

this.setData({

password:e.detail.value

})

},

// 登录

login: function () {

if(this.data.phone.length == 0 || this.data.password.length == 0){

wx.showToast({

title: '用户名和密码不能为空',

icon: 'loading',

duration: 2000

})

}else {

// 这里修改成跳转的页面

wx.showToast({

title: '登录成功',

icon: 'success',

duration: 2000

})

}

}

})

运行结果：