微信小程序云开发-登录功能(账号密码登录)

微信小程序云开发-登录功能(账号密码登录)

一、新建页面

新建页面loadByAccount

 

 二、代码实现

 1、loadByAccount.wxml

 1 <view>账号</view>
 2 <input type="text" placeholder="请输入账号" bindinput="getAccount"></input>
 3 <view>密码</view>
 4 <input type="text" placeholder="请输入密码" bindinput="getPassword"></input>
 5 <view class="btn">
 6 <button type="primary" bindtap="loadByAccount">登录</button>
 7 </view>
 8 <view class="tosign">
 9 <view bindtap="toSign" >注册</view>
10 </view>

2、loadByAccount.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   margin-top: 50rpx;
13 }
14 .tosign{
15   margin-top: 50rpx;
16   text-align: center;
17 }

3、loadByAccount.js

 1 //自定义变量,存储用户输入的账号
 2 let account = ""
 3 //自定义变量,存储用户输入的密码
 4 let password = ""
 5 Page({
 6 
 7   //点击跳转到注册页
 8   toSign(){
 9     wx.navigateTo({
10       url: "/pages/sign/sign",
11     })
12   },
13 
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   loadByAccount(){
26     //校验账号
27     if(account.length<4){
28       wx.showToast({
29         title: "账号至少4位",
30         icon:"none"
31       })
32       return
33     }
34     //登录功能的实现
35     wx.cloud.database().collection("users")
36     .where({
37       Account:account
38     })
39     .get({})
40     .then(res=>{
41       console.log("获取账号成功",res);
42       //校验密码长度
43       if(password.length<4){
44         wx.showToast({
45           title: "密码至少4位",
46           icon:"none"
47         })
48         return
49       }
50       //校验密码是否等于数据库中的密码
51       if(password==res.data[0].Password){
52         console.log("登录成功",res);
53         //显示登录成功提示
54         wx.showToast({
55           title: "登录成功",
56           icon:"success",
57           duration:2000,
58           //提示2秒后自动跳转到首页
59           success:function(){
60             setTimeout(function(){
61               wx.switchTab({
62               url: "/pages/index/index",
63               }) 
64             },2000)
65           }
66         })
67       }else{
68         console.log("密码不正确,登录失败");
69         wx.showToast({
70           title: "密码不正确",
71           icon:"none"
72         })
73       }
74     })
75     .catch(err=>{
76       console.log("获取账号失败",err);
77       wx.showToast({
78         title: "账号不存在",
79         icon:"none"
80       })
81     })
82   },
83 })

 

三、效果展示

 

原文链接:https://www.cnblogs.com/AnnLing/archive/2021/07/27/15064588.html