This is the third day of my participation in Gwen Challenge

preface

Recently, I had an internship in a company, encapsulating a pop-up component bound by wechat. This was my first time to systematically learn how to encapsulate components. My thoughts on component encapsulation are recorded below.

Component styles

This component looks like a Dialog popup. Click to open it, a mask is placed behind it, and a square with a QR code is displayed in the center. As shown in the figure:

I’m mainly talking about the full screen mask layer should do

Code first:

<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; }}Copy the code

Fixed position is used for the outermost layer and absolute position is used for the mask layer. Set a transparent background color and then center a box to put the content we want. Note that the Z-index of the box must be larger than that of the mask layer.

Process of wechat binding

The simple process of wechat binding is to first request interface getQRCode() to get a TWO-DIMENSIONAL code, and the user scans the two-dimensional code with his mobile phone. After scanning, the user clicks “confirm” on his mobile phone. During this period of time, we need to request another interface checkStatus() to continuously confirm whether the user scans the two-dimensional code. We need to change the TWO-DIMENSIONAL code in the component into a copy reminding the user to click the confirmation on the mobile phone. After the user confirms, checkStatus returns the wechat information of the user, and then the pop-up box is closed.

Properties accepted by the component

    props: {
        // Get the qr code image interface
        getCodeFun: {
            type: Function.required: true.default: () = > new Promise(() = >{})},// Interface to check user binding status
        checkBindStatusFun: {
            type: Function.required: true,},onCloseFun: {
            type: Function.default: () = >{},},// Bind a successful callback
        bindSuccessCallback: {
            type: Function.default: () = >{},},// Bind failed callback
        bindFailCallback: {
            type: Function.default: () = >{},},// Set the expiration time of the qr code
        codeExpiredTime: {
            type: Number.default: 120000,},checkIntervalTime: {
            type: Number.default: 5000,},wechatUserInfo: {
            type: Object.default: () = >({})},// Whether to display the wechat component dialog box
        visible: {
            type: Boolean.default: false.required: true,}},Copy the code

conclusion

According to these attributes transmitted by the parent component, we can do the binding component of wechat TWO-DIMENSIONAL code. We will talk about the specific judgment in the next period, please look forward to it.