WeChat applet-login-page-code-implementation-peak-recommend

learning target

1. Master JAVA entry to advanced knowledge ( continuous writing... )
2. Learn how to use Oracle database ( creating... )
3. Teach you how to make vbs scripts ( complete... )
4. Powerful IDEA programming tool ( in preparation ...... )
5, the classic common interviewing skills skills ( updating ...... )

---

---

Achieve effect

---

Hope: In the new year of 2021, you will have everything you want and let it go!

login.js

// pages/login/login.js
Page({
    
    
  data: {
    
    
    disabled: true,
    btnstate: "default",
    account: "",
    password: ""
  },
  accountInput: function (e) {
    
    
    var content = e.detail.value;
    console.log(content);
    if (content != "") {
    
    
      this.setData({
    
     disabled: false, btnstate: "primary", account: content });
    }
  },
  pwdBlur: function (e) {
    
    
    var password = e.detail.value;
    if (password != "") {
    
    
      this.setData({
    
     password: password });
    }
  }
})

login.wxml

 <!--pages/login/login.wxml-->
 <view class="content">
   <view class="account">
     <view class="title">账号</view>
     <view class="num"><input bindinput="accountInput" placeholder="用户名/邮箱/手机号" placeholder-style="color:#999999;"/></view>
   </view>
   <view class="hr"></view>
   <view class="account">
     <view class="title">密码</view>
     <view class="num"><input bindblur="pwdBlur" placeholder="请输入密码" password placeholder-style="color:#999999;"/></view>
     <view class="see">
       <image src="/images/太极.png" style="width:35px;height:30px;"></image>
     </view>
   </view>
 <view class="hr"></view>
 <button class="btn" disabled="{
    
    {disabled}}" type="{
    
    {btnstate}}"bindtap="login">登录</button>
 <view class="operate">
   <view><navigator url="../mobile/mobile">手机快速注册</navigator></view>
   <view><navigator url="../autho/index">一键微信号登录</navigator></view>
 </view>

 </view>

login.json

{
    
    
  "usingComponents": {
    
    },
  "navigationBarTitleText": "登录"
}

login.wxss

/* pages/login/login.wxss */
 /* pages/login/login.wxss */
 .content{
    
    
   margin-top: 40px;
 }
 .account{
    
    
   display: flex;
   flex-direction: row;
   padding-left: 20px;
   padding-top: 20px;
  padding-bottom: 10px;
  width: 90%;
}
.title{
    
    
  margin-right: 30px;
  font-weight: bold;
}
.hr{
    
    
  border: 1px solid #cccccc;
  opacity: 0.2;
  width: 90%;
  margin: 0 auto;
}
.see{
    
    
  position: absolute;
  right: 20px;
}
.account{
    
    
   display: flex;
   flex-direction: row;
   padding-left: 20px;
   padding-top: 20px;
   padding-bottom: 10px;
   width: 90%;
 }
 .title{
    
    
   margin-right: 30px;
   font-weight: bold;
 }
 .hr{
    
    
   border: 1px solid #cccccc;
   opacity: 0.2;
   width: 90%;
   margin: 0 auto;
 }
 .see{
    
    
   position: absolute;
   right: 20px;
 }
 .btn{
    
    
   width: 90%;
   margin-top: 40px;
   color: #999999;
 }
 .operate{
    
    
   display: flex;
   flex-direction: row; 
 }
 .operate view{
    
    
   margin: 0 auto;
   margin-top: 40px;
   font-size: 14px;
   color: #333333;
 }
 .login{
    
    
   display: flex;
   flex-direction: row;
   margin-top: 150px;
 }
 .login view{
    
    
   margin: 0 auto;
 }