微信小程序手机号验证码登录流程

首先写一个按钮

<navigator url="/pages/login/login">
        <button>快捷登录</button>
      </navigator>

前端用的ui

 

<l-form name="student" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit">
    <l-form-item label="手机号" name="phone">
        <l-input id="phone" bind:lininput="phone" value="{{phone}}" hide-label show-row="{{false}}"/>
    </l-form-item>

    <l-form-item label="验证码:" name="code">
        <l-input id="code" value="{{code}}" hide-label show-row="{{false}}"/>
        <l-button bind:lintap="code">获取验证码</l-button>
    </l-form-item>


    <view slot="submit">
        <l-button>提交</l-button>
    </view>
    <view slot="reset">
        <l-button type="default" plain>重置</l-button>
    </view>
</l-form>

js中，这里有封装的request

const http=require('../../utils/http')
data: {
                phone:''
        },

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
                wx.lin.initValidateForm(this)
        },
        phone(e){
                console.log(e);
                this.setData({
                        phone:e.detail.value
                })
        },
        code(e){
                http.request('code',{phone:this.data.phone}).then(res=>{
                        console.log(res);
                })
        },
        submit(e){
                const {detail} = e;
                console.log(e);
                http.request('wxlogin',{
                        phone:this.data.phone,
                        code:e.detail.values.code
                }).then(res=>{
                        console.log(res);
                        wx.showToast({
                          title: res.data.msg,
                          icon:'none',
                          duration:2000
                        })
                        if(res.data.error_code==0){
                                wx.switchTab({
                                  url: '/pages/user/user',
                                })
                        }
                })
        },

后台接口呢 博主并没有用第三方发验证码 有需求可以自己加

public function code(Request $request)
    {
        $code=rand(1000,9999);
        $phone=$request['phone'];
        Cache::set($phone,$code);
        return json(['error_code'=>0,'code'=>$code,'msg'=>'获取成功']);
    }

    public function wxlogin(Request $request)
    {
        $phone=$request['phone'];
        $code=Cache::get($phone);
        if ($code==$request['code']){
            $result=User::login($phone);
            if ($result){
                return json(['error_code'=>0,'data'=>'','msg'=>'登录成功']);
            }
            return json(['error_code'=>1110,'data'=>'','msg'=>'账户不存']);
        }
        return json(['error_code'=>11101,'data'=>'','msg'=>'验证码错误']);
    }

model中：

public static function login($phone)
    {
        $data=self::where('phone',$phone)->find();
        return $data;
    }

 完成