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.jsPage({/*** 页面的初始数据*/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: '/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: '/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 = "/";$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' => '登录成功']);}}}
