小程序手机号注册登录

用户注册需要获取手机号然后调用第三方接口获取验证码，然后进行验证手机验证码

手机号注册页面

<!-- 绑定手机号 -->
<view class='content'><form bindsubmit="formSubmit"><view class='phone-box'><text class='phone'>手机号</text><input name="phone" type='number' placeholder="请输入手机号" maxlength='11' name="phone" class='number' bindinput='lovePhone' /></view><view class='phone-box'><text class='phone'>验证码</text><input name="phoneCode" placeholder="请输入验证码" class='number' placeholder-style='color:#bbb' bindinput="yanLoveInput" /><view bindtap='yanLoveBtn' class='getNum'>{{getText2}}</view></view><button formType="submit" class='submit'>绑定</button></form>
</view>

css样式页面

.content {width: 100%;height: auto;padding: 0 50rpx;box-sizing: border-box;}.phone-box {width: 100%;height: 89rpx;border-bottom: 1rpx solid #efefef;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}.phone {color: #333;margin-right: 60rpx;font-size: 28rpx;}.number {color: #333;font-size: 28rpx;width: 200rpx;}.getNum {width:210rpx;height:48rpx;background:rgba(248, 112, 57, 1);border-radius:8rpx;font-size:28rpx;font-family:PingFang-SC-Medium;color:rgba(255, 255, 255, 1);line-height:48rpx;margin-right:36rpx;text-align:center;}.submit {width: 480rpx;height: 80rpx;background: rgba(248, 112, 57, 1);border-radius: 8rpx;margin-top: 80rpx;color: #fff;font-size: 32rpx;}

js代码块儿


const app = getApp();
Page({data: {// 验证手机号loginPhone: false,loginPwd: false,loveChange: true,hongyzphone: '',// 验证码是否正确zhengLove: true,huoLove: '',getText2: '获取验证码',},// 手机验证lovePhone: function (e) {let phone = e.detail.value;this.setData({ hongyzphone: phone })if (!(/^1[34578]\d{9}$/.test(phone))) {this.setData({lovePhone: false})//console.log(phone.length)if (phone.length >= 11) {wx.showToast({title: '手机号有误',icon: 'none',duration: 1000})}} else {this.setData({lovePhone: true})}},// 验证码输入yanLoveInput: function (e) {let that = this;let yanLove = e.detail.value;//console.log(yanLove)let huoLove = this.data.huoLove;//console.log(huoLove)that.setData({yanLove: yanLove,zhengLove: false,})if (yanLove.length > 4) {if (yanLove == huoLove) {that.setData({zhengLove: true,})} else {that.setData({zhengLove: false,})wx.showModal({content: '输入验证码有误',showCancel: false,success: function (res) { }})}}},// 验证码按钮yanLoveBtn: function () {let loveChange = this.data.loveChange;//console.log(loveChange)let lovePhone = this.data.lovePhone;//console.log(lovePhone)let phone = this.data.hongyzphone;console.log(phone)let n = 59;let that = this;if (!lovePhone) {wx.showToast({title: '手机号有误',icon:"none",duration: 1000})} else {if (loveChange) {this.setData({loveChange: false})let lovetime = setInterval(function () {let str = '(' + n + ')' + '重新获取'that.setData({getText2: str})if (n <= 0) {that.setData({loveChange: true,getText2: '重新获取'})clearInterval(lovetime);}n--;}, 1000);//获取验证码接口写在这里//例子 并非真实接口// app.agriknow.sendMsg(phone).then(res => {//  console.log('请求获取验证码.res =>', res)// }).catch(err => {//  console.log(err)// })wx.request({url: 'http://day528.exam9.com/getCode',data:{phone:phone},success:function(res){//console.log(res.data)// var code = res.data.data;if(res.data.data==500){console.log(res.data)wx.showToast({title: '一分钟后点击发送',})return false;};if(res.data.code==200){wx.showToast({title: '发送成功',})};}})}}},//form表单提交formSubmit(e){let val = e.detail.value console.log('val', val)var phone = val.phone //电话var phoneCode = val.phoneCode //验证码wx.request({url: 'http://day528.exam9.com/login',data:{phone:phone,phoneCode:phoneCode},success:function(res){if(res.data.code == 500){wx.showToast({title: '验证码错误',icon:"none",})return false;}if(res.data.code == 200){wx.navigateTo({url: '/pages/list/list',})}}})},
})

后台调用第三方接口

  //小程序手机验证码public function getCode(Request $request){//当用户点击手机号时先去缓存中查询，当前时间-缓存时间如果大于60s，允许用户继续获取验证码，否则给出提示//获取手机号$phone=$request->input('phone');//print_r($phone);die();//设置当前时间戳$time=time();if (Cache::has($phone)){// Cache::pull($phone,)if ($time - Cache::get($phone) > 60){//print_r(Cache::get('time'));die();$content="【创信】你的验证码是：5873，3分钟有效！";$res=$this->sendmsg($phone,$content);if ($res) return json_encode(['code'=>200,'data'=>'','msg'=>'发送成功']);return json_encode(['code'=>201,'data'=>'','msg'=>'发送失败']);}else{return ['code'=>500,'data'=>'','msg'=>'一分钟后点击发送'];}}else{$content="【创信】你的验证码是：5873，3分钟有效！";$res=$this->sendmsg($phone,$content);//发送验证码成功后将当前时间存入缓存，以便下次再次点击的时候进行时间的判断Cache::set($phone,time());if ($res) return json_encode(['code'=>200,'data'=>'','msg'=>'发送成功']);return json_encode(['code'=>201,'data'=>'','msg'=>'发送失败']);}}//使用curl函数库发送请求public function curl_request($url, $post = true, $params = [], $https = true){//初始化请求$ch = curl_init($url);//默认是get请求。如果是post请求 设置请求方式和请求参数if ($post) {curl_setopt($ch, CURLOPT_POST, true);curl_setopt($ch, CURLOPT_POSTFIELDS, $params);}//如果是https协议，禁止从服务器验证本地证书if ($https) {curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);}//发送请求，获取返回结果curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);$res = curl_exec($ch);//关闭请求curl_close($ch);return $res;}//使用curl_request函数调用短信接口发送短信public function sendmsg($phone, $content){// 请求地址、appkey$gateway = '你的接口请求地址';$appkey = '你的appkey';// https://way.jd.com/chuangxin/dxjk?mobile=*********&content=【创信】你的验证码是：5873，3分钟内有效！&appkey=您申请的APPKEY$url = $gateway . '?appkey=' . $appkey . "&content=" . $content . "&mobile=" . $phone ;$res = $this->curl_request($url, false, [], true);//处理结果if (!$res) {return '请求发送失败';}//解析结果$arr = json_decode($res, true);if (isset($arr['code']) && $arr['code'] == 10000) {//短信接口调用成功return true;} else {/*if(isset($arr['msg'])){return $arr['msg'];}*/return '短信发送失败';}}

小程序登录

  //小程序登录public function login(Request $request){//接收手机号和验证码$phone=$request->input('phone');$data=['phone'=>$phone];$phoneCode=$request->input('phoneCode');//print_r($phoneCode);die();if (empty($phone)){return ['code'=>500,'data'=>'','msg'=>'手机号不能为空'];}//验证码验证if ($phoneCode != 5873){return ['code'=>501,'data'=>'','msg'=>'验证码有误'];}else{//判断数据表是否有当前手机号$res=\App\Models\Login::where('phone',$phone)->first();if ($res){//如果登录成功将用户信息存入session，然后根据此信息生成tokensession(['user'=>$res]);//然后调用生成token的方法，将生成的token带到小程序当中$jwt=$this->lssue($request);return ['code'=>200,'data'=>$res,'jwt'=>$jwt,'msg'=>'登录成功'];}else{$add=\App\Models\Login::create($data);//如果登录成功将用户信息存入session，然后根据此信息生成tokensession(['user'=>$add]);//然后调用生成token的方法，将生成的token带到小程序当中$jwt=$this->lssue($request);return ['code'=>200,'data'=>$add,'jwt'=>$jwt,'msg'=>'登录成功'];}}}

小程序手机号注册登录相关推荐

微信小程序手机号注册获取验证码+验证判断
微信小程序手机号注册获取验证码+验证判断扫描二维码,进入首页,找到"小程序演示",效果类->手机号码注册效果,点击进入即可.
微信小程序手机号授权登录
文章目录小程序端服务端注意事项微信小程序,手机号授权登录需求. 大体流程是这样的: 小程序端使用 getPhoneNumber 向微信平台获取授权通过微信授权后,小程序端接收微信授权后的回调 ...
微信小程序手机号验证码登录（调阿里云短信接口）
小程序效果代码 <view class='content'><form bindsubmit="formSubmit"><view class='p ...
微信小程序手机号一键登录--获取用户手机号--微信小程序一键登录
前提:现在微信小程序登录我参考了几个大的公司的登录,基本分下面几种 1.微信用户一键登录,授权用户基本信息,不获取手机号 2.微信手机号一键登录,根据手机号去关联在其他平台数据,用手机号关联.然后再调 ...
微信小程序手机号+授权登录
wxml页面 <view class="input-container"><view class="input-button-container row ...
小程序手机号验证码登录
这是我最近的一个项目--微信小程序实现手机号- -验证码登录,涉及到了提交参数时需要加密.加密所采用的方式也是按照要求,严格采用16位小加密的MD5的加密形式. login.wxml <vie ...
微信小程序-手机号验证码登录
wxml: <view class="content_bottom"><form bindsubmit="formSubmit">< ...
小程序手机号注册php,PHP解密小程序手机号码
/** * 检验数据的真实性,并且获取解密后的明文. * @param $encryptedData string 加密的用户数据 * @param $iv string 与用户数据一同返回的初始向量 ...
java注册登录小程序,详解小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容一.首先我是在util.js中引入表单正则验证规则,给予l ...

小程序手机号注册登录

手机号注册页面

js代码块儿

后台调用第三方接口

小程序登录

小程序手机号注册登录相关推荐

最新文章

热门文章