react中使用微信jssdk分享总结

1.线上微信官方jssdk文档 jssdk文档

2.react项目中添加配置jssdk的工具方法
javascript 代码

export function jsSdkConfig(axios, host) {
    let u = window.navigator.userAgent;
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    //安卓需要使用当前URL进行微信API注册（即当场调用location.href.split('#')[0]）
    //iOS需要使用进入页面的初始URL进行注册，（即在任何pushstate发生前，调用location.href.split('#')[0]）
    let url = '';
    if (isiOS) {
        url = encodeURIComponent(`http://www.qq.com/home/index?op=${window.sessionStorage.getItem('option')}`);//获取初始化的url相关参数
    } else {
        url = encodeURIComponent(window.location.href.split('#')[0]);
    }

    let time = Math.round(new Date().getTime() / 1000); //获取10位时间戳
    // alert(window.location.href.split('#')[0]);
    axios.get(`${host}/wechat/getJsSDKConfig?timestamp=${time}&nonceStr=nonceStr&url=${url}`).then(function (response) {
        if (response.data.state === 0) {
            /*配置微信jssdk*/
            window.wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: response.data.data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
                timestamp: response.data.data.timestamp, // 必填，生成签名的时间戳（10位）
                nonceStr: response.data.data.nonceStr, // 必填，生成签名的随机串,注意大小写
                signature: response.data.data.signature,// 必填，签名，见附录1（通过https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 验证）
                jsApiList: [
                    'getLocation',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage'
                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
        }
    }).catch(function (errors) {
        console.log('errors', errors);
    });
}

3.在要使用的组件导入改方法，然后在window.wx.ready方法中可以使用相关分享api

4.查看当前地址可以使用微信右上角的复制链接进行查看

5.微信无效签名踩坑文档