react，tsx使用微信jssdk

React tsx的H5项目使用企业微信JS-SDK

步骤：

1.（配置域名）：点击企业微信PC版左下角登录管理后台-应用管理-应用-设置应用主页，网页授权及JS-SDK。

2.（引入JS-SDK）:

1. 在React项目内终端下载

   • npm install weixin-js-sdk
     

2. 在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

   <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
   

3. 在页面上方一引入weixin-js-sdk，若在react-tsx页面内报错，在pages内创建types文件夹-创建index.d.ts文件：

   declare module "weixin-js-sdk";
   

4. 配置next.config.js文件内域名代理

3.流程：授权页面调取接口–》登录微信小程序 --》 授权调用方法权限（需要带code的url！） --》 wx.config方法

 useEffect(() => {
    (async function () {
      if (!!query.code) {	
        let r = await axiosHttpRequestA({	// 3.用链接的code 登录企业微信账号
          code: query.code,
        });
        let res = await axiosHttpRequestB({	// 4. 调用获取timestamp、nonceStr、signature等数据
          url: window.location.href,
        });
        import("weixin-js-sdk").then((wx) => {
          wxsdk = wx;
          wx.config({	// 5.初始化wx.config
            beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
            appId: res.result.appId, // 必填，企业微信的corpID（后端返回）
            timestamp: res.result.timestamp, // 必填，生成签名的时间戳（后端生成）
            nonceStr: res.result.nonceStr, // 必填，生成签名的随机串（后端生成）
            signature: res.result.signature, // 必填，签名（后端生成）
            jsApiList: ["scanQRCode"], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
          });							// config后即可调用有权限的jsApiList
        });
      } else {
        let r = await axiosHttpRequestC({	// 1.授权页面调取接口，获取url和code
          url: window.location.href,
        });
        location.replace(r.result?.url);	// 2.再带code跳转回本界面
      }
    })();

一些踩坑：

1. 如遇到import wx from ‘weixin-js-sdk’ 报错找不到window，则可按需引入。

     import("weixin-js-sdk").then((wx) => {
             wx.config({});
           });
   

2. 授权调用方法权限需要带code的url，非常重要，否则会出现wx.config中jsApiList返回为空【config:ok，但35个JS接口只能用基础接口（展开、返回等界面流程方法）！！】

这篇好文章是转载于：学新通技术网