手把手教你寫一個微信綁定的組件（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,
        },
    },
複製代碼

總結

根據父組件傳過來的這些屬性，咱們就能夠來作微信二維碼的綁定組件了，具體如何判斷，咱們下期再講，敬請期待。