手把手教你写一个微信绑定的组件（2）

这是我参与更文挑战的第4天，活动详情查看：更文挑战

手把手教你写一个微信绑定的组件(1)

组件的几种状态

对于一个微信绑定组件，有以下几种状态，

1、首先是获取二维码图片前的loading状态，

2、然后是获取二维码成功的状态，这时候需要把二维码图片打在公屏上。

3、还要有一个二维码获取失败的状态，这时候就要把刷新二维码的按打在公屏上。

4、扫描二维码，但是还没有点击确认，这时候组件需要显示请在手机上确认的文案

4、最后一种状态就是二维码过期，这时候也需要有一个刷新二维码的按钮。

组件的整个处理流程

1. 调用获取二维码图片的接口，成功获取二维码后，开启二维码的过期的倒计时，时间到后提醒用户刷新二维码。如果接口请求失败，就把显示刷新二维码的按钮。同时要开启轮询，检查用户是否绑定成功。
2. 检查轮询的逻辑：调用检查状态的接口，返回一个字段isBind表示用户上是否绑定，如果为false，就在倒计时结束后继续请求状态检查接口，如果为true，还要判断用户是第一次绑定还是要换个微信绑定，如果绑定成功，就清除确认状态的倒计时，并且执行绑定成功的回调。如果轮询的接口请求失败，就执行失败的回调。

总结

1. 使用setTimeout，实现每隔一段时间执行回调的方法：

   if (isBinded) {
   	//doSomething
   } else {
   	this.checkStatusTimer = setTimeout(() => {
           //再次执行这个函数
         	this.checkStatus();
        }, this.checkIntervalTime);
   }
   

2. 最重要的就是把握好微信绑定的几个状态，在不同的状态显示不同的页面，实现不同的功能。