小程序云开发用户注册页面

一、效果展示

二、思路

• 接收用户输入
• 验证输入的合法性
• 匹配数据库是否存在数据：若存在，则告知“存在账户，不能注册”；若不存在，则将数据添加至数据库。
• 跳转至登录页面

注意事项

• 用户输入采用表单形式，接收数据的方法同登录页面一致，不加赘述。
• 匹配数据库的目的是防止账号重复和恶意多次注册，在这一个功能中，我选择用用户唯一标识‘openid’来实现。先通过布置云函数（getOpenid（））获取openid。

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
    const wxContext = cloud.getWXContext()

    return {
        event,
        openid: wxContext.OPENID,
        appid: wxContext.APPID,
        unionid: wxContext.UNIONID,
    }
}

并在注册页面的onload函数中先加载，传入给好的变量中

    onLoad: function (openid) {
      wx.cloud.callFunction({
        config:{ env: '自己的云环境' },
        name:'getopenid',
        complete: res =>{
          console.log(res);
          var s = res.result.openid;
          this.setData({
            openid: s,
          })
        }
      })

• 接下来，在判断输入合法性之后，就可以匹配数据库了。

三、完整代码

（注意自己改图片路径和云环境）
WXML

<!--pages/userRegist/userRegist.wxml-->
<view>
    <image src="/images/yinxing.jpg" class="img"></image>
</view>

<view>
    <form bindsubmit="doRegist">
    <!--注册账号-->
        <view class="inputView">
             <image class="nameImage" src="/images/userName.png"></image>
             <label class="loginLabel">账号</label>
             <input name="username" type="nickname" placeholder="请输入昵称" class="inputText" maxlength="11"/>
             <!--maxlength="11"-->
        </view>
        <view class="line"></view>
        <!--密码-->
        <view class="inputView">
             <image class="keyImage" src="/images/password.png"></image>
             <label class="loginLabel">密码</label>
             <input name="password" type="safe-password" placeholder="请输入密码" class="inputText" password="true" maxlength="16"/>
        </view>

        <!--注册按钮-->
        <view>
            <button class="goRegistBtn" form-type="submit">注册</button>
        </view>
    </form>
</view>

WXSS

/* pages/userRegist/userRegist.wxss */
page{
    background-color: whitesmoke;
}
.img {
    width: 100%;
}
.inputView {
    background-color: white;
    line-height: 45px;
}
.nameImage, .keyImage {
    margin-left: 22px;
    width: 20px;
    height: 20px;
}

.loginLabel {
    margin: 15px 15px 15px 10px;
    color: gray;
    font-size: 15px;
}

.inputText {
    float: right;
    text-align: right;
    margin-right: 22px;
    margin-top: 11px;
    font-size: 15px;
}

.line {
    width: 100%;
    height: 1px;
    background-color: gainsboro;
    margin-top: 1px;
}

/*按钮*/
.goRegistBtn {
    width: 80%;
    margin-top: 35px;
    background-color: rgb(240,176,183);
    color: white;
    border-radius: 98rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

JS
// pages/userRegist/userRegist.js
Page({

/**
 * 页面的初始数据
 */
data: {
  openid: '',
  flag : false,
},
    /**
 * 生命周期函数--监听页面加载
 */
onLoad: function (openid) {
  wx.cloud.callFunction({
    config:{ env: '自己的云环境' },
    name:'getopenid',
    complete: res =>{
      console.log(res);
      var s = res.result.openid;
      this.setData({
        openid: s,
      })
    }
  })
},
//先对比数据库中是否存在相同的数据
//若不存在就将记录加入数据库
doRegist:function(e){
    const that = this;
    var fromType = e.detail.value;
    var username = fromType.username;
    var password = fromType.password;
    const _OPENID = that.data.openid;
    const db = wx.cloud.database();//创建数据库实例
    const _ = db.command;
    const admit = db.collection('clients');
    // let flag = false;
   if (username.length === 0 || password.length === 0){
       wx.showToast({
         title: '账号或密码不能为空',
         icon: 'none',
       })
   }else{
    
     //先查询用户有没有注册，根据openid判断,这样一个微信号就只能注册一个
     //现根据目前的openid判断查询
     admit.where({
      _openid: that.data.openid
    }).get({
      success:(res)=>{
        let now = res.data;
        if (now.length > 0){
          that.setData({
            flag : true
          })
          if (that.data.flag === true){
            wx.showToast({
              title: '注册失败，用户已有账号',
              icon: 'none'
            })
          }

        }else{
                          //  add若未传入_id则创建；若传入，则不允许重复
           admit.add({
             data:{
               _id: username,
               password: password,
               //默认头像和昵称（要改路径）
               facePath:'../../images/mynone.png',
               nickName: '未知'
             },
             success: (res) =>{
               wx.showToast({
                 title: '注册成功',
               })
               wx.navigateTo({
                 url: '/pages/userLogin/userLogin',
               })
             },fail: (res) =>{
               wx.showToast({
                 title: '账号已存在',
                 icon: 'error',
               })
             }
           })
        }
      }
    })
   }
}

})

有问题可留言，尽量知无不答，一起进步。