云开发注册页面的实现（附源码）
1. 看效果
2.上源码
2.1：wxml
<!--pages/zhuce/zhuce.wxml-->
<view id="total">
<form bindsubmit="create_zhuce">
<view id="t1">
<text>账号</text><input type="text" bindinput="username" id="use" placeholder="注册学号" value="{
{username}}"></input>
</view>
<view id="t2">
<text>密码</text><input type="password" bindinput="password" id="pass1" placeholder="注册密码" value="{
{password1}}"></input>
</view>
<view id="t3">
<text>确认密码</text><input type="password" bindinput="password1" id="pass2" placeholder="确认密码" value="{
{password2}}"></input>
</view>
<button id="btn1" bindtap="goZhuce"><text>注册</text></button>
</form>
</view>
2.2：wxss
/* pages/zhuce/zhuce.wxss */
#total{
width:100%;
height:1300rpx;
background-color: rgb(245,245,245);
}
#t1{
width:100%;
height:125rpx;
background-color: white;
position: relative;
top:70rpx;
}
#t2{
width:100%;
height:125rpx;
background-color: white;
position: relative;
top:80rpx;
}
#t3{
width:100%;
height:125rpx;
background-color: white;
position: relative;
top:90rpx;
}
#t4{
width:100%;
height:125rpx;
background-color: white;
position: relative;
top:100rpx;
}
#t1 text{
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#use{
width:400rpx;
height:80rpx;
margin-left: 200rpx;
position: relative;
bottom: 25rpx;
}
#t2 text{
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#pass1{
width:400rpx;
height:80rpx;
margin-left: 200rpx;
position: relative;
bottom: 25rpx;
}
#t3 text{
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#pass2{
width:400rpx;
height:80rpx;
margin-left: 320rpx;
position: relative;
bottom: 25rpx;
}
#t4 text{
position: relative;
left:40rpx;
top:40rpx;
color: rgb(143, 143, 143);
}
#pass3{
width:400rpx;
height:80rpx;
margin-left: 320rpx;
position: relative;
bottom: 25rpx;
}
#btn1{
position: relative;
top:300rpx;
background-color:rgb(51, 204, 170);
width:600rpx;
border-radius: 50rpx;
}
#btn1 text{
color:white;
font-size: 39rpx;
}
2.3：js
// pages/zhuce/zhuce.js
let username=''
let password=''
let password1=''
Page({
/**
* 页面的初始数据
*/
data: {
},
onReady: function () {
},
//获取输入值
username(e){
username=e.detail.value
},
password(e){
password=e.detail.value
},
password1(e){
password1=e.detail.value
},
goZhuce(){
if(username==''){
wx.showToast({
icon:'error',
title: '学号不能为空',
})
}else if(password==''){
wx.showToast({
icon:'error',
title: '密码不能为空',
})
}else if(password!==password1){
wx.showToast({
icon:'error',
title: '密码前后不一致',
})
}else{
wx.cloud.database().collection('user').add({
data:{
username:username,
password:password
}
})
wx.showToast({
icon:'success',
title: '注册成功',
})
wx.switchTab({
url: '/pages/me/me',
})
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
})
3.总结
本次开发主要核心技术是云开发数据库的添加数据。