微信小程序登录界面二（附源码）

 一、界面样式

 二、实现功能

1、点击图标显示、隐藏输入密码

2、账号和密码同时输入才可登录

3、分享转发

 三、实现代码

 wxml代码

<!--pages/login/index.wxml-->
<view class="container">
  <view class="userinfo">
    <block>
      <image class="userinfo-avatar" src="/image/three.jpg" mode="cover"></image>
    </block>
  </view>
  <view class="username">
    <image src="/image/登录账户.png" class="us"></image>
    <input type="text" class="usernameInput" bindinput="usernameInput" placeholder="请输入用户名" value="{{username}}" placeholder-style="color:	#E6E6FA"/>
  </view>
  <view class="password">
    <image src="/image/登录密码.png" class="us"></image>
    <input type="text" class="usernameInput" bindinput="passwordInput" password="{{!open}}" placeholder="请输入密码" value="{{password}}" placeholder-style="color:	#E6E6FA"/>
    <image src="{{open?'/image/显示密码.png':'/image/不显示密码.png'}}" class="openps" bindtap="switch"></image>
  </view>
  <button class="login" bindtap="login" disabled="{{loginBtnState}}">登录</button>
</view>

 wxss代码

/* pages/login/index.wxss */
page{
  background-image:linear-gradient(rgba(116, 168, 236, 0.5), rgba(112, 122, 108, 0.5)),url(https://......./MY_backImage.jpg);
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar {
  overflow: hidden;
  width: 200rpx;
  height: 200rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.username{
  margin-top: 50rpx;
  display: flex;
  width:80%;
  height: 80rpx ;
  border-bottom: 3rpx solid rgb(58, 57, 57);
  color: white;
}
.us{
  margin-top: 5rpx;
  margin-left: 30rpx;
  width: 55rpx;
  height: 55rpx;
}
.usernameInput{
  font-size: 30rpx ;
  margin-top: 20rpx;
  margin-left: 50rpx;
  width: 65%;
}
.userInfo{
  margin-top:20rpx;
  margin-left: 20rpx;
 }
.password{
  margin-top: 50rpx;
  display: flex;
  width:80%;
  height: 80rpx ;
  border-bottom: 3rpx solid rgb(58, 57, 57);
  color: white;
}
.openps{
  margin-top: 30rpx;
  margin-right: 0;
  width: 40rpx;
  height: 40rpx;
}
.login{
  margin-top: 100rpx;
  width: 100%;
  border:1rpx rgb(153, 184, 241) solid;
  border-radius: 30rpx;
}

 js代码

// pages/login/index.js
Page({
  data: {
    open: false,//是否显示密码
    loginBtnState:true,
    username:"",
    password:"",
  },
  switch() {//是否显示密码
    this.setData({
      open: !this.data.open
    })
  },
  //------用户名
  usernameInput:function(e){
    var username = e.detail.value;
    if(username !=""){
      this.setData({
        username:username
      });
      if(this.data.password !=""){
        this.setData({
          loginBtnState:false
        })
      }
    }else{
      this.setData({              
        loginBtnState:true
      })
    }
  },
  passwordInput:function(e){
    var password = e.detail.value;//从页面获取到用户输入的密码
    if(password !=""){
      this.setData({
        password:password
      });//把获取到的密码赋值给全局变量Date中的password
      if(this.data.username !=""){
        this.setData({
          loginBtnState:false
        })
      }
    }else{
      this.setData({
        loginBtnState:true
      })
    }
  },
  /*****
   * 点击登录按钮
   */
  login:function(){     
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    return{
      title:"分享给朋友",
      path:'/pages/login/index'
    }
  }
})

 登录的代码可以看看上一篇小程序登录代码，懒得复制了。

四、图标资源来源 

图标资源来源于：阿里巴巴图标矢量库：iconfont-阿里巴巴矢量图标库