挑战30天，开发一个消防答题小程序。教你如何处理小程序用户注册

最新推荐文章于 2024-09-17 16:52:57 发布

前端开发婷婷

最新推荐文章于 2024-09-17 16:52:57 发布

阅读量234

点赞数

分类专栏：答题小程序文章标签：小程序前端

本文链接：https://blog.csdn.net/zj780/article/details/127715020

版权

答题同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

小程序

3 篇文章 0 订阅

订阅专栏

[吃瓜群众]啦啦啦~，几天不见我又来了。今天更新第二期，这几天在处理用户注册和题库收集。

知识点：注册逻辑、登录缓存

上一期咱们讲了，如何搭一个基本的小程序框架，涉及开源组件（colorUI、Vant），新手和初中级的前端，十分推荐该两款开源组件，能够帮你节省大量的时间。

[兔子]上期链接直达：挑战30天，开发一个消防知识答题小程序，第一天

好~，咱们开始吧

1、用户注册登录

90%的用户交互程序，都少不了用户注册这个环节。想要让你的程序能够识别你的身份，那么必须要把用户信息存储在云端，是因为Http协议本身是无状态的，每次重新链接请求，都会忘记你是谁，接下来怎么处理呢？

上期咱们通过“用户填写”的开放能力，用于完善用户头像和昵称，接下来需要把用户的头像和昵称存储到数据库中

打开云开发后台

创建一个“users”的集合，权限（所有用户可读，仅创建者读写）

创建“users”集合

集合创建好了之后，就开始写代码，把用户信息存储进去

代码

//保存用户信息
  saveInfo: async function () {
    var that = this;
    //弹窗
    wx.showToast({
      title: '保存中',
      icon: "loading",
      duration: 30000
    })
    //先检测用户昵称
    const checkResult = await that.checkText();
    if (checkResult.result.errcode == 0) {
      //上传用户头像
      const uploadResult = await that.upload();
      //头像链接
      var fileID = uploadResult.result.fileID;
      //上传成功
      if (fileID) {
        //此处云开发函数注册用户
        wx.cloud.callFunction({
          name: 'login',
          data: {
            create_time: util.formatTime(new Date()),
            avatarUrl: fileID,
            nickName: that.data.nickName,
            openid: that.data.openid,
          }
        }).then((res) => {
          //登录成功跳转首页
          that.jump();
        }).catch((err) => {
          //登录失败
          wx.showToast({
            icon: 'none',
            title: '登录失败' + err
          })
        });
      } else {
        wx.showToast({
          title: '头像保存失败',
          icon: "none",
          duration: 1000
        })
      }
    } else {
      //清空用户昵称
      that.setData({
        nickName: ''
      })
      //不合法
      wx.showToast({
        title: '昵称不合法，请重新输入',
        icon: "none",
        duration: 1000
      })
    }
  },

以上代码涉及三层业务流程

1：检测用户昵称是否合规（小程序非常有必要接入msgSecCheck内容检测API），它免费，能够拦截大部分违规字眼。想做一个内容合规的小程序，强烈建议您使用它，非常有必要！

违规检测

代码

try {
    const result = await cloud.openapi.security.msgSecCheck({
      openid: event.openid, //openid
      scene: 2, //1 资料；2 评论；3 论坛；4 社交日志）
      version: 2, //版本2
      content: event.content, //检测内容
    })
    //默认不通过
    result['errcode'] = 87014;
    //suggest  risky(危险)、pass(通过)、review(审查)
    if (result['result']['suggest'] == 'pass' || result['result']['suggest'] == 'review') {
      //通过安全检测
      result['errcode'] = 0;
    } else {
      //违规内容
      result['errcode'] = 87014;
    }
    //返回状态码
    return result;
  } catch (err) {
    return err;
  }

2：头像上传。因为截止到11.8日，关于小程序 wx.getUserProfile 接口将被收回 小程序不可以直接获取头像永久链接，咱们只好通过“填写能力”获取临时头像，然后把临时头像上传到云存储，生成永久连接

avatarUrl永久头像连接

代码

upload: function () {
    var that = this;
    //此处上传用户头像
    let orderCode = '';
    // 6位随机数(加在时间戳后面)
    for (var i = 0; i < 24; i++) {
      orderCode += Math.floor(Math.random() * 10);
    }
    //文件名
    const cloudPath = 'avatar/ ' + util.timestampToTimeFramt(new Date().getTime()) + '/' + (new Date().getTime() + orderCode) + '.png';
    //检测文本值
    return new Promise((resolve, reject) => {
      //上传图片云函数
      wx.cloud.callFunction({
        name: "upload",
        data: {
          cloudPath: cloudPath,
          avatarUrl: that.data.avatarUrl,
        },
        success: function (res) {
          resolve(res);
        },
        fail: function (res) {
          reject(res);
        }
      });
    })
  },

3：新老用户处理逻辑。用户场景：新用户第一次登录，存储信息到数据库，老用户登录，更新数据库的登录时间。然后本地缓存登录凭证，每次请求携带登录凭证即可

流程图

代码

//查询用户是否注册
  const userResult = await db.collection('users').where({
    openid: event.openid,
  }).get();
  //取出用户条数
  var length = userResult.data.length;
  if (length == 0) {
    //新用户需要填写资料, 登录态false
    return {
      success: false,
      msg: '新用户(填写资料)'
    };
  } else {
    //老用户登录态true
    return {
      success: true,
      msg: '老用户(直接登录)',
      data: userResult.data
    };
  }

[奸笑]三个流程大概就是这样，用户注册流程看起来是不是很简单啦~，

主要归功于云开发天然无鉴权能力帮我们省去了很多时间，也方便了很多无后台基础的同学也能开发自己的小程序，省去了购置服务器，域名备案，后台语言以及运维的烦恼