普通登录注册以及用户授权登陆

普通登陆注册

概述

此功能的实现简单的借助了微信小程序的云开发，具体在哪里使用，我会标出来。对于用户名、账号、密码都做了简单的校验。主要练手功能的实现，样式只做了简单的编写。

用户页面展示登陆注册两个按钮，没有账户可以选择注册，注册成功后跳转到展示登陆注册的用户页面。登陆成功后，用户界面展示用户名。

实现注册功能

效果展示

用户名长度至少两位且小于十位，用户账号至少四位，用户密码至少四位。成功注册后，跳转回用户登陆注册页面。

代码与注释

输入用户名
<input class="input" bindinput="getName"></input>
输入用户账号
<input class="input" bindinput="getZhangHao"></input>
输入用户密码
<input class="input" bindinput="getMiMa"></input>
<button bindtap="zhuce" type="primary">注册</button>

.input{
  border: 1px solid gainsboro;
  margin: 15rpx;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    name:\'\',
    zhanghao:\'\',
    mima:\'\'
  },
  //获取用户名
  getName(e){
    this.setData({
      name:e.detail.value
    })
  },
  //获取用户账号
  getZhangHao(e){
    this.setData({
      zhanghao:e.detail.value
    })
  },
  //获取用户密码
  getMiMa(e){
    this.setData({
      mima:e.detail.value
    })
  },
  //注册
  zhuce(){
   let name=this.data.name
   let zhanghao=this.data.zhanghao
   let mima=this.data.mima
   console.log(\'name\',name)
   console.log(\'zhanghao\',zhanghao)
   console.log(\'mima\',mima)
   /* 校验用户名 */
   if(name.length<2){
     wx.showToast({
       icon:\'none\',
       title: \'用户名至少2位\',
     })
     return
   }
   if(name.length>10){
    wx.showToast({
      icon:\'none\',
      title: \'用户名最多10位\',
    })
    return
   }
  //  校验账号
   if(zhanghao.length<4){
    wx.showToast({
      icon:\'none\',
      title: \'用户账号至少4位\',
    })
    return
   }
   //校验密码
   if(mima.length<4){
    wx.showToast({
      icon:\'none\',
      title: \'用户密码至少4位\',
    })
    return
   }
   //注册功能实现
   //使用微信官方云开发提供的 wx.cloud.database().collection(\'user\').add({})，在数据库中的user表中添加新的用户名、账号、密码。
   wx.cloud.database().collection(\'user\').add({
     data:{
       name:name,
       zhanghao:zhanghao,
       mima:mima
     },
     success(res){
       wx.showToast({
         title: \'注册成功\',
       })
       wx.navigateTo({
         url: \'../user/user\',//跳转到用户登陆注册界面
       })
     },
     fail(res){
      console.log(\'fail\',res)
     }
   })

  }
})

云开发 数据库中添加新的表

实现登录功能

效果展示

代码

<!--pages/login/login.wxml-->
输入账号
<input class="input" bindinput="getZhangHao"></input>
输入密码
<input class="input" bindinput="getMiMa"></input>
<button type="primary" bindtap="login">登陆</button>

.input{
  border: 1px solid gainsboro;
  margin: 15rpx;
}

// pages/login/login.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    zhanghao:\'\',
    mima:\'\'
  },
  // 获取账号
  getZhangHao(e){
    this.setData({
      zhanghao:e.detail.value
    })
  },
  // 获取密码
  getMiMa(e){
    this.setData({
      mima:e.detail.value
    })
  },
  // 登陆功能
  login(){
    let zhanghao=this.data.zhanghao
    let mima=this.data.mima
    // console.log(\'账号\',zhanghao,\'密码\',mima)
    //账号校验
    if(zhanghao.length<4){
      wx.showToast({
        icon:\'none\',
        title: \'账号至少4位\',
      })
      return
    }
    //密码校验
    if(mima.length<4){
      wx.showToast({
        icon:\'none\',
        title: \'密码至少4位\',
      })
      return
    }
      //借助小程序云开发提供的 wx.cloud.database().collection(\'user\').where({})
      //指定查询与输入账号相等账号，返回带新查询账号的新的集合引用
      //.get({})获取根据查询条件筛选后的集合数据。
      //如果输入密码与集合密码相同则登陆成功，则传用户名参数并跳转到用户界面，用户界面显示用户名
    wx.cloud.database().collection(\'user\').where({
      zhanghao:zhanghao
    }).get({
      success(res){
        let user=res.data[0]
        console.log(user.name)
        if(mima==user.mima){
          wx.showToast({
            title: \'登陆成功\',
          })

          wx.navigateTo({
            url: \'../user/user?name=\' + user.name,
          })
          //保护用户登陆状态，将用户信息存储到Storage
          wx.setStorageSync(\'user\', user)
        }else{
          wx.showToast({
            icon:\'none\',
            title: \'账号或密码不正确\',
          })
        }
      },
      fail(res){
        console.log("fail",res)
      }
    })
  }
})

可在
中看到。

实现退出功能以及用户界面

效果展示

未登录

已登录

退出登录返回到未登录界面

代码

