微信小程序常见两种登陆注册方式（一）

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

普通登陆注册

概述

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

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

实现注册功能

效果展示

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

代码与注释

输入用户名
<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
      })
    }
  }

})