umi框架搭建h5项目作为企业微信第三方应用引入JS-SDK

因为业务需要最近在使用umi框架搭建了一个h5项目，但是需要作为企业微信的第三方应用使用。在项目上线后新增获取客户群id，获取相应的资料的功能，需要用到企业微信的js-sdk。
本文主要是记录在umi中引入js-sdk并配置的问题。
按照企业微信的官网文档可以知道需要引入js文件。

由于使用的是umi框架，不像react那样有index.html文件入口。
因此在网上搜索以后发现可以在.umirc.ts文件中添加 headScripts:['http://res.wx.qq.com/open/js/jweixin-1.2.0.js',],可以引入js文件。但是按照这么协议后并没有好使。
又尝试安装一个插件 npm install weixin-js-sdk这样安装确实可以使用wx的文档了，但是在配置qgentConfig还需要另一个js文件，使用这种方式是不生效的，因此第二种方法也失败了。 最后没有办法有手写了一个useScript去添加js文件。

import { useEffect, useState } from 'react';

export const useScript = (src: string, type: string) => {
  const [status, seyStatus] = useState('load');  
  useEffect(() => {
    let script = document.createElement('script');
    script.src = src;
    script.async = true;
    script.type = type;
    script.setAttribute('data-status', 'loading');
    document.body.appendChild(script);
    script.onload = function () {
      // 确保js文件已经加载完成
      seyStatus('ready');
    };
  }, [src]);

  return status;
};

//使用
const type = useScript(
   'http://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js',
   'text/javascript',
);

一切准备就绪后就开始了正式的配置：

const Index = (props: any) => {
  const [data, setData] = React.useState([]);
  useScript('http://res.wx.qq.com/open/js/jweixin-1.2.0.js', 'text/javascript');
  const type = useScript(
    'http://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js',
    'text/javascript',
  );

  const sha1 = require('js-sha1'); //需要安装sha1插件，对签名进行加密

  React.useEffect(() => {
    if (type === 'ready') { //当js返回完成后会return 状态
      getAccessTokenWeChat();
    }
  }, [type]);

  const getAccessTokenWeChat = async () => {
    const append = await getWechatGroupApi();
    // 生成企业微信签名 https://developer.work.weixin.qq.com/document/path/90506
    
    const jsapi_ticket = `jsapi_ticket=${append.jsapi_ticket}&noncestr=随机字符串&timestamp=时间戳&url=网页地址`;
    
    // 生成应用签名 https://developer.work.weixin.qq.com/document/path/90506
    
    const agent_jsapi_ticket = `jsapi_ticket=${append.config_jsapi_ticket}&noncestr=随机自负床&timestamp=时间戳&url=要第三方应用认证的可信域名`;
    
    const signature = sha1(jsapi_ticket);
    const agentSignture = sha1(agent_jsapi_ticket);
    window.wx.config({
      beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: '', // 必填，企业微信的corpID
      timestamp: '', // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
      jsApiList: ['getCurExternalChat'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
    });
    window.wx.ready(function () {
      console.log('成功');
      window.wx.agentConfig({
        corpid: '', // 必填，企业微信的corpid，必须与当前登录的企业一致
        agentid: '', // 必填，企业微信的应用id （e.g. 1000247）
        timestamp: '', // 必填，生成签名的时间戳
        nonceStr: '', // 必填，生成签名的随机串
        signature: agentSignture, // 必填，签名，见附录-JS-SDK使用权限签名算法
        jsApiList: ['getCurExternalChat'], //必填，传入需要使用的接口名称
        success: function (res: any) {
          // 回调
          console.log('成功');
        },
        fail: function (res: any) {
          console.log('调用失败', res);
          if (res.errMsg.indexOf('function not exist') > -1) {
            console.log('版本过低请升级');
          }
        },
      });
    });
    window.wx.error(function (res: any) {
      console.log('失败');
    });
  };

  return (
    <div >
    </div>
  );
};

export default Index