微信小程序登录-静态页面
效果：
新加页面,app.json中新添一个login文件夹
login.wxml
<view class='allcon'>
<view>
<swiper style="height:400rpx" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{2000}}" duration="{{500}}" circular="{{true}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" style="width:100%;height:400rpx"/>
</swiper-item>
</block>
</swiper>
</view>
<view class='loginfrom'>
<view class='login'>
<image class='img' src='../img/login.png'></image>
<label class='loginname'>账号</label>
<input class='inputName' name="phone" type='text' placeholder='请输入手机号' bindinput='phoneInput' maxlength='11'></input>
</view>
<view class='line'></view>
<view class='pwd'>
<image class='img' src='../img/pwd.png'></image>
<label class='loginname'>密码</label>
<input class='inputPwd' name="password" placeholder='请输入密码' type='password' bindinput='passwordInput' ></input>
</view>
</view>
<view class='btn'>
<button class='loginbtn' type='primary' plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录</button>
</view>
</view>
login.js
// pages/login/login.js
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
'../img/s1.jpg',
'../img/s2.jpg',
'../img/s3.jpg',
],
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: 1000
})
}
else if (this.data.phone.length == 0 ) {
wx.showToast({
title: '用户名不能为空',
icon: 'loading',
duration: 1000
})
}
else if (this.data.password.length == 0) {
wx.showToast({
title: '密码不能为空',
icon: 'loading',
duration: 1000
})
}
else{
// 这里修改成跳转的页面
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 2000
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
login.wxss
/* pages/login/login.wxss */
.allcon{
position: fixed;
background-color: #D3D3D3;
width: 100%;
height:100%;
}
.img{
width: 80rpx;
height: 80rpx;
}
.login{
display: flex;
padding: 20rpx;
margin:30rpx 30rpx 0 30rpx;
background-color: whitesmoke
}
.loginname{
margin-left:20rpx;
margin-top:20rpx;
}
.inputName{
margin-left:20rpx;
margin-top:20rpx;
text-align: right;
}
.pwd{
display: flex;
padding: 20rpx;
background-color: whitesmoke;
margin:5rpx 30rpx 0 30rpx;
}
.inputPwd{
margin-left:20rpx;
margin-top:20rpx;
text-align: right;
}
.btn {
display: flex;
width: 100%;
}
.loginbtn{
width: 70%;
margin-top:20px;
}