微信小程序---实现手机号发送验证码登录

1.前端页面wxml

<!--pages/logins/logins.wxml-->
<view class="container">
  <view class="title">登录</view>
  <form catchsubmit="login">
    <view class="inputView">
      <input class="inputText" placeholder="请输入手机号" name="phone" bindinput="phone" />
    </view>
    <view class="inputView">
      <input class="inputText" placeholder="请输入验证码" name="code" />
      <button class="line"  size="mini" bindtap="sendcode">{{codebtn}}</button>
    </view>
    <view class="loginBtnView">
      <button class="loginBtn" type="primary" formType="submit">登录</button>
    </view>
  </form>
</view>

2.样式页面 wxss

.container { 
  display: flex;  
  flex-direction: column; 
  padding: 0; 
 } 
 .inputView { 
  line-height: 45px; 
  border-bottom:1px solid #999999;
 } 
.title{
  width: 80%;
  font-weight: bold;
  font-size: 30px;
}
 .inputText { 
  display: inline-block; 
  line-height: 45px; 
  padding-left: 10px; 
  margin-top: 11px;
  color: #cccccc; 
  font-size: 14px;
 } 
 
 .line {
  border: 1px solid #ccc;
  border-radius: 20px; 
  float: right; 
  margin-top: 9px;
  color: #cccccc;
 } 
 .loginBtn { 
  margin-top: 40px; 
  border-radius:10px;
 }
 

3.js页面

// pages/logins/logins.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    phone:'',
    code: '',
    codebtn:'发送验证码',
    disabled:false,
 
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 
  },
  // 获取输入账号 
  phone: function (e) {
    let phone = e.detail.value;
    this.setData({
      phone: e.detail.value
    })
  },
  //发送验证码
  sendcode:function(){
    let that=this;
    let phone =this.data.phone;
    console.log(phone)
    wx.request({
      url: 'http://www.rk.com/code', //仅为示例，并非真实的接口地址
      data: {
         phone
      },
      method:"GET",
     
      success (res) {
        console.log(res.data)
        that.setData({
          code:res.data
        })
      }
    })
  },
 
  // 登录处理
  login: function (evt) {
    // console.log(evt);
    var that = this;
    console.log(this.data.code)
      wx.request({
        url: 'http://www.rk.com/login', // 仅为示例，并非真实的接口地址
        method: 'get',
        data: {
          phone: that.data.phone,
         code:that.data.code
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值
        },
        success(res) {
          console.log(res);
          if (res.data.code == "10000") {
          wx.setStorageSync('token',res.data.data)
            wx.switchTab({
              url: '/pages/my/my',
            })
          } else {
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
    }
    
  
})

4.在控制器里面引入

use app\index\model\Phone;
use think\Cache;
use think\Request;

3.控制器方法 平台账号和密码填自己的（这里使用的是短信宝）

 /**
     * 获取验证码方法
     *  Request $request参数
     * $getphone 手机号 $code 验证码
     */
   public function PhoneCode(Request $request){
//       接收手机号码
       $getPhone=$request->get('phone');
 
//       生成一个随机四位的随机数
       $code=mt_rand(1111,9999);
 
       if(empty($getPhone) || empty($code)){
           return json(['code'=>0,'data'=>'','msg'=>'参数不能为空']);
       }
 
 
       Cache::set($phone,$code,5000);
 
       $statusStr = array(
           "0" => "短信发送成功",
           "-1" => "参数不全",
           "-2" => "服务器空间不支持,请确认支持curl或者fsocket，联系您的空间商解决或者更换空间！",
           "30" => "密码错误",
           "40" => "账号不存在",
           "41" => "余额不足",
           "42" => "帐户已过期",
           "43" => "IP地址限制",
           "50" => "内容含有敏感词"
       );
       $smsapi = "http://api.smsbao.com/";
       $user = ""; //短信平台帐号
       $pass = md5(""); //短信平台密码
       $content="短信内容".$code;//要发送的短信内容
       $phone = $getPhone;//要发送短信的手机号码
       $sendurl = $smsapi."sms?u=".$user."&p=".$pass."&m=".$phone."&c=".urlencode($content);
       $result =file_get_contents($sendurl) ;
//       echo $statusStr[$result];
       return json($code);
   }
 
    /**
     * 登录方法
     * 参数 Request $request
     */
 
  //手机验证码验证登录
    public function Login(Request $request)
    {
        $phone = $request->get('phone');
        $code = $request->get('code');

//       取出缓存内的验证码
        $oldCode = Cache::get($phone);
        if ($code != $oldCode) {
            return json(['code' => 10001, 'data' => $oldCode, 'msg' => '验证码不正确']);
        } else {
            $res = Db::table('tel')->where('phone', $phone)->find();
            if (empty($res)) {
                return json(['code' => 10002, 'data' => '', 'msg' => '账号不存在']);
            } else {

                return json(['code' => 10000, 'data' => $oldCode, 'msg' => '登录成功']);
            }
        }
    }