微信小程序云开发-注册功能

一、新建数据库表

新建数据库表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 })

三、效果展示

 

 

posted @ 2021-07-27 10:02  AnnLing  阅读(1084)  评论(0)    收藏  举报