微信小程序云开发-登录实例

先上布局
wxml

<view class="reg">
	<view class="reg-m">
		<p class="titlep">用户管理中心</p>
		<view class="reg-m-ks">
			<span>账号：</span>
			<input type="text" placeholder="账号" value="{{jobnumber}}" bindinput="jobnumberInput"></input>
			<view class="clear"></view>
		</view>
		<view class="reg-m-ks">
			<span>密码：</span>
			<input placeholder="密码" password="true" value="{{pwd}}" bindinput="pwdInput"></input>
			<view class="clear"></view>
		</view>
		<view class="aplay">
			<checkbox-group class="check">
				<label>
					<checkbox value="true" checked="{{isplay}}" bindtap="autoplay" />
					<view class='txt-link'>
						<text>自动登录</text>
					</view>
				</label>
				<label>
					<checkbox value="true" checked="{{ispwd}}" bindtap="repwd" />
					<view class='txt-link'>
						<text>记住密码</text>
					</view>
				</label>
			</checkbox-group>
		</view>
		<button class="btn" bindtap="regClick">注册</button>
		<button class="btn" bindtap="btnClick" style="background:#4395FF">登录</button>
	</view>
</view>

wxss

.reg{width: 100%;border-top: 1px solid #eeeeee;padding-bottom: 50rpx;}
.reg-m{width: 90%;margin: 0 auto;}
.clear{clear: both;}
.reg-m-k{width: 100%;border-bottom: 1px solid #eeeeee;padding-bottom: 10rpx;margin-top: 30rpx;}
.reg-m-k span{width: 100%;font-size: 30rpx;color: #434343;line-height: 70rpx;display: inline-block;}
.reg-m-k span label{color: red;}
.reg-m-k input{width: 50%;float: left;font-size: 28rpx;height: 60rpx;line-height: 60rpx;}
.reg-m-ks{width: 100%;margin-top: 30rpx;}
.reg-m-ks span{width: 30%;font-size: 30rpx;color: #434343;line-height: 70rpx;float: left;text-align: right;}
.reg-m-ks span label{color: red;}
.reg-m-ks input{width: 50%;font-size: 28rpx;line-height: 60rpx;height: 60rpx;float: left;border-bottom: 1px solid #eeeeee;margin-left: 2%;}
.btn{width: 35%;font-size: 30rpx;color: #fff;background: #63F53C;line-height: 80rpx;height: 80rpx;margin-top: 50rpx;display: inline-block;margin-left: 60rpx;}
button::after{border: none;}
.titlep{width: 100%;text-align: center;display: inline-block;line-height: 250rpx;font-size: 40rpx;}
.aplay{width: 80%;margin:20rpx auto;}
.txt-link{display: inline-block;vertical-align: bottom}
.txt-link text{font-size: 28rpx;color: #000;}
.check label{margin-left: 50rpx;}
/*checkbox 选项框大小  */
checkbox .wx-checkbox-input {
  width: 30rpx;
  height: 30rpx;
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #1AAD19;
  border-color:#1AAD19;
}
/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 30rpx;
  height: 30rpx;  
  line-height: 30rpx;
  text-align: center;
  font-size: 24rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

js
1.获取账号密码文本框输入

  pwdInput: function (e) {
    var that = this;
    that.setData({
      pwd: e.detail.value.replace(/\s+/g, "")
    })
  },

自动登录点击

  autoplay: function () {
    var that = this;
    //！每次取相反的值
    that.setData({
      isplay: !(that.data.isplay)
    })
  },

记住密码举一反三（类似）
单击登录访问数据库记录是否存在
var db = wx.cloud.database();
初始化连接数据库
db.collection(“集合名”)访问集合

    db.collection("集合名").where({
    字段名:变量名
    }).get({
      success: function (res) {
        console.log(res)
        if (res.data.length == 0) {
          wx.showToast({
            title: '请输入正确账号密码',
            icon: 'none',
            duration: 2000,
            mask: true
          })
          return;
        } else {
          //选择记住密码 写入缓存 第二次打开不用输入密码
          if (ispwd == true) {
          //缓存操作
          } else {
            //反之缓存为空 第二次输入
            var s = "";
            wx.setStorageSync('logindetail', s)
          }
          //选择自动登录 定义一个值用来判断是否自动登录 第二次不用输入 不用点击 自动登录进去
          if (isplay == true) {
          //使用小程序缓存记录
          } else {

          }
          //提示成功
            wx.showModal({
            title: '提示',
            content: '登录成功',
            showCancel: false,
            success: function (res) {
              wx.redirectTo({
                url: 你自己的页面地址,
              })
            }
          })
        }

      }
    })

代码很乱，请谅解，希望能帮到各位。
谢谢