解决微信jssdk在部分安卓和ios设备中签名失败的问题

最近在微信上用history模式开发单页应用时,使用的是react+react-router,遇到了一个比较闹心的问题,就是在有的安卓和ios设备上会出现无法调用微信js-sdk的问题,而我这边有一个需求是需要继续微信的拍照上传等能力的,经过各种尝试,总算目前似乎算找到了一种解决的办法,下面记录一下.

遇到的问题

调取选择图片或者拍照在部分ios上可以,大多数安卓不可以

这个试错的过程中真是怀疑了很多可能,就不一一列出了,总之以后多加注意了。

正确配置

因为history模式每次切换path会发生变化,所以如果在变化之后的页面需要调用sdk,那么就需要重新进行下微信的config,所以我在项目的utils下封装了一个重新进行微信config的方法,下面这个是最终得出的一个正确的配置,过程中真的是很不顺利,最终竟然是在config前加了一个setTimeout解决了这个奇怪的问题,还有一点要注意的就是这个方法要在componentDidMount里面调用这个setWxConfig方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const setWxConfig = () => {
// JSSDK配置
let WXCONFIG = window.config || {};
let url = window.location.href.split('#')[0];
url = encodeURIComponent(url);
// getWxConfig是封装的换取服务端签名的接口
getWxConfig('?url=' + url).then((data) => {
if(data) {
WXCONFIG = data;
WXCONFIG.jsApiList = ['scanQRCode', 'closeWindow', 'chooseImage', 'uploadImage', 'previewImage'];
// WXCONFIG.debug = true;
setTimeout(() => {
wx.config(WXCONFIG);
}, 500);
}
},(err) => {
throw err;
});
};