微信小程序通过云开发模式实现注册和登录功能

首先需要进行云环境初始化

💬相关

云环境初始化操作流程可查看前一篇文章《对微信小程序的云开发模式的简单理解》

https://blog.csdn.net/weixin_42077074/article/details/113482034

随后，要通过云开发模式实现注册或登录功能有两种方法

• <form>表单绑定事件进行处理
• 几个<input>输入框和<button>按钮分别绑定事件进行处理

笔者用第一种方法实现了注册功能，第二种方法实现了注册和登录功能

<form>表单绑定事件进行处理

• WXML 部分

在 WXML 里添加一个<form>组件并绑定一个事件handlerSubmit，但需要注意的是，<form>组件只会提交所有被name属性修饰的表单域

 <form bindsubmit="handlerSubmit">
 <!--账号-->
  <label class="loginLab">账号</label> 
  <input class="inputText" placeholder="请输入账号" name="account" /> 
 
 <!--密码-->
  <label class="loginLab">密码</label> 
  <input class="inputText" password="true" placeholder="请输入密码" name="pwd" /> 
 
 <!--按钮-->
  <button class="regBtn" type="primary" form-type="submit">注册</button> 
 </form>

• JavaScript部分

表单会将数据放在事件evt内部

  handlerSubmit:function(evt)
  {
    console.log(evt)
  }

通过evt.detail.value获取用户名和密码，获取数据库引用和集合引用，最后将通过集合将数据存储至数据库

  handlerSubmit:function(evt)
  {
    console.log(evt);
    //获取用户名和密码
    let account = evt.detail.value.account;
    let pwd = evt.detail.value.pwd;
    const db = wx.cloud.database();//获取数据库引用
    const userCollection = db.collection("user");//获取集合（collection）的引用
     //通过集合向数据库添加数据
    userCollection.add({
      data:{
        account:account,
        pwd:pwd
      }
    })
  }

添加数据成功的界面如下

几个<input>输入框和<button>按钮分别绑定事件进行处理

• WXML 部分

在分别给<input>和<button>分别用bindchange和bindtap绑定不同的事件getAccount、getPwd、reg、login

 <!--账号-->
  <label class="loginLab">账号</label> 
  <input class="inputText" placeholder="请输入账号" name="account"  bindchange="getAccount" /> 
 
 <!--密码-->
  <label class="loginLab">密码</label> 
  <input class="inputText" password="true" placeholder="请输入密码" name="pwd" bindchange="getPwd" /> 
 
 <!--按钮-->
  <button class="regBtn" type="primary" bindtap="reg" form-type="submit">注册</button> 
  <button class="loginBtn" type="primary" bindtap="login" form-type="submit">登录</button> 

• JavaScript部分

给Page中的data添加属性account和pwd，并设置初始值为null

  data: {
    account:null,
    pwd:null,
  }

在事件getAccount和getPwd中，通过this.setData将从<input>获取的数据存进data

  getAccount:function(evt)
  {
    this.setData({account:evt.detail.value});//将数据存进data
    console.log(this.data.account);
  },
  getPwd:function(evt)
  {
    this.setData({pwd:evt.detail.value});//将数据存进data
    console.log(this.data.pwd);
  }

通过遍历数据库对象集合一一比对数据，判断账户是否存在，登陆密码是否正确，并给出消息提示

  reg:function(evt)//注册函数
  {
    const db = wx.cloud.database();
    const userCollection = db.collection("user");
    let flag = false  //表示账户是否存在,false为初始值

    userCollection.get({
      success: (res) => {
        let user = res.data;  //获取到的对象数组数据
        console.log(user);
        for (let i = 0; i < user.length; i++) {  //遍历数据库对象集合
          if (this.data.account === user[i].account) { //账户已存在
            flag = true;
            break;
          }
        }
        if (flag === true) {  //账户已存在
          wx.showToast({
            title: '账号已注册！',
            icon: 'error',
            duration: 2500
          })
        }
        else {  //账户未注册
          userCollection.add({
            data:{
              account:this.data.account,
              pwd:this.data.pwd
            }
          })
          wx.showToast({	//显示注册成功信息
            title: '注册成功！',
            icon: 'success',
            duration: 2500
          })
          wx.switchTab({	//注册成功后跳转页面
            url: "/index/index"
          }) 
        }
      }
    })
  }

  login:function(evt)//登录函数
  {
    const db = wx.cloud.database();
    const userCollection = db.collection("user");
    let flag = false  //表示账户是否存在,false为初始值
    userCollection.get({
      success: (res) => {
        let user = res.data;
        console.log(user);
        for (let i = 0; i < user.length; i++) {  //遍历数据库对象集合
          if (this.data.account === user[i].account) { //账户已存在
            if (this.data.pwd !== user[i].pwd) {  //判断密码正确与否
              wx.showToast({  //显示密码错误信息
                title: '密码错误！！',
                icon: 'error',
                duration: 2500
              });
              i=-1; //密码错误则重头开始遍历数据库对象集合
            } else {
              wx.showToast({  //显示登录成功信息
                title: '登陆成功！！',
                icon: 'success',
                duration: 2500
              })
              flag=true;
              wx.switchTab({  //登录成功后跳转页面
                url: "/index/index",
              })
              break;
            }
          }
        };
        if(flag==false)//遍历完数据后发现没有该账户
        {
          wx.showToast({
            title: '该用户不存在',
            icon: 'error',
            duration: 2500
          })
        }
      }
    })
  }