一、新建数据库表
新建数据库表users,用来存储注册成功后提交的数据。数据库表包括3个字段:
- 用户名:userName
- 账号:Account
- 密码:Password
二、新建注册页面
新建注册页面,命名为sign。
1、sign.wxml
1 <view>用户名</view> 2 <input type="text" placeholder="请输入用户名" bindinput="getUserName"></input> 3 <view>账号</view> 4 <input type="text" placeholder="请输入账号" bindinput="getAccount"></input> 5 <view>密码</view> 6 <input type="text" placeholder="请输入密码" bindinput="getPassword"></input> 7 <view class="btn"> 8 <button type="primary" bindtap="sign">注册</button> 9 </view>
2、sign.wxss
1 input{ 2 margin: 20rpx; 3 padding-left: 10rpx; 4 height: 80rpx; 5 border: 1rpx solid #c3c3c3; 6 } 7 view{ 8 margin: 20rpx; 9 } 10 .btn{ 11 display: flex; 12 }
3、sign.js
- 校验用户名、账号、密码的长度
- 注册成功后showToast提示2秒
- 提示成功后定时2秒后跳转到登录页
1 //自定义变量,存放用户名 2 let userName = '' 3 //自定义变量,存放账号 4 let Account = '' 5 //自定义变量,存放密码 6 let Password = '' 7 8 Page({ 9 10 //获取用户输入的用户名/账号/密码 11 getUserName(e){ 12 console.log("输入的用户名",e.detail.value); 13 userName = e.detail.value 14 }, 15 getAccount(e){ 16 console.log("输入的账号",e.detail.value); 17 Account = e.detail.value 18 }, 19 getPassword(e){ 20 console.log("输入的密码",e.detail.value); 21 Password = e.detail.value 22 }, 23 24 //注册 25 sign(){ 26 //校验用户名 27 if(userName.length<2){ 28 wx.showToast({ 29 title: '用户名至少2位', 30 icon:"none" 31 }) 32 return //如果不满足,代码不再往下执行 33 } 34 if(userName.length>10){ 35 wx.showToast({ 36 title: '用户名最多10位', 37 icon:"none" 38 }) 39 return 40 } 41 //校验账号 42 if(Account.length<4){ 43 wx.showToast({ 44 title: '账号至少4位', 45 icon:"none" 46 }) 47 return 48 } 49 //校验密码 50 if(Password.length<4){ 51 wx.showToast({ 52 title: '密码至少4位', 53 icon:"none" 54 }) 55 return 56 } 57 //注册功能的实现 58 wx.cloud.database().collection("users") 59 .add({ 60 data:{ 61 userName:userName, 62 Account:Account, 63 Password:Password 64 } 65 }).then(res=>{ 66 console.log("注册数据添加到数据库成功",res); 67 //注册成功提示 68 wx.showToast({ 69 title: '注册成功', 70 icon:"success", 71 duration:2000, 72 success:function(){ 73 //提示框停留2秒后跳转到用户登录页 74 setTimeout(function(){ 75 wx.navigateTo({ 76 url: '/pages/loadByAccount/loadByAccount', 77 }) 78 },2000)} 79 }) 80 }).catch(err=>{ 81 console.log("注册数据添加失败",err); 82 }) 83 }, 84 85 })
三、效果展示