一、新建數據庫表
新建數據庫表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 })
三、效果展示
