ght-abc-add-wechat-demo v1.0.2

AddWeChat - 添加微信

项目主页

适用范围

适用于添加微信时，UI状态之间的流转（二维码展示，扫码成功，扫码失败）。

设计规范

详见：

效果图展示

代码演示

import React, { Component } from 'react';
import AddWeChart from 'abc-add-wechat';

export default class AddWeChartDemo extends Component {

    render() {
       const config = {
            step: "scanSuccess",
            scanSuccessInfo: {
                title: "Success",
                content: "请在手机上微信点击登录"
            }
        }
        return (
            <div style={{margin:'20px'}}>
                <AddWeChat {...config} />
            </div>
        )
    }
}

API

备注:

showQRCodeInfo,scanFailedInfo,scanSuccessInfo配置说明如下

    //showQRCode状态时，配置信息
    showQRCodeInfo: {
        qRcodeUrl: '', // string，二维码url，为空时，展示loading
        title: "扫码绑定微信", // string, 标题
        content: "需要配合您的手机微信登录使用" // string, 信息
    },
    //scanFailed状态时，配置信息
    scanFailedInfo: {
        qRcodeUrl: '', // string，二维码url，为空时，展示默认二维码图片
        title: "二维码失效", // string, 标题
        onRefreshClick: () => {} // 刷新事件，例如在此事件中重新获取二维码url，回到showQRCodeInfo状态
    },
    //scanSuccess状态时，配置信息
    scanSuccessInfo: {
        qRCode: '', // element，扫码成功后，展示的react 元素，为空时，展示默认图片
        title: "扫码成功", // string, 标题
        content: "请在手机上微信点击登录" // string, 信息
    }