微信小程序

2023-10-28 08:38| 来源: 网络整理| 查看: 265

1.前端页面wxml

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;

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

/** * 获取验证码方法 * 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' => '登录成功']); } } }

【本文地址】

微信小程序

微信小程序

今日新闻

推荐新闻