记一次微信二次分享中signature签名失败的问题

在h5微信环境中，需要自定义去微信分享小卡片

我一顿配置，根据官方文档配置完后，打包到测试环境，第一次分享出去一切正常。

逻辑代码如下图（vue mixin）【不是重点，就是正常配置 可参考】

import wx from 'weixin-js-sdk';

export default {
    data () {
        return {
            isready: false
        }
    },
    methods: {
        async getWxConfig ({ title, link, imgUrl, desc, dataUrl = '' }) {
            const res = await wxShare(location.href)
            const config = res.data.data;
            const jsApiList = [
                'updateAppMessageShareData',
                'updateTimelineShareData',
                'onMenuShareTimeline',
                'onMenuShareAppMessage'
            ];
            // console.log('config', config, res.data)
            const {
                appId, timestamp, nonceStr, signature
            } = config;


            wx.checkJsApi({
                jsApiList, // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: (r) => {
                    console.log('checkJsApi success,', r);
                },
                error: (e) => {
                    console.log('error', e)
                }
            });
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId, // 必填，公众号的唯一标识
                timestamp, // 必填，生成签名的时间戳
                nonceStr, // 必填，生成签名的随机串
                signature, // 必填，签名
                jsApiList// 必填，需要使用的JS接口列表
            });

            wx.error((e) => {
                // alert('出错了：' + res.errMsg) //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
                console.log('error', e);
            });

            wx.ready(() => {
                console.log('ready')
                this.isready = true
                this.wx_share({ title, link, imgUrl, desc, dataUrl });
                // this.wx_TimelineShare({ title, link, imgUrl });
            });

        },
        wx_share ({ title, link, imgUrl, desc, dataUrl = '', type = 'link' }) {
            console.log({ title, link, imgUrl, desc, dataUrl, type })
            //微信好友
            wx.updateAppMessageShareData({
                title, // 分享标题
                desc, // 分享描述
                link, // 分享链接
                imgUrl, // 分享图标
                type, // 分享类型,music、video或link，不填默认为link
                dataUrl, // 如果type是music或video，则要提供数据链接，默认为空
                success: () => {
                    // 用户确认分享后执行的回调函数
                    console.log("updateAppMessageShareData, 111")
                },
                cancel: () => {
                    // 用户取消分享后执行的回调函数
                }
            });
        },
        wx_TimelineShare ({ title, link, imgUrl }) {
            //朋友圈
            wx.updateTimelineShareData({
                title, // 分享标题
                link, // 分享链接
                imgUrl, // 分享图标
                success: () => {
                    // 用户确认分享后执行的回调函数
                },
                cancel: () => {
                    // 用户取消分享后执行的回调函数
                }
            });
        }
    }
}

在/detail?status=1页面第一次分享

updateAppMessageShareData中的link: "https://域名/detail?a=1&b=2&c=3"

通过分享后的小卡片进来后页面渲染一切正常，我就试了一下在当前页再分享一次，这时候离异事件来了，报错！！！控制台显示 签名失败 signature error！

为啥呢？？？

通过排查，最后发现其实是link中的&符号，也就是第一次分享我只有一个参数是正常的，第二次分享有多个参数用&拼接了就报错了。

处理方式：将 link中后面的search部分（参数）进行字符串转义

（注意：跳转进来后接收query参数的时候记得反转回来）

另外~细心的同学发现，为什么有的时候分享出去是卡片，有的是单纯的链接呢？

通过尝试，需要先收藏页面，然后通过微信里的 【我的】【收藏】点进去，再分享出来的就是小卡片了

官方还有其他方式，比如通过扫二维码等方式