当前位置:
首页 > temp > JavaScript教程 >
-
微信小程序云开发-登录功能(账号密码登录)
一、新建页面
新建页面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/p/15064588.html
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
SQL Server -- 解决存储过程传入参数作为s
关于JS定时器的整理
JS中使用Promise.all控制所有的异步请求都完
js中字符串的方法
import-local执行流程与node模块路径解析流程
检测数据类型的四种方法
js中数组的方法,32种方法
前端操作方法
数据类型
window.localStorage.setItem 和 localStorage.setIte
如何完美解决前端数字计算精度丢失与数