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.微信无效签名踩坑文档

更多相关文章

随机推荐