停顿了好些天没有继续实战教程了，主要是因为公司iOS项目太多了，每天忙的不可开交，所以，博客就写的少了，闲暇时间还是抽出来时间继续实战，一来分享学习过程，二来也算是巩固技能，三来也是让大家多熟悉页面不同布局的实现。
我们前几节已经实现了通过手机号加密码的方式、微信授权的方式进行登录的相关的逻辑，现在我们来实现另一种登录方式：手机号加验证码登录。
在登录页面，我们再增加一个按钮，点击后跳转到手机号和验证码的登录页面。为了使用页面好看，不过于臃肿，我们将以密码登录的方式暂时屏蔽掉，只保留微信授权登录及手机号验证码登录。
增加使用短信验证码登录的入口：
login.wxss中增加样式：v-code-button-view
login.js文件中增加相应的点击事件 ：lgoinWithVerCodeAction，点击时跳转到相应的页面
运行项目，可以看到登录页面已经变为以下：
现在我们新建一个页面，在login文件夹上右键，依次选择“新建Page”,
输入：loginWithMobile，回车，这样就自动生成了一组共4个文件，如下：
现在我们来实现对应的页面：
1、在loginWithMobile.wxss文件中增加以下样式定义：同学们直接复制粘贴,因为CSDN这个富文件编辑器真的太烂了，没办法保留原格式，粘贴进去后，同学们自行分析了解样式的定义。
.view-base { position: fixed; width: 100%; height: 100%; background-color: white; }
.main-view { position: fixed; width: 100%; background-color: white; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.input-view { position: relative; top: 24rpx; left: 24rpx; width: calc(100% - 24rpx); height: 100rpx; border-bottom: 1rpx solid rgb(239, 240, 245); }
.input-item-view { position: relative; width: 100%; height: 100rpx; text-align: left; font-size: 32rpx; color: black; }
.v-ver-view { position: relative; top: 24rpx; left: 24rpx; width: calc(100% - 24rpx); height: 100rpx; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; border-bottom: 1rpx solid rgb(239, 240, 245); }
.v-input-item { position: relative; width: calc(100% - 176rpx - 24rpx - 10rpx); height: 100rpx; text-align: left; font-size: 32rpx; color: black; }
.v-input-btn { position: relative; right: 24rpx; width: 176rpx; height: 64rpx; padding: 0; background-color: white; border: 1rpx solid rgb(120, 120, 120); border-radius: 32rpx; font-size: 26rpx; } .v-button-view { position: relative; top: 160rpx; width: calc(100% - 80rpx); height: 90rpx; background-color: rgb(22, 177, 239); color: white; font-size: 36rpx; }
2、loginWithMobile.wxml在视图文件中实现以下页面：
3、loginWithMobile.js逻辑文件中实现以下几个方法及变量定义：
回到login.js文件中，增加跳转页面的逻辑：
运行项目，不出意外，你将看到以下最终的页面展示结果：
当点击获取验证码按钮时，我们对于用户输入的手机号进行了验证，其一不能为空，其二，是否为有效的手机号格式。
当然眼下，我们是简单的实战教程，目前我们并没有引进相应的验证过滤器，比如手机号的验证、是否为纯数字的验证、是否有效的邮箱的验证等等，故而，为了项目的正常运行，需要将上图的红框内条件注释掉，后期我们学习了解了足够的知识技能后，我们再添加相应的文件及放开此处逻辑。
现在我们需要实现倒讲时功能，即获取验证码后，按钮应该是60s、59s、58s、……这样倒计时，直到0s时才可以重新获取新的验证码。在如下所示的文件中定义一个变量，用于支撑我们的业务逻辑。
修改我们的视图文件，标题不再是写死的标题，而是根据业务逻辑动态变化的标题：
因为我们要每隔一秒就要将计数器减1，所以，我们必须使用一个定时器，setInterval或者setTimeOut,两个JS方法均可以实现每隔一段时间执行，但是setTimeOut只能执行一次后将不再执行，而setInterval再执行完一次后可以继续执行，所以，为了逻辑的简单化，我们直接使用setInterval，当计时器等于0时，即执行了60次以后，释放定时器，不要让它继续执行的同时还原按钮的标题为：获取验证码。
整个业务逻辑如下：
我们输入手机号码，再点击获取验证码，看看效果：
至此，本教程就简单的结事，后续的逻辑及业务，同学们自己可以深挖以精进自己的技能。
1、如何修改本页面的标题weChat为手机验证码登录
2、成功获取到验证码后，向用户提示：请注意查收短信
等这些都是小的细节的功能点，同学们可以自行调阅资料来填补自己的经验及技能哦。