react 对接企业微信扫码登陆记录

1.在package.json里引入wecom/jssdk

npm i @wecom/jssdk
yarn @wecom/jssdk 

我这里使用的版本是 "@wecom/jssdk": "^1.3.1",

2.在index.html里引入jdk

<script src="https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js"></script>

*注:试过好几个版本的jdk，都会有一些莫名其妙的报错，或者引用不到，或是引用会报错，这个jdk是我尝试比较好用的jdk
http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js和https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js都可以使用 ，但是 https网站引入http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js会导致企业微信二维码显示不出来，建议直接使用https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js

3.在需要使用的组件中使用

import React, { Component } from 'react';
import * as ww from '@wecom/jssdk';
import { Link, withRouter } from 'react-router-dom';
@withRouter
export default class Weixin extends Component {
    constructor(props) {
        super(props);
    }
       //获取数据企业微信所需要的数据 appid、agentid、redirct_uri等数据
    fetchData = () => {
        fireGetRequest(GET_WECHATCONFIG, { type: 'WE_CHAT_INFO' })
            .then((res) => {
                if (res.code !== 200) {
                    // openNotification('error', '获取配置信息失败，请重试', res.message);
                    return;
                }
                //获取数据之后传入实例化函数
                this.initQrcode(res.data);
            })
            .catch((e) => {
                // openNotification('error', '获取配置信息失败，请重试', res.message);
            });
    };
  //实例化函数
    initQrcode = (data) => {
       //实例化对象，挂载到页面，这里返回的就是二维码
        new window.WwLogin({
            id: 'ww_login',  
            login_type: 'CorpApp',//登录类型。ServiceApp：服务商登录；CorpApp：企业自建/代开发应用登录。，
            appid: data.corpId, //企业微信注册的企业Id，必传
            agentid: data.agentId,//企业微信注册时的应用程序Id ，必传
            redirect_uri: encodeURI(  //扫码成功后的回调地址，这里我是前端写的页面，将路由给后端，当扫码成功后，由后端进行页面的跳转，必传
                `${data.redirectUri}?userId=${getItem(
                    STORAGE_KEY_MAPPING.USER_ID 
                )}`//userId是自己加的在回调页面需要的参数
            ),
            lang: 'zh' // 不必传
        });
    };
//必传参数如果没有传，二维码展示不出来，会报参数错误，有时候会提示哪个参数的错误，有时候只会报参数错误，请联系管理员
    //进入页面时获取数据
    componentDidMount() {
        this.fetchData();
    }
    render() {
//装载二维码的容器
        return (
            <div
                style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                id="ww_login"
            ></div>
        );
    }
}

*注，如果没有问题，到这里应该就可以展示出来企业微信的二维码了，这里只是前端需要做的东西，想要二维码正确展示出来少不了后端的配置，这里要和后端同学一起配置

*附：企业微信官网：https://developer.work.weixin.qq.com/document/path/98151