微信小程序登录接口调取成功

小程序登录， 用的是之前PC端的登录接口， 所以， 就没有用， 小程序自带的登录接口。
下面就讲的怎样实现，小程序的登录的JS代码的编写。

登录界面.png
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