微信小程序-表单登录实例（自定义缓存数据监测登录）

index.wxml

<view class='login-all'>
  <view class="form">
    <view class='account'>
      <view class='title'>账号</view>
      <input placeholder='用户名/手机名/邮箱' placeholder-style='color:rgba(0,0,0,0.2);font-size:14px' bindinput='accountInput'/>
    </view>
    <view class='hr'></view>
    <view class='account'>
      <view class='title'>密码</view>
      <input placeholder='请输入密码' password placeholder-style='color:rgba(0,0,0,0.2);font-size:14px' bindblur='pswBlur'/>
      <image src='../../images/see.jpg' class='see'></image>
    </view>
    <view class='hr'></view>
    <button class='btn' disabled='{{disabled}}' type='{{btnstate}}' bindtap='login'>登录</button>
  </view>
  <view class='fast'>
    <view><navigator url='../login/login'>手机快速注册</navigator></view>
    <view><navigator url='../manage/manage'>企业用户注册</navigator></view>
    <view><navigator>找回密码</navigator></view>
  </view>
  <view class='login'>
    <view><image src='../../images/wxlogin.png' style='width:65px;height:90px'></image></view>
    <view><image src='../../images/qqlogin.png' style='width:65px;height:90px'></image></view>
  </view>
</view>

index.wxss

.account{
  display: flex;
  flex-direction: row;
  padding-left: 20px;
  padding-top: 30px;
  padding-bottom: 10px;
}
.title{
  margin-right: 45px;
}
.hr{
  border-bottom: 0.5px solid #e5e5e5;
  width: 90%;
  margin: 0 auto;
}
.see{
  width: 30px;
  height: 20px;
  position: absolute;
  right: 20px;
}
.btn{
  width: 90%;
  margin: 0 auto;
  margin-top: 50px;
}
.login{
  display: flex;
  flex-direction: row;
  margin-top: 200px;
}
.login view{
  margin: 0 auto;
}
.fast{
  margin-top: 20px;
  font-size: 14px;
  color:rgba(0,0,0,0.6);
  display: flex;
  flex-direction: row;
}
.fast view{
  margin: 0 auto;
}

index.js

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    disabled:true,   //是否禁用按钮
    btnstate:"default",  //按钮的样式
    account:'',   //用户名输入的值
    password:''   //密码值
  },
  accountInput(e){
    var content = e.detail.value; 
    if (content != ''){
      this.setData({ disabled: false, btnstate: "primary", account: content})
    }else{
      this.setData({ disabled: true, btnstate: "default"})
    }
  },
  pswBlur(e){
    var password = e.detail.value;
    if (password != '') {
      this.setData({ password: password });
    }else{
      wx.showToast({     //API
        title: '请输入密码',
        duration: 1000,
        icon: 'info'
      })
    }
  },
  login(e){
    var account=this.data.account;  //取出data中的account值赋给account
    var password=this.data.password;
    var user=wx.getStorageSync("user");  //获取内存中的user，自定义的缓存数据写在app.js中
    if (user.account == account && user.password == password && user.account != '' && user.password != ''){
      wx.showToast({
        title: '登录成功',
        icon:'success',
        duration:1000,
        success(){
          wx.navigateTo({  //执行成功跳转到logs页面
            url: '../logs/logs',
          })
        }
      })
    }else{
      wx.showToast({
        title: '输入有误',
        duration:1000,
        icon:'info'
      })
    }
  }
})

app.js

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })

	
    var user=wx.getStorageSync("user");//先获取缓存，如果！user则使用下面if来调用loadConfigs()函数来获取自己定义的缓存数据赋给user。因为如果之前有注册的步骤会向缓存中添加数据，这时候不调用loadConfigs()函数也会有缓存数据，但是如果没有注册的话，就要用自己定义的缓存数据来测试
    if(!user){
      user = this.loadConfigs();
    }
    wx.setStorageSync("user", user)//将数据存储在本地缓存中指定的 key 中，也就是user，后续index.js中使用var user=wx.getStorageSync("user")获取到缓存值
  },
  //先定义了一个函数里面有自己定义的缓存值user，并返回user的值
  loadConfigs(){
    var user=new Object();
    user.account="1555";
    user.password="123456";
    return user;
  },
  globalData: {
    userInfo: null
  }
})

这样一个简单的登录页面就完成啦
注册页面请参看另一篇博文
微信小程序-表单注册实例（自定义缓存数据测试）