<!--pages/user/user.wxml-->
<!-- 未登录 -->
<view wx:if="{{!loginOK}}">
<button type="primary" class="zhuce" bindtap="denglu">登陆</button>
<button class="zhuce" bindtap="zhuce">注册</button>
</view>
<!-- 已登陆 -->
<view wx:else class="login-ok">
<text>{{name}}</text>
<button bindtap="tuichu">退出登录</button>
</view>

/* pages/user/user.wxss */
.zhuce{
  margin-top: 50rpx;
}
.login-ok{
  text-align: center;
}

// pages/user/user.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    loginOK:false,
    name:\'\'
  },
  // 去登陆页
  denglu(){
    wx.navigateTo({
      url: \'../login/login\',
    })
  },
  // 去注册页
  zhuce(){
    wx.navigateTo({
      url: \'../index/index\',
    })
  },
  //展示获取到的用户名
  onShow(){
    let user=wx.getStorageSync(\'user\')
    //storage中存在user且用户名存在则更改展示用户名的条件为true
    if(user&&user.name){
      this.setData({
        loginOK:true,
        name:user.name      
      })
    }else{
      this.setData({
        loginOK:false
      })
    }
  },
  // 退出登录
  //退出登陆后将storage中的user清空
  tuichu(){
    wx.setStorageSync(\'user\', null)
    //校验
    let user=wx.getStorageSync(\'user\')
    if(user&&user.name){
      this.setData({
        loginOK:true,
        name:user.name      
      })
    }else{
      this.setData({
        loginOK:false
      })
    }
  }

})

用户授权登陆

概述

替换 wx.getUserInfo用wx.getUserProfile获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。

使用了微信官方提供button按钮的属性 open-type，contact提供在线客服，feedback提供反馈意见。

效果展示

未登录

登录

已登录

代码及注释

<!-- 用户登陆 -->
<view class="header">
<view class="root" wx:if="{{!userInfo}}">
  <image src="/images/girl-5.png" class="touxiang"></image>
    <button class="login_btn" size="mini" bindtap="getUserProfile" > 获取头像昵称 </button>
</view>
  <view wx:else class="root">
    <image bindtap="bindViewTap" class="touxiang" src="{{userInfo.avatarUrl}}" mode="cover"></image>
    <text class="nicheng">{{userInfo.nickName}}</text>
    <button size="mini" bindtap="outLogin">退出登录</button>
  </view>
</view>

<!-- 登陆后显示 -->
<view wx:if="{{userInfo}}">
  <view class="item">
  <text>我的订单</text>
  <view class="right_arrow"></view>
</view>
<view class="item">
  <text>历史发票</text>
  <view class="right_arrow"></view>
</view>
<view class="item">
  <text>我的评价</text>
  <view class="right_arrow"></view>
</view>
<view class="item">
  <text>建议咨询</text>
  <view class="right_arrow"></view>
</view>
<view class="item">
  <text>设置</text>
  <view class="right_arrow"></view>
</view>
</view>
<view class="item">
  <button class="button" open-type="feedback">反馈意见</button>
  <view class="right_arrow"></view>
</view>
<view class="item">
  <button class="button"  open-type="contact">在线客服</button>
  <view class="right_arrow"></view>
</view>
<!-- 登陆前显示 -->
<view wx:if="{{!userInfo}}">
<view class="item">
  <text>管理员登陆</text>
  <view class="right_arrow"></view>
</view>
</view>

.root{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.touxiang{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-top: 30rpx;
  margin-bottom: 10rpx;
}
.header{
  height:380rpx;
  background: aliceblue;
}
.login_btn{
  top: 20rpx;
}
.item{
  display: flex;
  align-items: center;
  padding: 25rpx;
  background: white;
  border-bottom: 1px solid gray;
}
/* 右箭头 */
.right_arrow{
  border:solid black;
  border-width: 0 3px 3px 0;
  padding:3px;
  position: absolute;
  right: 15px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
/* 去除button默认样式并设置 */
.button{
  width: 100%;
  border: none;
  text-align: left;
  margin: 0;
  padding: 0;
  background-color: inherit;
  line-height: 1.3;
  font-size: 16px;
}
.button::after{
  border:none;
  border-radius: 0;
}

用wx.getUserProfile获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo

Page({
  data:{
    userInfo:\'\',
  },
  onLoad(){
    if (wx.getUserProfile) {
      this.setData({
        isLogin:true
      })
    }
  },
  //授权登录
  getUserProfile(e){
    wx.getUserProfile({
      desc: \'完善用户信息\',
      success:res=>{
        console.log(\'ok\',res.userInfo);
        let user =res.userInfo
        //缓存用户信息到本地
        wx.setStorageSync(\'user\', user)
        this.setData({
          userInfo:user,
        })
      },
      fail:res=>{
        console.log(\'fail\',res)
      }
    })

  },
//退出登录
outLogin(){
  this.setData({
    userInfo:\'\',
  })
  wx.setStorageSync(\'user\', null)
},

onLoad(){
  let user=wx.getStorageSync(\'user\')
  this.setData({
    userInfo:user,
  })
}
})