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

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

前言

最近在公司实习，封装了一个微信绑定的弹窗组件，这也是自己第一次系统性的学习如何封装组件，下面就把自己对组件封装的感悟记录在下面。

组件的样式

这个组件的样式类似dialog弹窗，点击打开，后面一层遮罩，然后居中显示一个正方形，正方形里面有一个二维码。如图所示：

我主要说一说全屏幕的遮罩层应该怎么搞

先上代码：

<div
    class="dialog-mark"
    @click="close"
/>
.patsnap-biz-wechat_bind {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    margin: 0;
    z-index: 1000;
    .dialog-mark {
        position: absolute;
        top: 0;
        height: 0;
        left: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        z-index: 1001;
    }
}
复制代码

最外层使用fixed定位，遮罩层使用绝对定位，设置一个背景透明色，然后居中一个box里面就可以放我们想要的内容了，要注意box的z-index一定要比遮罩层的大。

微信绑定的流程

微信绑定的简单流程就是首先请求接口getQRCode()得到一个二维码，用户用手机扫描这个二维码，扫描后用户在手机上点击确认，在这段时间中我们需要请求另一个接口checkStatus()不断去像后端确认用户是否扫描二维码，如果扫描，我们需要将组件里的二维码换成提醒用户点击手机上的确认的文案，用户确认之后，checkStatus返回这个用户的微信信息，然后那这个弹框关掉。

组件可以接受的属性

    props: {
        //获取二维码图片的接口
        getCodeFun: {
            type: Function,
            required: true,
            default: () => new Promise(() => {}),
        },
        //检查用户绑定状态的接口
        checkBindStatusFun: {
            type: Function,
            required: true,
        },
        onCloseFun: {
            type: Function,
            default: () => {},
        },
        //绑定成功的回调
        bindSuccessCallback: {
            type: Function,
            default: () => {},
        },
        //绑定失败的回调
        bindFailCallback: {
            type: Function,
            default: () => {},
        },
         //用来设定二维码的过期时间
        codeExpiredTime: {
            type: Number,
            default: 120000,
        },
        checkIntervalTime: {
            type: Number,
            default: 5000,
        },
        wechatUserInfo: {
            type: Object,
            default: () => ({}),
        },
        //是否显示微信组件弹框
        visible: {
            type: Boolean,
            default: false,
            required: true,
        },
    },
复制代码