微信小程序实现手机号登录

本文实例为大家分享了微信小程序实现手机号登录的具体代码,供大家参考,具体内容如下

1.wxml

<form bindsubmit="formsubmit">
  <view>手机号<input type="text" placeholder="请输入手机号" bindinput="getphone" name="phone"/></view>
  <view>
    验证码<input type="text" placeholder="请输入验证码" name="code"/>
    <button disabled="{{disabled}}" bindtap="click">{{message}}</button>
  </view>
  <button form-type="submit">登录</button>
</form>

2.js(正则验证、倒计时、验证码)

/**
   * 页面的初始数据
   */
  data: {
    phone:'',
    message:"获取验证码",
    disabled:false
  },
  getphone:function(e){
    this.setData({
      phone:e.detail.value
    })
  },
  click(){
    var that = this
    let phone = this.data.phone;
    console.log(phone)
    if(!(/^(13|15|17|18|19)\d{9}$/.test(phone))){
      wx.showToast({
        title: '手机号不正确',
        icon:'none'
      })
    }
    if((/^(13|15|17|18|19)\d{9}$/.test(phone))){
      //定时任务
      var souse = 30
      var timer = setInterval(function(){
        that.setData({
          message:souse + "秒后重试",
          disabled:true
        })
        souse --
        if(souse == 0){
          that.setData({
            message:"发送验证码",
            disabled:false
          })
          clearInterval(timer)
        }
      },1000)
      wx.request({
        url: 'http://www.wenk.com/index.php/admin/sendCode', //仅为示例,并非真实的接口地址
        data: {
          phone
        },
        success (res) {
          console.log(res)
        }
      })
    }
  },

3.提交表单

formsubmit(e){
    console.log(e)
    let phone = e.detail.value.phone
    let code = e.detail.value.code
      wx.request({
        url: 'http://www.wenk.com/admin/login', //仅为示例,并非真实的接口地址
        method:'post',
        data: {
          code,
          phone
        },
        success (res) {
          let id = res.data.data.id
          wx.setStorageSync('id',id)
          wx.navigateTo({
            url: '/pages/list/list',
          })
        }
      })
  },

4.验证码API接口

public function sendCode()
    {
        $phone = input('phone');
 
        //限制用户30秒内只能发送一次
        $send_time = Cache::get('time_key');
        //判断是否发送过
        if (time() - $send_time < 30){
            return json(['code' => 500,'msg'=> '30秒内只能发送一次','data' => []]);
        }
        if (empty($send_time)){
            $time = time();
            Cache::set('time_key',$time,30);
        }
 
        //调用验证码接口
        $res = Cond::sendCode($phone);//封装的逻辑层
        if (!$res){
            return json(['code' => 200,'msg' => '发送成功','data' => $res]);
        }
    }

5.登录API接口

