微信小程序记住密码密码眼睛，开箱即用

WXML

---

密码输入框“眼睛”

• 通过switch切换open的值（true/false）

switch() {
  this.setData({
     open: !this.data.open
  })
},

data: {
    open: false, // ，密码眼睛---默认不显示密码
    focus:false, // ，密码眼睛---是否获取焦点
},

• password = "{{!open}}"  同时open也控制input的password属性是否开启

<input type="text" password="{{!open}}" />

• 通过三目运算符动态切换“眼睛”的显示（注意图片引用路径）

<image 
    src="{{open?'../../images/open_eye.png':'../../images/no_eye.png'}}" 
    class="eye" 
/>

输入框值双向绑定

• input标签中添加bindinput监听输入框事件

<input 
    placeholder-style="color:#000000" 
    bindinput="usernameInput" 
    placeholder="请输入手机号/邮箱" 
/>

• 在data中声明要监听的属性

 data: {
    username: "", // 用户名
  },

• 在input的值中绑定声明的值

<input 
    placeholder-style="color:#000000" 
    bindinput="usernameInput" 
    value="{{username}}" 
    placeholder="请输入手机号/邮箱" 
/>

• 通过方法进行输入框内容双向绑定

//获取输入框内容
  usernameInput(e) {
    this.setData({
      username: e.detail.value
    })
  },

---

完整代码

<!--pages/login/login.wxml-->
<view class="content">
  <view class="winmet">
    XXXX
  </view>

  <!-- 图标开始 -->
  <view class="logo">
    <image src="/images/logo.png" mode="#" />
  </view>
  <!-- 图标结束 -->

  <view class="inputBox">
    <!-- 输入框s -->
    <view>
      <!-- 账号 -->
      <view class="inputBorder">
        <input class="weui-input" placeholder-style="color:#000000" bindinput="usernameInput" value="{{username}}" placeholder="请输入手机号/邮箱" />
      </view>
      <!-- 密码 -->
      <view class="inputBorder m-t-30">
        <view class="flex_s_b">
          <input placeholder-style="color:#000"  bindinput="passwordInput" 
          value="{{password}}" 
          type="text" password="{{!open}}"
          bindfocus="focus" bindblur="blur"
          placeholder="请输入密码" />
          // 通过switch切换open的值(true/false)，
          //  password="{{!open}}" 同时open也控制input的password属性是否开启
          // 通过三目运算符动态切换“眼睛”的显示
          <image catchtap="switch" src="{{open?'../../images/open_eye.png':'../../images/no_eye.png'}}" class="eye"  />
          <view style="border: 1rpx solid rgb(179, 173, 173);">
          </view>
          
          <view class="f-c-d p-l-35" bind:tap="goForgetPwd">
            忘记密码
          </view>
        </view>
      </view>
      <!-- 密码 -->
    </view>
    <!-- 输入框e -->

    <!-- 记住用户名、密码s -->
    <view class="flex_s_b p-20 m-t-20">
      <view>
        <switch type="checkbox" checked="{{switchChecked}}" bindswitcheck="switchChecked" bindchange="bindswitchchange" style="transform:scale(0.8)" />记住密码
      </view>
      <view class="" bind:tap="register">注册</view>
    </view>
    <!-- 记住用户名、密码e -->

    <!-- 登录按钮s -->
    <view class="loginBtn m-t-20" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" bindtap="login">
      登录
    </view>
    <!-- 登录按钮e -->
  </view>

  <view class="info">
    <view>
      登录/注册表示您同意
      <text style="color: #3455A2;">《用户协议》</text>
      和
      <text style="color: #3455A2;">《隐私政策》</text>
    </view>
  </view>
</view>

JS

---

