微信小程序云开发——实现线上注册，登录的逻辑，并保存账号到云数据库（二）：注册

布满荆棘的人生 2023-07-20 15:59 55阅读 0赞

--------------------

**要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)**

--------------------

这一章讲解的是用户注册的逻辑：

继上一章节开通云服务之后，首先要做的就是创建一个数据库集合，用来存放用户的注册的数据，比如，用户名、密码等

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70][]

按照步骤，点击数据库，然后点击加号，输入数据库集合表名称即可

创建完成之后，我们就要写页面了，新建注册页面：

在我们写页面之前还要在app.js中做下配置，配置如下：

if (!wx.cloud) {
          console.error('请使用 2.2.3 或以上的基础库以使用云能力')
        } else {
          wx.cloud.init({
            // env 参数说明：
            //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
            //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
            //   如不填则使用默认环境（第一个创建的环境）
            // env: 'my-env-id',
            traceUser: true,
          })
        }

这段代码要放在onLaunch: function ()\{\}里面，获取用户信息的下面，配置完成之后，即可开始完成注册页面代码：

下面是我自己写的一套注册页面，仅供参考：

wxml:

wxss:

/* pages/login/login.wxss */
    .container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .container image {
      width: 100%;
      height: 100%;
    }
    .login_box{
      width: 90%;
      position: absolute;
      top: 10%;
      left: 5%;
    }
    .section{
      width: 100%;
      border-bottom: 4rpx solid #FFF;
      margin-top: 40rpx;
      position: relative;
    }
    .section input{
      height: 100rpx;
      color: #FFF;
      box-sizing: border-box;
      padding-left: 80rpx;
      font-size: 36rpx;
    }
    .section image{
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      top: 20rpx;
      left: 10rpx;
    }
    .color{
      color: #FFF;
    }
    .register{
      margin-top: 200rpx;
    }
    .register{
      background: #fa5151 !important;
      color: #FFF !important;
    }

app.wxss

.container {
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
    }

大致样式是这样的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70 1][]

接下来是js逻辑代码

这里面注释讲解已经写的很清楚了，如果有看不明白的小伙伴，可以在下方留言

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70 2][]

点击注册，提示注册成功之后，就可以看到我们的数据库已经增加了这一条数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70 3][]

如此，到这一步，我们的注册逻辑已经完成，希望能帮助到一些朋友，有不明白的可以在下方留言

下一章讲解登录逻辑:[https://blog.csdn.net/qq\_43052274/article/details/105269351][https_blog.csdn.net_qq_43052274_article_details_105269351]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70]: /images/20230528/28c40ede214a4a1f9de876da430f0a57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70 1]: /images/20230528/1ea0258baca5487890c6801de902e22e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70 2]: /images/20230528/4d635f654d8246caa6b50549a1dc3a57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70 3]: /images/20230528/c628bc8a91134c219b9944480a4a6d4b.png
[https_blog.csdn.net_qq_43052274_article_details_105269351]: https://blog.csdn.net/qq_43052274/article/details/105269351