微信小程序登陆界面(效果图+源代码)

微信小程序登陆界面

微信小程序登陆界面(效果图+源代码)_第1张图片

login.wxml: 
 
   
   
 
 
login.wxss: 
page{ 
  height: 100%; 

 
.container { 
  height: 100%; 
  display: flex; 
  flex-direction: column;   padding: 0; 
  box-sizing: border-box; 
  background-color: #f2f2f2 
}  
 
/*登录图片*/ 
.login-icon{ 
  flex: none; 

.login-img{ 
  width: 750rpx; 

 
/*表单内容*/ 
.login-from { 
  margin-top: 20px; 
  flex: auto; 
  height:100%; 

 
.inputView { 
  background-color: #fff; 
  line-height: 44px; 

/*输入框*/ 
.nameImage, .keyImage { 
  margin-left: 22px; 
  width: 14px; 
  height: 14px 

 
.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 { 
  width: 100%; 
  height: 1px; 
  background-color: #cccccc; 
  margin-top: 1px; 

/*按钮*/ 
.loginBtnView { 
  width: 100%; 
  height: auto; 
  background-color: #f2f2f2; 
  margin-top: 0px; 
  margin-bottom: 0px; 
  padding-bottom: 0px; 

 
.loginBtn { 
  width: 80%; 
  margin-top: 35px; 

 
login.js: 
Page({ 
  data: { 
    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: 2000   
      })   
}else { 
  // 这里修改成跳转的页面 
      wx.showToast({   
        title: '登录成功',   
        icon: 'success',   
        duration: 2000   
      })   
    }   
  } 
}) 

这个只是登陆页面,其余页面可以点我主页下载
key.png

 

loginLog.jpg

微信小程序登陆界面(效果图+源代码)_第2张图片

name.png



   
 

你可能感兴趣的:(微信小程序,小程序,html,javascript,微信游戏)