// pages/login/login.js
const {
  fetch,
} = require("../../utils/request")
const md5 = require('js-md5')
Page({
  /**
   * 页面的初始数据
   */
  data: {
    checkedValue: false, //选中按钮
    username: "", // 用户名
    password: "", // 密码
    open: false, // ，密码眼睛---默认不显示密码
    focus: false, // ，密码眼睛---是否获取焦点
  },
  // 密码眼睛--s
  // 眼睛点击事件 catch阻止事件冒泡 
  switch() {
    this.setData({
      open: !this.data.open
    })
  },
  // 输入框聚焦时触发
  focus(){
    this.setData({
      focus:true
    })
  },
  // 输入框失去焦点时触发
  blur(){
    this.setData({
      focus:false
    })
  },
  // 密码眼睛--e
  //获取输入框内容
  usernameInput(e) {
    this.setData({
      username: e.detail.value
    })
  },
  passwordInput(e) {
    this.setData({
      password: e.detail.value
    })
  },

  // 登录按钮
  login() {
    if (this.data.username == "" && this.data.password !== "") {
      wx.showToast({
        icon: 'error',
        title: '账号不能为空',
      })
    } else if (this.data.username !== "" && this.data.password == "") {
      wx.showToast({
        icon: 'error',
        title: '密码不能为空',
      })
    } else if (this.data.username == "" && this.data.password == "") {
      wx.showToast({
        icon: 'error',
        title: '请输入账号密码',
      })
    } else {
      wx.showToast({
        title: '登录中',
        icon: 'loading',
        duration: 5000
      })
      var options = {
        service_code: "WINMET_APP_LOGIN_SYSTEM",
        params: {
          service_code: "WINMET_APP_LOGIN_SYSTEM",
          username: this.data.username,
          password: md5("fund_manager" + this.data.password),
          token: undefined,
          user_id: undefined,
        },
      };
      fetch(options).then((res) => {
        var that = this;
        var checkedValue = that.data.switchChecked;
        if(checkedValue == true) {
          wx.setStorageSync('username', this.data.username)
          wx.setStorageSync('password', this.data.password)
          wx.setStorageSync('checkedValue', that.data.switchChecked)
        } else {
          wx.setStorageSync('username', "")
          wx.setStorageSync('password', "")
          wx.setStorageSync('checkedValue', false)
        }
        if (res.statusCode == 200 && res.cookies != "") {
          console.log('登录结果---', res)
          wx.switchTab({
            url: '/pages/warn/warn',
          })
          const tokenInfo = res.data.results // 登录后返回的token信息
          wx.setStorage({
            key: "userData",
            data: JSON.stringify(tokenInfo)
          })
        } else {
          wx.showToast({
            icon: 'error',
            title: '账号或密码错误',
          })
        }
      });
    }
  },

  onChange(event) {
    this.setData({
      checked: event.detail,
    });
  },

  // 注册
  register() {
    wx.navigateTo({
      url: '/packageC/pages/register/register',
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      username: wx.getStorageSync("username"),
      password: wx.getStorageSync("password"),
      switchChecked: wx.getStorageSync('checkedValue')
    })
  },
  //判断是否要记住密码
  bindswitchchange: function (event) {
    //得到值
    var checkedValue = event.detail.value;
    // console.log(checkedValue);
    var _this = this;
    if (checkedValue == true) {
      _this.setData({
        switchChecked: true,
      })
      console.log(checkedValue);
    } else if (checkedValue == false) {
      _this.setData({
        switchChecked: false
      })
    }
  },
  // 忘记密码
  goForgetPwd() {
    wx.navigateTo({
      url: '/packageC/pages/forgetPwd/forgetPwd',
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

WXSS

---

在WXML中有些类名是定义在app.wxss中的，但是皆为见名知意型，

比如flex_s_b 就是

display: flex
justify-content: space-between

m-t-30就是

margin-top: 30rpx

/* pages/login/login.wxss */
.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* "胜遇评级" */
.winmet{
  margin-top: 250rpx;
  font-size: 40rpx;
}

/* 胜遇图标 */
.logo{
  margin-top: 70rpx;
}
/* 图标图片 */
.logo image{
  width: 200rpx;
  height: 130rpx;
}
/* 账号密码输入总框 */
.inputBox{
  margin-top: 70rpx;
}

/* 显示隐藏密码--s */
.eye {
  width: 40rpx;
  height: 40rpx;
  margin: 5rpx 20rpx 0rpx 0rpx;
  flex-shrink: 0;
}
/* 显示隐藏密码--e */


/* 输入框边框 */
.inputBorder{
  border: 1px solid rgb(218, 218, 228);
  background-color: rgb(4, 69, 165, 0.1);
  border-radius: 10rpx;
  padding: 20rpx 40rpx;
}
/* 登录按钮 */
.loginBtn{
  background-color: #3455A2;
  text-align: center;
  padding: 10rpx;
  border-radius: 30rpx;
  color: aliceblue;
  font-weight: 600;
}

/* 用户协议和隐私政策 */
.info{
  position: absolute;
  bottom: 70rpx;
  padding: 0rpx 40rpx;
  font-size: 28rpx;
  color: rgb(204, 203, 201);
}

/* 记住密码复选框---选中---样式 */
.wx-checkbox-input.wx-checkbox-input-checked{
  color: #3455A2;
}