微信小程序登录与跳转到首页

login.js

var app = getApp()
 
Page({
 
data: {
 
username: '',
 
password: '',
 
userInfo: {}
 
},
 
onLoad: function () {
 
var that = this
 
//调用应用实例的方法获取全局数据
 
app.getUserInfo(function (userInfo) {
 
//更新数据
 
that.setData({
 
userInfo: userInfo
 
})
 
})
 
},
 
// 获取输入账号
 
usernameInput: function (e) {
 
this.setData({
 
username: e.detail.value
 
})
 
},
 
 
 
// 获取输入密码 passwordInput是前端绑定的 password是后台定义的， 用于登录比对
 
passwordInput: function (e) {
 
this.setData({
 
password: e.detail.value
 
})
 
},
 
 
 
// 登录
 
login: function () {
 
if (this.data.username.length == 0 || this.data.password.length == 0) {
 
wx.showToast({
 
title: '用户名和密码不能为空',
 
icon: 'none',
 
duration: 2000
 
})
 
} else if(this.data.username=="1"&&this.data.password=="1") {
 
// 这里修改成跳转的页面
 
wx.showToast({
 
title: '登录成功',
 
icon: 'success',
 
duration: 2000,
 
success:function(){
 
wx.navigateTo({
 
url: '../index1/index1'
 
})
 
}
 
})
 
}else{
 
wx.showToast({
 
title: '登录失败',
 
icon: 'none',
 
duration: 2000
 
})
 
}
 
}
 
})

login.wxml

<view class="container"> 
 
 <view class="login-icon"> 
 <!-- <image class="login-img" src="../../img/loginLog.jpg"></image>  -->
 </view> 
 <view class="login-from"> 
 
 <!--账号-->
 <view class="inputView"> 
  <image class="nameImage" src="../../image/user.png"></image> 
  <label class="loginLab">账号</label> 
  <input class="inputText" placeholder="请输入账号" bindinput="usernameInput" /> 
 </view> 
 <view class="line"></view> 
 
 <!--密码-->
 <view class="inputView"> 
  <image class="keyImage" src="../../image/password.png"></image> 
  <label class="loginLab">密码</label> 
  <input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" /> 
 </view> 
 
 <!--按钮-->
 <view class="loginBtnView"> 
  <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录</button> 
 </view> 
 </view> 
</view>

 

login.wxss

/* pages/login/login.wxss */
page{ 
  height: 100%; 
 } 
  
 .container { 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  padding: 0; 
  box-sizing: border-box; 
  /* background-color: rgb(156, 23, 78) */
 } 
  
 /*登录图片*/
 .login-icon{ 
  flex: none; 
 } 
  
 .login-img{ 
  width: 750rpx;
 } 
  
 /*表单内容*/
 .login-from { 
  margin-top: 20px; 
  flex: auto; 
  height:100%; 
 } 
  
 .inputView { 
  /* background-color: #fff;  */
  line-height: 45px; 
  border-radius:20px;
   border:1px solid #999999;
 } 
  
 /*输入框*/
 .nameImage, .keyImage { 
  margin-left: 22px; 
  width: 18px; 
  height: 16px
 } 
  
 .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 { 
  margin-top: 8px; 
 } 
  
 /* .line { 
  width: 100%; 
  height: 1px; 
  background-color: #cccccc; 
  margin-top: 1px; 
 }  */
  
 /*按钮*/
 .loginBtnView { 
  width: 100%; 
  height: auto; 
  /* background-color:#DCDCDC;  */
  margin-top: 0px; 
  margin-bottom: 0px; 
  padding-bottom: 0px; 
 } 
  
 .loginBtn { 
  width: 90%; 
  margin-top: 40px; 
  border-radius:10px;
 }