小程序登录, 用的是之前PC端的登录接口, 所以, 就没有用, 小程序自带的登录接口。
下面就讲的怎样实现,小程序的登录的JS代码的编写。
login文件夹的文件.png
首先贴出,JS代码模块:
var app = getApp()
Page({
data:{
motto: "欢迎登陆社居易",
userName: '',
userPassword:''
},
userNameInput : function(e){
this.setData({
username : e.detail.value
}),
//console.log(e.detail.value);
},
userPasswordInput:function(e){
this.setData({
userPassword : e.detail.value
}),
// console.log(e.detail.value);
},
logIn : function(){
wx.switchTab({
url: './../index/index'
})
var that = this;
wx.request({
url: '',//你自己的登陆的接口
data: {
phone: this.data.userName,
password: this.data.userPassword,
type: 2
},
header: {
'content-type': 'application/json' // 默认值
},
method: 'POST',
success: function(res){
if (res.data.state == 2) {
console.log(" true ");
wx.navigateTo({
url: './../mine/mine'
});
}
},
fail:function(res){
console.log(res.data);
console.log('is failed')
}
})
}
})
login.wxml,代码模块
<!-- login.wxml -->
<cover-view>
<cover-image src="/images/loginBg.png">
</cover-image>
</cover-view>
<view class="page login" style="">
<view class="login-item">
<image class="login-item-img" mode="scaleToFill" src="/images/logo.png"></image>
<view class="login-item-section">
<image src="/images/user.png"></image>
<input placeholder="请输入您的用户名或手机号" type = "text" id = "user" class="login-item-input" placeholder-style="color: #B2B2B2;" bindinput="userNameInput" />
</view>
<view class="login-item-section">
<image class= "forgetImg" src="/images/password.png"></image>
<input placeholder="请输入您的密码" type = "password" id = "password" class="login-item-input" placeholder-style="color: #B2B2B2;" bindinput="userPasswordInput" />
</view>
<view class = "login-item-remider">
<text class = "forget" >还没有账号?</text>
<navigator class = "register" url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">立即注册</navigator>
<navigator class = "forgetPsd" url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">忘记密码</navigator>
</view>
<view class="login-item-button">
<button type="primary" size="default" plain="true" loading="{{loading}}" class="login-button" bindtap="logIn"> 登录 </button>
</view>
<view class="error-msg" wx:if="{{error}}">{{error}}</view>
</view>
</view>
最后login.wxss代码模块
/*login.wxss*/
.login{
overflow: hidden;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.login-item{
text-align: center;
}
.login-item-img{
width: 200rpx;
height: 200rpx;
margin-top: 229rpx;
margin-bottom:300rpx;
}
.login-item-section{
width: 520rpx;
height: 80rpx;
line-height: 80rpx;
margin: 0 auto;
margin-top: 40rpx;
}
.login-item-section image{
width: 40rpx;
height: 50rpx;
float: left;
}
.login-item-section .forgetImg{
width: 50rpx;
height: 50rpx;
float: left;
}
.login-item-section .login-item-input{
padding-left: 20rpx;
color: #333;
height: 50rpx;
line-height: 50rpx;
font-size: 28rpx;
text-align: left;
text-indent: 12rpx;
}
.login-item-remider{
width: 100%;
position: relative;
height: 60rpx;
font-size: 24rpx;
}
.login-item-remider .forget{
position: absolute;
left: 120rpx;
color: #B2B2B2;
}
.login-item-remider .register{
position: absolute;
left: 260rpx;
color: #54bdff;
}
.login-item-remider .forgetPsd{
position: absolute;
right: 120rpx;
color: #B2B2B2;
}
.login-item-button{
width: 500rpx;
margin: 20rpx auto 20rpx auto;
background: #54bdff;
border: 0;
color: #fff;
}
.login-item-button .login-button[type="primary"][plain]{
font-size: 28rpx;
background: #54bdff;
border: 0;
color: #fff;
}
.error-msg{
color: red;
}
最终, 登录成功跳转到
登录成功跳转页面.png
2018年/6月27日
Christine
网友评论