public function login()
    {
        $data = input();
        $user = (new \app\admin\model\Login())->where('phone',$data['phone'])->find();
        if ($user == null){
            //如果第一次登录,这里则改为添加入库
            return json(['code' => 2001,'msg' => '账号不存在','data' => []]);
        }
        $code = Cache::get('code');
        if ($code != $data['code']){
            return json(['code' => 2001,'msg' => '验证码错误','data' => []]);
        }
//        $id = $user['id'];
//        $token =  Jwt::jwt();
        return json(['code' => 200,'msg' => '登陆成功','data' => $user]);
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序手机号验证码登录的项目实现

    本文主要介绍了小程序手机号验证码登录,具体如下: wxml: <view class="content_bottom"> <form bindsubmit="formSubmit"> <view class="field"> <label for="phone">手机号</label> <input class="int" name=&quo

  • 微信小程序获取手机号授权用户登录功能

    小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <span style="font-size:14px;"><button open-type="get

  • 微信小程序实现手机验证码登录

    我们的微信小程序里面,手机验证码登录已经成为不可缺少的一部门,为此,我写的这个手机验证码登录,这里我结合thinkphp6+微信小程序实现 首先我们进入小程序页面: wxml页面: <!--pages/phone/phone.wxml--> <view class="container">   <view class="title"  style='height:{{statusBarHeight+100}}rpx;padding-to

  • 微信小程序实现手机号登录

    本文实例为大家分享了微信小程序实现手机号登录的具体代码,供大家参考,具体内容如下 1.wxml <form bindsubmit="formsubmit">   <view>手机号<input type="text" placeholder="请输入手机号" bindinput="getphone" name="phone"/></view>   <vi

  • 微信小程序获取手机号,后端JAVA解密流程代码

    小程序获取手机号,后端JAVA解密流程代码 微信官方文档获取手机号流程地址,先看下最好方便理解下面步骤 实现思路,步骤如下 1.前端需先调用官方wx.login接口获取登录凭证code. 2.后端接收code 调用官方接口地址获取用户秘钥 sessionKey. 3.前端通过官方getPhoneNumber获取encryptedData,iv 4.前端通过参数**[encryptedData] .[iv] .[sessionKey]** 发送请求后端接口,解密用户手机号 小程序获取session

  • 微信小程序获取手机号的踩坑记录

    前言 最近在开发小程序遇到这样一个问题, 在用户点击授权后去解密手机号时会出现第一次失败,第二次成功的情况.研究了一段时间,终于找到比较合理的解决方案,在此记录并总结一下,希望可以帮助到大家. 需求描述 在用户点击获取电话按钮后, 将用户在微信内设置的电话解密显示在联系电话输入框内 具体代码 <view class="cu-form-group"> <view class="title text-black">联系电话</view>

  • 微信小程序判断手机号是否合法的实例代码

    目录 场景 效果 代码 总结 场景 在注册页面输入手机号,在请求注册接口前先行判别输入的手机号码是否合法: 效果 代码 导入 vant-weapp 组件:user-register.json { "usingComponents": { "van-cell-group": "@vant/weapp/cell-group/index", "van-field": "@vant/weapp/field/index&quo

  • 微信小程序自定义用户登录弹窗

    本文实例为大家分享了微信小程序自定义用户登录弹窗的具体代码,供大家参考,具体内容如下 view <button   class="btn" bindtap="powerDrawer" data-statu="open">立即进入</button> <!--mask:弹出框--> <view class="drawer_screen" bindtap="powerDrawer&

  • uniapp+.net core实现微信小程序获取手机号功能

    目录 获取手机号 注意: 使用方法 前端 template js 后端 appsetting配置 Startup.cs GlobalContext.cs 调用 获取截图 获取手机号 从基础库 2.21.2 开始,对获取手机号的接口进行了安全升级,以下是新版本接口使用指南.( 旧版本接口 目前可以继续使用,但建议开发者使用新版本接口,以增强小程序安全性) 因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 button 组件的点击来触发.另外,新版本接口 不再 需要提

  • 微信小程序开发一键登录 获取session_key和openid实例

    微信小程序开发一键登录 获取session_key和openid实例 思来想去不愿自己的微信小程序是个单机版本.自己又不会写后台.现在借助leancloud可以实现微信小程序一键登录功能.尝试后,做笔记. 第一步:下载av-weapp.js,放到utils下. 第二步:使用 const AV = require('../../utils/av-weapp.js');路径根据具体情况而定. 第三步:做初始化. AV.init({ appId: 'EJx0NSfY********-gzGzoHsz'

  • 微信小程序绑定手机号获取验证码功能

    微信小程序验证码获取方式,代码如下所示: <!-- 绑定手机号 --> <view class='content'> <form bindsubmit="formSubmit"> <view class='phone-box'> <text class='phone'>手机号</text> <input name="phone" type='number' placeholder=&quo

  • 微信小程序实现注册登录功能(表单校验、错误提示)

    口说无凭,实现效果如下 前端 部分 注册功能 1.wxml文件 <view> <view class="frm"> <view class="ui-row ui-row-border-top ui-row-border-bottom" style="margin-bottom: 20px;height:40px;"> <view class="ui-col ui-col-border-right

随机推荐