打开微信，点开任何一个需要登录的小程序，你看到的那个输入手机号、点发送验证码、再点登录的页面，就是今天我们要攻克的目标。很多朋友一听“开发”两个字就头皮发麻，觉得那是程序员才敢碰的东西。其实真不是，微信小程序登录界面，是你能接触到的所有开发任务里，最友好、最讲道理、最容易出成果的那一类。它不需要你懂什么高深的算法，也不需要你背一堆英文单词，只要你会用微信，能看懂中文，跟着我的思路走一遍，你就能亲手做出一个能用的登录界面来。

先别急着打开电脑，我们先把逻辑理顺。登录界面说白了就干三件事：收集手机号、验证这个号码是你的、然后让小程序认下你这个身份。听起来简单，但里面有个特别关键的细节，就是你得理解“验证码”这个东西是怎么跑完一圈的。你在输入框里填了手机号，点发送验证码，这时候你的手机号会被送到微信的服务器，微信往你这个号码发一条短信，同时把验证码存起来。等你把收到的数字输进去，点登录，小程序就拿你输的数字跟它存的那个比对，对上了，就放你进去。

这个流程里，你作为新手，最需要弄明白的是：所有复杂操作都在微信那边完成，你要写的代码，只是把用户的手机号送出去，再把用户的验证码送出去，接收一个“对了”或者“不对”的结果。所以你看，零基础学这个，不是让你从零开始造轮子，而是让你学会怎么用微信已经给你准备好的工具。

现在打开微信开发者工具，新建一个项目，选“小程序”那个选项，名字随便起，比如“我的第一个登录页”。建好之后，你会看到左边是模拟器，右边是代码区，底下还有个调试器。别被这些密密麻麻的界面吓到，你只需要动三个文件：index.wxml、index.wxss、index.js。wxml是管页面长什么样的，相当于房子的墙和窗户；wxss是管颜色和排版的，相当于装修；js是管逻辑的，相当于住在房子里的人怎么活动。

先来搭页面结构。在index.wxml里，把默认的内容全删掉，写上一个输入框、一个按钮、再加一个提示文字的区域。输入框用input标签，给它一个placeholder属性，写上“请输入手机号”，这样用户一看就知道该往哪儿填什么。下面再放一个input，这次把type改成“number”，让弹出的键盘是数字键盘，用户输验证码的时候会顺手很多。按钮用button标签，里面写上“获取验证码”。放一个view，用来显示“登录成功”或者“验证码错误”这样的提示信息。

结构搭好了，接下来是化妆。在index.wxss里给输入框加点圆角边框，给按钮加个背景色。这里有个小技巧，你可以在调试器里实时改颜色，左边模拟器马上就能看到效果，跟给照片加滤镜一样直观。我建议你把按钮做成绿色，因为微信里大多数登录按钮都是绿色的，用户看到绿色就知道能点。输入框的背景用浅灰，跟白色页面区分开，但别用太深的颜色，不然显得压抑。字体大小调到16px以上，手机上看起来不费劲。

页面看着像样了，就该写逻辑了。打开index.js，删掉默认的Page里的内容，重新写。先定义一个data，里面放一个变量，比如叫loginStatus，默认值是空字符串。然后写两个函数，一个叫sendCode，负责处理“获取验证码”的点击，另一个叫doLogin，负责处理“登录”按钮的点击。sendCode里要做的事很简单：从页面上拿到用户填的手机号，检查一下是不是11位数字，是的话就弹个提示说“验证码已发送”，不是就提示“手机号格式不对”。

这时候你可能要问了，真验证码呢？别急，真验证码需要你注册微信开放平台账号，去申请短信服务，那个流程得提交营业执照什么的，不是咱们今天零基础该碰的东西。咱们先用假验证码把整个流程跑通。怎么造假？在sendCode里，你生成一个四位随机数，存到data里，然后用console.log把它打印出来。在模拟器里，你能在调试器的Console面板看到这个数字，你就假装自己是用户，把这个数字输进去。这就是传说中的“前端模拟”，是学习阶段最常用的招数。

doLogin这个函数，就是把用户输的验证码跟你存的随机数比对。相等，就把loginStatus改成“登录成功，欢迎回来”，不相等，就改成“验证码不对，再试试”。然后你在wxml里，用双大括号把这个loginStatus变量包起来，放在提示区域里。这样每次你点登录，页面上的文字就会跟着变。跑通这个流程，你就算真正理解了“数据绑定”和“事件处理”这两个核心概念，这两个词听起来唬人，其实就是“变量变了页面跟着变”和“点按钮触发一段代码”。

到这里，一个能玩的登录界面就做好了。但离“能上线用”还差一步，就是对接真验证码。这一步我不建议你一开始就搞，先把这个模拟版本玩熟了，把每个函数、每个变量的作用都摸透了，再考虑去研究wx.request这个接口。那个接口也不难，就是把你模拟版本里的随机数生成，换成向你的服务器发一个请求，让服务器去调短信平台，再把结果返回来。本质上跟咱们刚才做的事一模一样，只是把“假随机数”换成了“真验证码”而已。

我见过太多人，一上来就照着网上的完整项目代码复制粘贴，结果页面出来了，但问他为什么这么写，答不上来。这不行。咱们零基础起步，要的不是抄作业，是懂原理。你今天跟着我搭的这个登录界面，虽然简陋，但五脏俱全，你亲手敲的每一行代码，都知道它是干嘛的，这就比那些复制粘贴的高级多了。下次你再看到任何一个小程序的登录页，都能看出它背后大概是怎么运作的，这就是进步。

说句掏心窝的话，微信小程序登录界面这东西，是你学开发路上最简单的一道开胃菜。它难不住你，但能帮你建立起“我能行”的信心。等你把这个流程跑通了，你会发现，原来代码没那么神秘，逻辑也没那么难懂。手机号输入框、验证码按钮、登录逻辑，这三样东西你学会了，以后不管遇到什么界面的开发，你都有个底子在那儿撑着。所以别犹豫了，打开开发者工具，照着我说的一步步来，亲手敲出你的第一个登录页面。等你看到模拟器里跳出“登录成功”那四个字的时候，你就知道，这事儿，还真让咱给弄成了。