uni-app开发初体验2（day3）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

在上一篇文章中，我们完成了手机号的输入以及判断页面和功能，并且让他可以跳转到验证码获取的页面，接下来我们就要完成验证码获取的页面。

1. 首先，我们输入了一个合格的手机号，然后跳转到验证码页面，验证码页面的具体内容如下：

布局和手机号码输入页面差不多，就是多了一个倒计时，这个我们用延时器就可以实现。

2. 我们先实现基础页面的布局，第一排一个view容器，一个input输入框，一个button按钮，第二排一个绑定了跳转功能的“下一步”view容器。具体的代码如下所示：

<view class="login-user">
            <text class="user-text">验证码</text>
            <input type="text" placeholder="请输入验证码" v-model="userCode"></input>
            <button plain="true" size="mini" :disabled="disabled" style="width: 350rpx;" @tap="sendCode">{{codeMsg}}</button>
          </view>

input输入框使用了v-model来双向绑定输入的数据，button按钮里面的数据是data中具体定义的，用来写倒计时需要用到，然后css样式我也写在了标签的style里面。

3. 这个页面我们需要页面刚加载的时候就开始倒计时发送验证码，所以我们需要用到生命周期函数，onReady，在script中定义一个onReady函数，具体代码如下：

onReady() {
      this.codeMsg = '重新发送(' + this.codeNum +')';
      this.sendCode();
    },

4. 然后button里面也要写上js逻辑代码，发送验证码的代码，还有setTimeout延时器，具体的代码如下图所示：

5. 然后下一步的那个按钮就是点击后返回到我们的app主页面，表示已经登录成功，定义一个goNextIndex函数，使用uni.switchTab,跳转的url就设置为首页。