在基于typescript的react工程中引入微信jssdk

发表于 | 分类于 | 阅读次数

背景

因为微信官方仅提供了通过CDN引入jssdk的方式，连npm包都没有，就更别提ts的定义文件了，所以在typescript的项目中使用微信jssdk需要绕点儿圈圈。

解决方案

修改src/public/index.html

在页面中以CDN的方式引入微信jssdk的文件。

1
2
3
4
5
6
7
8
...
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
...
  </body>
</html>

修改src/react-app-env.d.ts

添加wx变量的声明。

1
2
3
...
declare var wx:any;
...

修改逻辑页面

在逻辑页面中添加jssdk的初始化跟使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
...

const WechatDemo = ({ ...props }) => {
   ...
   useEffect(() => {
        ...
        (async function uploadFile() {
            // 获取微信初始化配置
            let url = window.location.href.split('#')[0];
            let resp = await ApiHelper.getWXConfig(url);
            wx.config({
                debug: false,
                appId: resp.data.appId,
                timestamp: resp.data.timestamp,
                nonceStr: resp.data.nonceStr,
                signature: resp.data.signature,
                jsApiList: resp.data.jsApiList
            });
            wx.ready(() => {
                // 隐藏菜单
                wx.hideAllNonBaseMenuItem();
            });
            wx.error((res: any) => {
                console.error('wx error', res);
            });
        })();
    }, []);

   ...
}

export default WechatDemo;