微信小程序云数据库实现注册

微信小程序自带的云数据库的优势在于，不用搭建服务器和后端就可以直接调用数据库

我们接下来使用云数据库实现注册功能，效果图如下

云数据库结构如下：

这是用云数据库实现注册功能，实现代码如下，：

   register.wxml

    

<view class="page">
 
  <view class="zhuce">注册</view>
  <view class='row1'>
        <view class='info'>
               <input  class= 'info-input1' bindinput="handleInputPhone" placeholder="请输入你的手机号" />
         </view> 
  </view>
  <view class='row2'>
        <view class='info'>
               <input  class= 'info-input' bindinput="handleusername" placeholder="请输入你的账户名" />
         </view>
  </view>
   <view class='row3'>
        <view class='info'>
               <input type='password' class= 'info-input' bindinput="handleNewChanges" placeholder="请输入你的密码" />
         </view>
  </view>
   <view class='row4'>
        <view class='info'>
               <input  type='password' class= 'info-input' bindinput="handleNewChangesAgain" placeholder="请重新输入你的密码" />
         </view>
  </view>
  <button class='submit' bindtap='submit'>提交</button>
  </view>
</view>

register.js

const app = getApp()

wx.cloud.init({
  env: 'asd'//环境ID
})
const db = wx.cloud.database({
  env: 'asd'
})

Page({

  data: {
    phone: '', 
    username: '',
    usernameverify:1,
    NewChanges: '',
    NewChangesAgain: '',
  },
  
  handleInputPhone: function (e) {
    var that = this;
    that.setData({
      phone: e.detail.value
    })
  },
  handleusername: function (e) {
    var that = this;
    this.setData({
      username: e.detail.value
    })
    
  },
  handleNewChanges: function (e) {
    var that = this;
    that.setData({
      NewChanges: e.detail.value
    })
  },
  handleNewChangesAgain: function (e) {
    var that = this;
    that.setData({
      NewChangesAgain: e.detail.value
    })
  },
 
  submit: function (e) {
    var that = this
    
    db.collection('abcc'[相应的数据表]).where({ username: that.data.username }).get({
      success: function (res) {
        var that = this
        that.setData({
          usernameverify: res.data[0].verifycode //用来确认改用户名是否已经被注册
        })
      }
    })
    if (that.data.phone == '') {
      console.log('a')
      wx.showToast({
        title: '手机号码不能为空',
        duration: 2000
      })
    } else if (that.data.phone.trim().length != 11) {
      console.log('b')
      wx.showToast({
        title: '手机号码格式不对',
        duration: 2000
      })
    } else if (that.data.username == '') {
      console.log('c')
      wx.showToast({
        title: '登录名不能为空',
        duration: 2000
      })
    }
    else if (!that.data.usernameverify) {
      console.log('d')
      wx.showToast({
        title: '登录名已经被注册了',
        duration: 2000
      })
    }
    else if (that.data.NewChanges == '') {
      console.log('e')
      wx.showToast({
        title: '请输入密码',
        duration: 2000
      })
      return
    } else if (that.data.NewChangesAgain != that.data.NewChanges) {
      console.log('f')
      wx.showToast({
        title: '两次密码不一致',
        duration: 2000
      })
      return
    } else {
      var that = this
      db.collection('abcc'[相应的数据表]).add({
        data: {
          username: that.data.username,
          password: that.data.NewChanges,
          phonenum: that.data.phone,
          verifycode: 1
         },
        success: function (res) {
        }
      })
    }
   }  
})

register.wxss

.page{
   left: 0px;
   top: 0px;
   width: 375px;
   height: 667px;
   background-color: rgba(145, 165, 165, 1);
}
.zhuce{
  position: absolute;
  left: 132px;
  top: 70px;
  width: 72px;
  height: 50px;
  color: rgba(16, 16, 16, 1);
  font-size: 36px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.row1{
  position: absolute;
  left: 36px;
  top: 179px;
  width: 250px;
  height: 51px;
  line-height: 41px;
  border-radius: 22px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 1);
  background-color: rgba(255, 255, 255, 1);
}
.row2{
  position: absolute;
  left: 36px;
  top: 239px;
  width: 250px;
  height: 51px;
  line-height: 41px;
  border-radius: 22px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 1);
  background-color: rgba(255, 255, 255, 1);
}
.row3{
  position: absolute;
  left: 36px;
  top: 299px;
  width: 250px;
  height: 51px;
  line-height: 41px;
  border-radius: 22px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 1);
  background-color: rgba(255, 255, 255, 1);
}
.row4{
  position: absolute;
  left: 36px;
  top: 359px;
  width: 250px;
  height: 51px;
  line-height: 41px;
  border-radius: 22px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 1);
  background-color: rgba(255, 255, 255, 1);
}
.info-input{
  height: 100rpx;
  margin-left: 50rpx;
  color: #777;
    float: left;
}
.submit{
  position: absolute;
  left: 75px;
  top: 433px;
  width: 171px;
  height: 57px;
  line-height: 20px;
  border-radius: 26px;
  background-color: rgba(63, 81, 181, 1);
  color: rgba(255, 255, 255, 1);
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 1);
}