React配置微信jssdk关闭公众号分享等

前文：

react本身是单页面，通过路由加载组件显示页面。微信官方案例说明，在安卓端没问题，但是在ios下异常。不能关闭，提示签名错误。

文档：

微信官方文档：https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3

复制微信打开看效果：https://www.weixinsxy.com/jssdk/

解决原理：

一：

1. ios下每次传递的url配置参数，是最初第一个进来时候的全连接（#前：window.location.href.split(’#’)[0]）。也就是在任何路由跳转前的链接。
2. 安卓正常，每次获取当前页面url

二：

1. jssdk文件不要使用线上地址script引用，放在本地在index.html引用。防止跨域被拦截，注意！！！对，你没看错，ios下jssdk文件存在跨域被拦截情况。

解决代码：

1. jssdk放在本地文件夹内引用 线上存在ios设备跨域被拦截情况，不要认为js引用跨域不被拦截

// 我是1.6的版本，仅仅示例
<script src="%PUBLIC_URL%/jweixin-1.6.0.js"></script>

2.储存首次页面url
第一个页面时存一下，ios要用

window.localStorage.setItem('_iosWXConfig_', window.location.href.split('#')[0]);

App.js内：
当前演示版本是react-router-dom V5。若是V6，略有不同，可以写在onBeforeMount、onMounted、onEnter等事件内

jweixin.js

import { GET } from '@/utils/request'; // 封装的get请求

function weixinJsSdk(path) {
    if(path === '/') return; //中转页不调用
    let u = window.navigator.userAgent;
    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(`${window.localStorage.getItem('_iosWXConfig_') || window.location.href.split('#')[0]}`);//获取初始化的url相关参数
    } else {
        url = encodeURIComponent(window.location.href.split('#')[0]);
    }
    // 后端接口返回jssdk配置信息
    GET('wechat/getSdkMessage', {
        url: url
    })
        .then(res => {
            // 通过config接口注入权限验证配置
            window.wx.config({
                // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: res.appId, // 必填，公众号的唯一标识
                timestamp: res.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.noncestr, // 必填，生成签名的随机串
                signature: res.signature,// 必填，签名
                // 必填，需要使用的JS接口列表
                jsApiList: [
                    'hideOptionMenu'
                ]
            });
            // 通过ready接口处理成功验证
            window.wx.ready(() => {
                window.wx.hideOptionMenu();
            });
            // 防止没有关闭，可删除
            setTimeout(() => {
                window.wx.hideOptionMenu();
            }, 300)
            // 通过error接口处理失败验证
            window.wx.error(err => {
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                console.log('config信息验证失败', err);
            });
        })
        .catch(err => {
            console.log('获取sdk配置信息失败', err);
        })
}

export default weixinJsSdk;

补充资料：（若有兴趣可看 – 也是我的博客）

react中axios引用以及实例封装常见拦截器请求方式：https://blog.csdn.net/weixin_44461275/article/details/122230473

微信JS-SDK及其各类API调用分享、隐藏…、图片、地图、录音、支付、卡券等：https://blog.csdn.net/weixin_44461275/article/details/122846022

微信官方文档：https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3

复制微信打开看效果：https://www.weixinsxy.com/jssdk/

微信 JS 接口签名校验工具：http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

如果配置失败，建议打开wx.config中的：debug: true 看弹出什么提示

IOS 效果：

---

老规矩，有问题留言~~~