微信小程序手机号登录页面
账号密码页面手机号登录账号密码页面
<!--pages/login/login.wxml--><view class="container"><view class="login-from"><form method="post" catchsubmit="formSubmit"><!--账号--><view class="inputView"><label class="loginLab">账号</label><input class="inputText" name="username" value="admin" placeholder="请输入账号" /></view><view class="line"></view><!--密码--><view class="inputView"><label class="loginLab">密码</label><input class="inputText" password="true" name="password" value="admin" placeholder="请输入密码" /></view><!--按钮--><view class="loginBtnView"><button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"disabled="{{disabled}}" form-type="submit">登录</button></view></form></view></view>
/* pages/login/login.wxss */page{height: 100%; } .container {height: 100%; display: flex; flex-direction: column; padding: 0; box-sizing: border-box; /* background-color: rgb(156, 23, 78) */} /*登录图片*/.login-icon{flex: none; } .login-img{width: 750rpx;height: 400rpx;} /*表单内容*/.login-from {margin-top: 20px; flex: auto; height:100%; } .inputView {/* background-color: #fff; */line-height: 45px; border-radius:20px;border:1px solid #999999;} /*输入框*/.nameImage, .keyImage {margin-left: 22px; width: 18px; height: 16px} .loginLab {margin: 15px 15px 15px 10px; color: #545454; font-size: 14px} .inputText {flex: block; float: right; text-align: right; margin-right: 22px; margin-top: 11px;color: #cccccc; font-size: 14px} .line {margin-top: 8px; } /* .line { width: 100%; height: 1px; background-color: #cccccc; margin-top: 1px; } *//*按钮*/.loginBtnView {width: 100%; height: auto; /* background-color:#DCDCDC; */margin-top: 0px; margin-bottom: 0px; padding-bottom: 0px; } .loginBtn {width: 90%; margin-top: 40px; border-radius:10px;}
手机号登录
<!--pages/logins/logins.wxml--><view class="container"><view class="title">登录</view><form catchsubmit="login"><view class="inputView"><input class="inputText" placeholder="请输入手机号" name="phone" bindblur="phone" /></view><view class="inputView"><input class="inputText" placeholder="请输入验证码" name="code" /><button class="line" disabled="{{disabled}}" size="mini" bindtap="sendcode">{{codebtn}}</button></view><view class="loginBtnView"><button class="loginBtn" type="primary" formType="submit">登录</button></view></form></view>
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;}
这里是 js 实际逻辑
// pages/logins/logins.jsPage({/*** 页面的初始数据*/data: {phone:'',code: '',codebtn:'发送验证码',disabled:false,},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},// 获取输入账号 phone: function (e) {let phone = e.detail.value;let reg = /^[1][3,4,5,7,8][0-9]{9}$/;if (!reg.test(phone)) {wx.showToast({title: '手机号码格式不正确',icon:"none",duration:2000})return false;}this.setData({phone: e.detail.value})},//发送验证码sendcode(){let that =this;let phone =this.data.phone;wx.request({url: '/lx/login/phonecode',data:{phone},dataType:'json',success:({data})=>{console.log(data);if(data.code==200){wx.showToast({title: '验证码已发送.请注意接收',icon:"success"}) let time = 60;var timers=setInterval(function () {time--;if (time>0){that.setData({codebtn:time,disabled:true});}else{that.setData({codebtn:'发送验证码',disabled:false});clearInterval(timers)}},1000)}else{wx.showToast({title: data.msg,icon:"none",duration:2000})}}})},// 登录处理login: function (evt) {// console.log(evt);var that = this;let val = evt.detail.value;if (val.phone=="" ){wx.showToast({title: '请填写手机号码',icon: 'none',duration: 2000})return false;}if (val.code=="" || isNaN(val.code) || val.code.length !=4 ){wx.showToast({title: '验证码格式不正确',icon: 'none',duration: 2000})return false;} else {wx.request({url: '/lx/login/phone', // 仅为示例，并非真实的接口地址method: 'post',data: {username: that.data.username,password: that.data.password},header: {'content-type': 'application/x-www-form-urlencoded' // 默认值},success(res) {console.log(res);if (res.data.code == "200") {wx.switchTab({url: '/pages/list/list',})} else {wx.showToast({title: res.data.msg,icon: 'none',duration: 2000})}}})}}})
效果图
PHP 短信发送
if (!function_exists('phone_code')) {function phone_code($phone){$phone = input('phone') ?? '';if (!preg_match('/^1[3-9]\d{9}$/', $phone)) return ['code'=>1001,'msg'=>'手机号不符合规则','data'=>''] ;//判断 是否重复发送$last_time = \cache('week_time_' . $phone);if ((time() - $last_time) < 60) return ['code'=>1001,'msg'=>'验证码获取太过频繁，请一分钟后再试','data'=>''];//调用 函数 发送 随机验证码$number = rand(1111, 9999);$content = "【品优购】你的验证码是：{$number}，3分钟内有效！";//调用 公共方法$result = sendmsg($phone, $content);if ( $result && $result['code'] == 200 ) {//记录住验证码内容cache("week_" . $phone, $number, 60);//记录发送验证码的时间cache("week_time_" . $phone, time());return ['code'=>200,'msg'=>$result['msg'],'data'=>''];} else {return ['code'=>1001,'msg'=>$result['msg'],'data'=>''];}}}if (!function_exists('sendmsg')) {//使用curl_request函数调用短信接口发送短信function sendmsg($phone, $number = '',$content = ''){//从配置中取出请求地址、appkey$gateway = config('phone.gateway');$appkey = config('phone.appkey');///chuangxin/dxjk?mobile=13568813957&content=【创信】你的验证码是：5873，3分钟内有效！&appkey=您申请的APPKEY$url = $gateway . '?appkey=' . $appkey;if ($content && $number = ''){$url .= '&mobile=' . $phone . '&content=' . $content;//get//$res = curl_request($url, false, [], true);//post请求$params = ['mobile' => $phone,'content' => $content];}else{$content = $content = "【品优购】你的验证码是：{$number}，3分钟内有效！";$url .= '&mobile=' . $phone . '&content=' . $content;//get//$res = curl_request($url, false, [], true);//post请求$params = ['mobile' => $phone,'content' => $content];}$res = curl_request($url, true, $params, true);//处理结果if (!$res) {return ['code'=>1001,'msg'=>'请求发送失败','data'=>''];}//解析结果$arr = json_decode($res, true);if (isset($arr['code']) && $arr['code'] == 10000) {//短信接口调用成功return ['code'=>200,'msg'=>'验证码发送成功','data'=>''];} else {return ['code'=>1001,'msg'=>'验证码发送失败','data'=>''];}}
控制器
public function test(){$phone = input('phone') ?? '';//$res = phone_code($phone); //$number = rand(000,9999);$res = sendmsg($phone,$number ,'');if ( $res['code'] == 200) return json(['code'=>200,'msg'=>$res['msg'],'data'=>$res]);return json(['code'=>1001,'msg'=>$res['msg'],'data'=>'']);}public function plogin(Request $request){$params = input();$validate = Validate::rule(['phone'=> 'require|mobile','code' => 'require|length:4']);cache('week_'.$params['phone'],'1234',300);if (!$validate->check($params)) return json(['code'=>1001,'msg'=>$validate->getError(),'data'=>'']);$old_code = cache('week_'.$params['phone']) ?? '';cache('week_'.$params['phone'],'');halt($old_code);if ($old_code != $params['code']) return json(['code'=>1001,'msg'=>'验证码错误','data'=>'']);$model = \app\model\User::where('phone',$params['phone'])->find();if (!$model) return json(['code'=>1001,'msg'=>'用户不存在 请先注册','data'=>'']);return json(['code'=>200,'msg'=>'登录成功','data'=>'']);}
