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

index.wxml

<!--pages/index1/index1.wxml-->
<!-- 绑定手机号 -->
<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>

index.js

// pages/index1/index1.js
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;
    let huoLove = this.data.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: 'success',
        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);
          console.log(phone)
          wx.request({
            url: 'http://www.tp1.com/index.php/admin/save',
            data:{phone:phone},
            success(res){
              console.log(res)
            }
          })
        //获取验证码接口写在这里
        //例子 并非真实接口
        // app.agriknow.sendMsg(phone).then(res => {
        //   console.log('请求获取验证码.res =>', res)
        // }).catch(err => {
        //   console.log(err)
        // })
      }
    }
  },
  //form表单提交
  formSubmit(e){
    let val = e.detail.value 
    // console.log('val', val)
    var phone = val.phone //电话
    var phoneCode = val.phoneCode //验证码
    var openid = wx.getStorageSync('openid')
    console.log(openid)

    wx.request({
      url: 'http://www.tp1.com/index.php/admin/index',
      data:{phone:phone,code:phoneCode,openid:openid},
      success(res){
        console.log(res)
        if(res){
          wx.navigateTo({
            url: '/pages/index2/index2',
          })
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (res) {
wx.login({
  success (res) {
    console.log(res.code)
    if (res.code) {
      wx.request({
        url: 'http://www.tp1.com/index.php/admin/create',
        data:{code:res.code},
        header:{
        //从缓存中获取token
          'token': wx.getStorageSync('token')
        },
        success(res){
          console.log(res.data.data.openid)
          //把openid与token放入缓存中
          wx.setStorageSync('openid', res.data.data.openid)
          wx.setStorageSync('token', res.data.data.token)
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})
  },
})

index.wxss

/* pages/index1/index1.wxss */
.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;
}

获取openid

composer update

 Composer 安装Guzzle，Composer是PHP的依赖管理工具，进行更新composer就可以了

public function create()
    {
        $code = input('code');//前台传过来的
        $AppID = '';//微信公众平台获取
        $AppSecret = '';
        $url = 'https://api.weixin.qq.com/sns/jscode2session?appid=%s&secret=%s&js_code=%s&grant_type=authorization_code';
        $url = sprintf($url,$AppID,$AppSecret,$code);//sprinty()把百分号（%）符号替换成一个作为参数进行传递的变量：
        $client = new Client(['timeout' => 5,'verify' => false]);//guzzle
        $response = $client->get($url);
        $json = json_decode((string)$response->getBody(),true);
//        $json['token'] = $this->signToken($json['openid']);//调用自己本类中的方法
        return json(['data'=>$json,'msg'=>'','code'=>0]);
    }

发送短信使用容联

后台方法

public function save(Request $request)
    {
        $to = input('phone');//填写手机号
        $datas = [rand(100,999)];
        session('datas',$datas);
        return json(['data'=>$datas,'msg'=>'','code'=>0]);
        $tempId = 1;
        //主帐号登陆云通讯网站后，可在控制台首页看到开发者主账号ACCOUNT SID。
        $accountSid = '';
        //主帐号Token登陆云通讯网站后，可在控制台首页看到开发者主账号AUTH
        $accountToken = '';
        //应用Id
        $appId = '';
        //请求地址，格式如下，不需要写https://
        $serverIP = 'app.cloopen.com';
        //请求端口
        $serverPort = '8883';
        //REST版本号
        $softVersion = '2013-12-26';
        // 初始化REST SDK
        $rest = new \REST($serverIP, $serverPort, $softVersion);
        $rest->setAccount($accountSid, $accountToken);
        $rest->setAppId($appId);
        // 发送模板短信
        echo "Sending TemplateSMS to $to <br/>";
        $result = $rest->sendTemplateSMS($to, $datas, $tempId);
        if ($result == NULL) {
            $data= "result error!";
            print_r($data);
        }
        if ($result->statusCode != 0) {
            echo "error code :" . $result->statusCode . "<br>";
            echo "error msg :" . $result->statusMsg . "<br>";
            //TODO 添加错误处理逻辑
        } else {
            echo "Sendind TemplateSMS success!<br/>";
            // 获取返回信息
            $smsmessage = $result->TemplateSMS;

            echo "dateCreated:" . $smsmessage->dateCreated . "<br/>";
            echo "smsMessageSid:" . $smsmessage->smsMessageSid . "<br/>";
            //TODO 添加成功处理逻辑
        }
    }

进行登录

 public function index()
    {
        $data = input();
        $code = session('datas');
        if ($data['code'] != $code){
            $res = \app\admin\model\login::where('name',$data['phone'])->select()->toArray();
            if ($res[0]['openid'] == ''){
                $re = \app\admin\model\login::where('name',$data['phone'])->update(['openid'=>$data['openid']]);
                if ($re){
                    return json(['data'=>$re,'msg'=>'登录成功','code'=>0]);
                }
            }else{
                return json(['data'=>$res,'msg'=>'没有','code'=>0]);
            }
        }else{
            return json(['data'=>'','msg'=>'验证码错误','code'=>2]);
        }
    }