企业微信当前页面扫码登录(构造内嵌登录二维码)

之前逻辑：点击按钮跳转到企业微信二维码登录链接地址，扫码确认之后，带上相关参数返回登录页面，然后登录成功

缺点：体验上不是很好

现直接在登录页面展示企业微信二维码

优点：当前页面跳转，体验好

如下图所示，可直接扫一扫登录

那么这种情况开发人员将如何配置呢？

第一步：要有企业微信账户，并开通相关功能（这里去看企业微信相关配置，笔者并没有自己去配），在企业微信里找到 agentId和appId

第二步：在html部分插入如下代码

 <script src="https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.7.js"></script> 
 <!-- 构造内嵌登录二维码 -->

第三步：在页面的javascript部分插入如下代码：

<div className="lg-box">
    <em className="lg-logo"></em>
    <div className="lg-slogan positionCenter">
            <p className="big-slogan">聚力营销 高效取胜</p>
            <p className="small-slogan">多元化营销管理平台</p>
            <div className="lg-wxcode">
                 <div id="wx-qrcode"></div>
            </div>
    </div>
</div>


componentDidMount=()=>{
    let params = getSearch()
    
    this.onWxQrcode()
}

onWxQrcode = async () => {
        let params = getSearch()
        let appid, agentid
        if (params.k) {
                localStorage.setItem('k', params.k)
                let _c = this.state.config
                if (!_c.corpId) {
                        await this.getConfigFn()
                        _c = this.state.config
                }
                appid = _c.corpId
                agentid = _c.agentId
        } else {
                appid = APPID //全局配置的APPID
                agentid = AGENTID //全局配置的AGENTID
        }
        new WwLogin({
                id: 'wx-qrcode',
                appid,
                agentid,
                redirect_uri: `${encodeURIComponent(PATH_HTTP + CALLBACK_NAME)}%2flogin`,
                state: params.k || appid,
        })
        
        //PATH_HTTP: 'https://',
        //CALLBACK_NAME: 'qyadmin.xxx.gemii.cc', // test项目入口  
}

getConfigFn = () => {
    //代开发应用查询corpid agentId
    return getConfig(getSearch().k)
        .then(res => {
            if (res.code == 100) {
                this.setState({
                        loading: false,
                        config: {
                            deployType: res.data.deployType,
                            corpId: res.data.corpId,
                            agentId: res.data.deployType == 2 ? res.data.extraAgentId : res.data.dkAgentId,
                        },
                })
            } else {
                    throw res
            }
        })
        .catch(res => {
                this.setState({loading: false})
                message.warning('获取登录信息失败，请联系管理员')
        })
}