编写一个微信小程序将注册信息导入到云数据库中。

开发平台:微信开发者工具
succe.png

在云开发的数据库添加数据库userinfo:

useri.png

添加调用数据库的字段:

const db = wx.cloud.database()
const usf=db.collection('userinfo')
  1. 在rg.js页面进行添加"
    datab.png

  2. 添加用户信息到"userinfo"数据库

add.png

usf.add({
        data:{
          "user":ac,
          "password":ps
        }
      })
  1. 控制台显示注册成功,数据库中已经添加了相关记录

dab.png

数据库权限要设置为第一个

auth.png

####完整代码:

rg.js
const db = wx.cloud.database()
const usf=db.collection('userinfo')
Page({
  /**
   * 页面的初始数据
   */
  data: {
    warning:'',
    key:false,
    account:'',
    password:'',
    repassword:''
  },
  getaccount(e){
    console.log("输入的用户名",e.detail.value)
    this.setData({
      account:e.detail.value
    })
  },
  getpsw(e){
    console.log("输入的密码",e.detail.value)
    this.setData({
      password:e.detail.value
    })
  },
  getrepsw(e){
    console.log("输入的确认密码",e.detail.value)
    this.setData({
      repassword:e.detail.value
    })
  },
  submit(e) {
    let ac = this.data.account
    let ps = this.data.password
    let rps = this.data.repassword
    if(ac.length<1){
      wx.showToast({
        title: '用户名不能为空',
        mask:true,
        icon:'none',
        duration:1000
      })
    }
    else if (ps.length < 6 || ps.length > 12) {
      wx.showToast({
        title: '密码为6位至12位',
        mask:true,
        icon:'none',
        duration:1000
      })
      console.log("密码为6位至12位")
    }
    else if(rps!=ps){
      wx.showToast({
        title: '确认密码输入错误',
        mask:true,
        icon:'none',
        duration:1000
      })
    }
    else{
      console.log("信息正确,可以注册")
      usf.add({
        data:{
          "user":ac,
          "password":ps
        }
      })
      console.log("用户注册成功")
    }
  }
})
rg.json
{
  "usingComponents": {}
}
rg.wxml
<image class="pic" src="../../images/register.png" mode="widthFix"></image>
<view>
  <view class="title">用户名:</view>
  <input class="input" name="stuno" placeholder="请输入您的用户名" type="number" bindinput="getaccount" maxlength="11"></input>
  <view class="title">密码:</view>
  <input class="input" name="password" placeholder="请设置您的密码" bindinput="getpsw" password></input>
  <input class="input" name="repassword" placeholder="请重复您的密码" bindinput="getrepsw" password></input>
</view>
<button class="btn" hover-class="anxia" bindtap="submit">注册</button>
rg.wxss
/* pages/rg/rg.wxss */
.pic{
  display:flex;
  width: 100%;
  justify-content: center;
  align-items:center;

}

.title{
  margin-left: 20rpx;
}
.input{
  border-bottom:solid;
  border-color: gainsboro;
  margin-top:10rpx;
  width:90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10rpx;
  border-width: 4rpx;
}

.btn{
  font-size: 10pt;
  height: 55rpx;
  background: #ffcc01;
  color: black;
  text-align: center;
  border-radius: 50px;
  margin: 30% 20% 30% 20%;
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