微信小程序登录-静态页面

效果：

新加页面,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;

}