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.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' => '登录成功']);             }         }     }

前言 花了3个月，一共输出 40 篇文章，这也算是一个阶段性的总结。在此做个文章分类集合，希望对大家有所帮助。 小程序前端 《专治按钮效果不明显（扩散动画效果）》 《小程序开发必备，这 5 款超实用开源插件！》 《仿抽奖助手奖品详情页面向上翻页效果》 《推荐 5 款高仿知名应用的开源项目！》 《生成海报很复杂？有它轻松搞定！》 《推荐一个自定义导航栏开源库》 《前端开发，必备的学习网站！》 《情侣券-领取动画分析》 《通过玩游戏来学习CSS》 《CSS不规范导致的布局显示问题》 《微信小程序如何引入npm包？》 《情侣券-选中卡片翻转动画》 《CSS：实现卡片洗牌效果》 《情侣券 v2.0 使用的 4 款开源组件》 小程序云开发 《使用聚合函数实现打卡排行榜》 《使用云开发做内容安全检查》 《云开发-实现分页功能》 《云开发-实现维护用户表》 《云开发-实现模糊搜索》 《云开发实战：实现订阅消息推送》 《如何优雅的调用云函数？》 《云开发实战-如何维护用户表？（优化版）》 《推荐 10 款使用云开发的开源项目》 《云开发：CloudBase CMS 实战使用指南》 小程序产品 《如何利用小程序提高10倍活动效果？》 《实战：让数据说话之自定义埋点分析》 《#小程序云开发挑战赛#-情侣券》 《小程序运营必备的 3 款官方小程序》 《小程序云开发挑战赛：情侣券 v1.1 版本迭代》 《云开发挑战赛复赛：情侣券介绍PPT》 《参加#小程序云开发挑战赛#复赛收获》 《云开发挑战赛决赛：情侣券介绍PPT》 通用知识 《如何重构？》 《如何高效学习？》 《如何看懂时序图？》 《为什么优秀的程序员都写博客？》 《我从 Android 转到 微信小程序 的思考》 最后 后续计划会写更多云开发相关的文章以及小程序基础系列学习文章。