微信小程序（手机登录60S倒计时+微信登录页面+限制时间次数频率）

1.这是效果图（js代码没有优化，封装一个request请求）

下面直接上代码
2.wxml代码

<view class="login-container"><view class="title">微信小程序App</view><view class="login-box"><view class="section"><label>手机号</label><input placeholder="请输入手机号码" type="number" maxlength="11" bindinput="inputPhoneNum" auto-focus /><text wx:if="{{send}}" bindblur="getPhone" class="sendMsg" bindtap="sendMsg">发送</text><text wx:if="{{alreadySend}}" class="sendMsg" >{{second+"s"}}</text></view><label>验证码</label><input bindblur="xcode" placeholder="请输入验证码"/><button class="login-btn" bindtap="login" >立即登录</button><view class="three-line">一一一一一第三方登录一一一一一</view><button class="login-btn" bindtap="wechatLogin" style="background-color:green;">微信登录</button></view>
</view>

3.wxss

.userinfo {display: flex;flex-direction: column;align-items: center;}text {width: 200rpx;}button {margin: 16rpx;}.sendMsg {font-size: 12;margin-right: 0;padding: 0;height: inherit;width: 80rpx;}page{height: 100%;    /* 使用page的height可以使页面占全屏 */background-color: #fafafa;}.login-container{padding: 0 10%;height: 100%;}.title{font-size: large;text-align: center;padding-top: 10%;font-weight: bold;}.login-box{margin-top: 10%;padding: 10% 5%;background-color: white;border-radius: 10px;box-shadow: 0 4px 4px #888888;}.login-box>input{margin: 5% 0 8% 0;border-bottom: 1rpx solid lightgray;}.login-btn{width: 100%!important;background-color: #2f6afd;color: white;font-weight: normal;}.three-line{margin: 8% 0;text-align: center;font-size: 12px;color: gray;}.linbtn{margin-left: 70%;}

4.js代码

// pages/user/user.js
//index.js
//获取应用实例
const app = getApp()Page({data: {send: true,alreadySend: false,second: 60,disabled: true,phoneNum: '',time:0,//防抖xcode:"",//输入验证码},// 手机号部分inputPhoneNum: function (e) {let phoneNum = e.detail.valuethis.setData({phoneNum: phoneNum})},sendMsg: function (e) {var phoneNum = this.data.phoneNum;if(phoneNum == ''){wx.showToast({title: '请输入手机号码',icon: 'none',duration: 2000})return ;}//获取验证码var times=e.timeStampif(times-this.data.time<1000){wx.showToast({title: '请求太频繁',})return false}this.setData({time:times})var phone=this.data.phoneNumvar _that=thiswx.request({url: '',method:"GET",dataType:"JSON",data:{phone,},success:function(res){var res=JSON.parse(res.data)console.log(res)//  _that.setData({//     scode:res.data//  })}})this.setData({alreadySend: true,send: false})this.timer()},//输入验证码xcode(e){var xcode=e.detail.valueconsole.log(xcode)this.setData({xcode,})},//登录login(e){var phone=this.data.phoneNumvar xcode=this.data.xcodewx.request({url: '',method:"GET",dataType:"JSON",data:{phone,xcode},success:function(res){var res=JSON.parse(res.data)console.log(res)wx.setStorageSync('token', res.data.token)wx.setStorageSync('uid', res.data.uid)wx.switchTab({url: '/pages/index/index',})}})
},showSendMsg: function () {if (!this.data.alreadySend) {this.setData({send: true})}},hideSendMsg: function () {this.setData({send: false,disabled: true,buttonType: 'default'})},timer: function () {let promise = new Promise((resolve, reject) => {let setTimer = setInterval(() => {this.setData({second: this.data.second - 1})if (this.data.second <= 0) {this.setData({second: 60,alreadySend: false,send: true})resolve(setTimer)}}, 1000)})promise.then((setTimer) => {clearInterval(setTimer)})},//微信登录wechatLogin(e){wx.getUserProfile({desc: '获取您的信息',success:function(res){var avatarUrl=res.userInfo.avatarUrlvar gender=res.userInfo.gendervar nickName=res.userInfo.nickNamewx.login({success:function(res){var code=res.codewx.request({url: '',method:"POST",dataType:"JSON",header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},data:{avatarUrl,gender,nickName,code},success:function(res){var data=JSON.parse(res.data)console.log(data)var token=data.data.tokenvar uid=data.data.uidwx.setStorageSync('token', token)wx.setStorageSync('uid', uid)wx.switchTab({url: '/pages/index/index',})}})}})}})},
})

5.lin-ui代码（可以不写这个）（Lin UI 是基于微信小程序原生语法实现的组件库，自行下载，不下载也是没事的）

{"usingComponents": {"l-button":"/miniprogram_npm/lin-ui/button/index"}
}

6.php后端处理手机登录+微信登录考虑到短信资本（短信一分钟内只能发送一次），杜绝盗刷（每个手机号每分钟发送短信次数不可超过3次），限制ip（进行ip限制）只粘贴了服务层逻辑代码，（具体根据自己业务逻辑写）下面的三个限制可根据业务暂时不写

 protected $loginDao;const SERVER_IP = '127.0.0.1';//可以写自己线上ippublic function __construct(LoginDao $loginDao){$this->loginDao=$loginDao;}public function getCode($tel,$ip){//限制验证码时间$cacheTime = Cache::get($tel);if (time() - $cacheTime < 60) {return $this->getJsonData(10012, '发送频繁，1分钟后再试',null);}//限制手机号请求次数
//        Cache::put($tel,0);die;if (Cache::has($tel.'_num')){$num=Cache::get($tel.'_num');}else{$num=Cache::put($tel.'_num',0);}if ($num>3){return $this->getJsonData(10010,'一天只能请求3次',null);}//限制ip发送if ($ip != self::SERVER_IP) {return $this->getJsonData(10013, 'ip地址不正确，无法发送短信，请检查ip',null);}$smsapi = "http://api.smsbao.com/";$user = ""; //短信平台帐号$pass = md5(""); //短信平台密码$rand=rand(1000,9999);$content="【短信宝】,您的验证码".$rand;//要发送的短信内容$phone = $tel;//要发送短信的手机号码$sendurl = $smsapi."sms?u=".$user."&p=".$pass."&m=".$phone."&c=".urlencode($content);$result =file_get_contents($sendurl) ;if ($result!=0){//缓存验证码Cache::put('code',$rand);//时间1分钟发送Cache::put($tel,time(),60);//手机号每天发送次数Cache::increment($tel.'_num',1);return $this->getJsonData(200,'获取成功',$rand);}}//手机public function login($phone,$xcode){$code=Cache::get('code');if ($code==$xcode){$user=WechatUser::where('phone',$phone)->first();$uid=$user['id'];$token=TokenServer::createToken($uid);return $this->getJsonData(200,'登录成功',['uid'=>$token,'token'=>$token]);}}//微信登录public function wechatLogin($code,$data){$url="https://api.weixin.qq.com/sns/jscode2session?appid=wx091a34a0cb59638e&secret=f8ae1660305731244a60ef9afb6a62d1&js_code=$code&grant_type=authorization_code";$arr=$this->geturl($url);//详情DB::beginTransaction();try {$user=WechatUser::where('openid',$arr['openid'])->first();if ($user){//更新sessionWechatUser::where('openid',$arr['openid'])->update(['session_key'=>$arr['session_key']]);$uid=$user['id'];$token=TokenServer::createToken($uid);}else{//反之 添加$row=['openid'=>$arr['openid'],'session_key'=>$arr['session_key'],'gender'=>$data['gender'],'avatarurl'=>$data['avatarUrl'],'nickname'=>$data['nickName']];WechatUser::create($row);$user=WechatUser::where('openid',$arr['openid'])->first();$uid=$user['id'];$token=TokenServer::createToken($uid);}DB::commit();return $this->getJsonData(200,'登录成功',['uid'=>$token,'token'=>$token]);}catch (\Exception $e){DB::rollBack();return $e->getMessage();}}

微信小程序（手机登录60S倒计时+微信登录页面+限制时间次数频率）相关推荐

开发版微信小程序手机版无法访问服务器,微信小程序安卓真机调试 202:net::ERR_CERT_AUTHORITY 无法请求接口请求接口无响应...
微信小程序真机调试 202:net::ERR_CERT_AUTHORITY 主要在安卓机. 证书使用的是腾讯云的免费证书 TrustAisa 开发者工具手机端浏览器 PC浏览器访问https:/ ...
h5是可以一键打包小程序的_H5手机网站封装打包微信小程序并实现分享及微信支付...
手机网站打包小程序教程,生成小程序,网页版小程序打包微信小程序,H5封装成微信小程序. 微信小程序开发一般分为2种方式,一种就是原生开发小程序,一种是将手机网站打包成小程序. 原生开发小程序成本较 ...
微信小程序获取用户信息并保存登录状态
微信小程序获取用户信息并保存登录状态:http://www.360doc.com/content/18/0124/11/9200790_724662071.shtml 转载于:https://www ...
从零开始开发微信小程序（四）：微信小程序绑定系统账号并授权登录之后台端...
2019独角兽企业重金招聘Python工程师标准>>> 1. 后台开发环境: 语言:java 框架:springboot 2. 代码示例: package com.zc.wechat ...
微信小程序-001-抽签功能-008-简单登录
微信小程序-001-抽签功能-008-简单登录目录一.wxml 二.js pages.login.login 一.wxml <button open-type="getUserIn ...
微信小程序仿淘票票之登录注册讲解
微信小程序仿淘票票之登录注册讲解(这也是我学习的第一步嘛) 前言一.登录以及注册的业务逻辑二.核心代码 1.register代码 2.login代码总结前言愉快的期末,终于结束了,我准备把程 ...
微信小程序扫码实现web自动登录
清明假期在家无聊,写了一个微信小程序扫码,web登录的demo 技术栈前端:vue2+vue-socket.io+uuid,微信小程序原生+weapp.socket.io 后端: eggjs+red ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...
小程序源码：最新掌上题库微信小程序源码下载，修复登录接口，支持在线考试，自定义导入考题-多玩法安装简单
这是一款题库微信小程序源码支持积分商城.自定义试题及导入.知识点分类.模式试题考试.流量主等首页模块:专项刷题 .题型刷题.乱序刷题.我的收藏.我的错题.未作习题.刷知识点.考前必背另外还有更多 ...
微信小程序内嵌webview实现微信登录
一.调研场景 1, 微信小程序内嵌webview实现微信登录二.技术实现 1. web-view标签实现链接内嵌小程序里嵌套web-view页面 (1)src属性:webview 指向网页的链接. ...

微信小程序（手机登录60S倒计时+微信登录页面+限制时间次数频率）

微信小程序（手机登录60S倒计时+微信登录页面+限制时间次数频率）相关推荐

最新文章

热门文章