• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、新建页面

新建页面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 })

 

三、效果展示

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序登录注册界面发布时间:2022-07-18
下一篇:
手把手教你玩微信小程序跳一跳发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap