手把手教你写一个微信绑定的组件（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,
        },
    },
复制代码

总结

根据父组件传过来的这些属性，咱们就能够来作微信二维码的绑定组件了，具体如何判断，咱们下期再讲，敬请期待。