微信公众号的分享接口，分享提示config:fail,invalid signature的解决办法（12月）

时间：2024-04-17 12:27:46

微信中打开网页，使用微信右上角菜单中自带的分享功能的经历及总结：

最开始，微信分享页面时，直接读取页面的标题（title）和页面中的第一张符合条件的图片[此种方式在2017-03-29之前管用，这一天之后，失效了，不再获取页面上的图片了。

信息详细说明：

标题：会取当前页面title里面的内容。

图片：会取当前页面body内最前面的一张符合条件的图片。

图片规格有要求：

尺寸必须大于： 300px × 300px

把符合以上两个条件的图片放到<img>里，放到页面<body>内的最前面。

这样分享时就会取这张图作为缩略图了。

2017-03-29以后的微信分享，新版微信已经不支持非JSSDK的其他自定义分享内容了.....，微信官方也给出了新的微信分享方式：JSSDK自定义分享接口的策略调整
JSSDK自定义分享接口的策略调整

2017-03-29 微信团队 微信开发者
为规范自定义分享链接功能在网页上的使用，自2017年4月25日起，JSSDK“分享到朋友圈”及“发送给朋友”接口，自定义的分享链接，其域名或路径必须与当前页面对应的公众号JS安全域名一致，否则将调用失败。

例如，当前页面是 http://www.abc.com/123，其公众号对应的JS安全域名为 www.abc.com 以及 www.xyz.com，则分享自定义链接 http://www.abc.com/456 可以成功，分享 http://www.xyz.com/123 或 http://www.def.com/123 均将失败。

对于未接入微信JSSDK或已接入但JSSDK调用失败的网页，被用户分享时，分享卡片将统一使用默认缩略图和标题简介，不允许自定义。

接口完整用法请参考《微信JSSDK说明文档》，请开发者及时完成调整。

 

官方关于使用JSSDK文档来实现微信自定义分享的步骤及代码调用示例的说明：

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

此文档面向网页开发者介绍微信JS-SDK如何使用及相关注意事项。

##JSSDK使用步骤

###步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

###步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
（或者http://res.wx.qq.com/open/js/jweixin-1.1.0.js，我的网站）
备注：支持使用 AMD/CMD 标准模块加载方法加载

###步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: \'\', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: \'\', // 必填，生成签名的随机串
    signature: \'\',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
###步骤四：通过ready接口处理成功验证

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
###步骤五：通过error接口处理失败验证

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
##接口调用说明

所有接口通过wx对象(也可使用jWeixin对象)来调用，参数是一个对象，除了每个接口本身需要传的参数之外，还有以下通用参数：

1.success：接口调用成功时执行的回调函数。

2.fail：接口调用失败时执行的回调函数。

3.complete：接口调用完成时执行的回调函数，无论成功或失败都会执行。

4.cancel：用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。

5.trigger: 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。

备注：不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回。

以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性errMsg，其值格式如下：

调用成功时："xxx:ok" ，其中xxx为调用的接口名

用户取消时："xxx:cancel"，其中xxx为调用的接口名

调用失败时：其值为具体错误信息

#基础接口

##判断当前客户端版本是否支持指定JS接口

wx.checkJsApi({
    jsApiList: [\'chooseImage\'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
    success: function(res) {
    // 以键值对的形式返回，可用的api值true，不可用为false
    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});
备注：checkJsApi接口是客户端6.0.2新引入的一个预留接口，第一期开放的接口均可不使用checkJsApi来检测。

#分享接口

请注意不要有诱导分享等违规行为，对于诱导分享行为将永久回收公众号接口权限，详细规则请查看：朋友圈管理常见问题 。

##获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({
    title: \'\', // 分享标题
    link: \'\', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: \'\', // 分享图标
    success: function () {
    // 用户确认分享后执行的回调函数
},
cancel: function () {
    // 用户取消分享后执行的回调函数
    }
});
##获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({
title: \'\', // 分享标题
desc: \'\', // 分享描述
link: \'\', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: \'\', // 分享图标
type: \'\', // 分享类型,music、video或link，不填默认为link
dataUrl: \'\', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
##获取“分享到QQ”按钮点击状态及自定义分享内容接口

wx.onMenuShareQQ({
title: \'\', // 分享标题
desc: \'\', // 分享描述
link: \'\', // 分享链接
imgUrl: \'\', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
##获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口

wx.onMenuShareWeibo({
title: \'\', // 分享标题
desc: \'\', // 分享描述
link: \'\', // 分享链接
imgUrl: \'\', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
##获取“分享到QQ空间”按钮点击状态及自定义分享内容接口

wx.onMenuShareQZone({
title: \'\', // 分享标题
desc: \'\', // 分享描述
link: \'\', // 分享链接
imgUrl: \'\', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
#图像接口

 

 

项目中的代码使用情况：

HTML：

            <input type="hidden" id="hfTitle" value="分享的标题" />
            <input type="hidden" id="hfDesc" value="分享内容的描述文字" />            
            <input type="hidden" id="hfImg" value="分享的图片完整地址" />

　　

 

Javascript:

<script src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script type="text/javascript">
 //微信右上角菜单分享 $(function () {
 var sTitle = $("#hfTitle").val();//documnet.title; 

var sDesc = $("#hfDesc").val();
var sLink = location.href;//这句话，很重要，当前页面的链接、分享的链接和签名的链接一定要使用location.href的值，否者会出现各种坑，比如：微信分享提示config:fail,invalid signature 
var sImgUrl = $("#hfImg").val();
if (WechatShare && sTitle && sLink) 
{ 
  WechatShare(sTitle, sDesc, sLink, sImgUrl);
}
});
 </script>

 

wxshare.js的完整内容：

///调用微信菜单的分享功能分享服务提供商的页面
;function WechatShare(shTitle, shDesc, shLink, shImgUrl)
{    
    if (is_weixin()) {       
        var urlPost = "/api/apishare/WeiXin?r=" + Math.random();
        var dataPost = { "url": shLink };//$("#hfLink").val().toLocaleLowerCase()
        $.ajax({
            type: "POST",
            data: dataPost,
            async: false,
            dataType: "json",
            url: urlPost,
            success: function (datastr) {
                var data = strToJson(datastr);
                if (data.errorCode != 200) {
                    return;
                }
                try {
                    if (wx) {
                        //获取正确的签名数据
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: data.APPID, // 必填，公众号的唯一标识
                            timestamp: data.TimeStamp, // 必填，生成签名的时间戳
                            nonceStr: data.NonceStr, // 必填，生成签名的随机串
                            signature: data.Sign,// 必填，签名，见附录1
                            jsApiList: [\'onMenuShareTimeline\', \'onMenuShareAppMessage\', \'onMenuShareQQ\', \'onMenuShareQZone\'] //必填，需要使用的JS-SDK接口列表
                        });                       
                        InitWechatShareMenu(shTitle, shDesc, shLink, shImgUrl);
                    } else {
                        console.log("wx is not defined");
                    }

                } catch (e) {                    
                    console.log("throw ex:" + e);
                }
            }
        });
    }
    else
    {
        //非微信App打开页面，不初始化调用微信分享
    }

}

//微信浏览器右上角分享功能
function InitWechatShareMenu(shTitle, shDesc, shLink, shimgUrl) {
    try {

        wx.ready(function () {
            // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
            wx.onMenuShareTimeline({
                title: shTitle, // 分享标题
                desc: shDesc, //分享描述
                link: \'\' + shLink + \'\',
                imgUrl: shimgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
            wx.onMenuShareAppMessage({
                title: shTitle, // 分享标题
                desc: shDesc, // 分享描述
                link: \'\' + shLink + \'\',
                imgUrl: shimgUrl, // 分享图标
                type: \'link\', // 分享类型,music、video或link，不填默认为link
                dataUrl: \'\', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareQQ({
                title: shTitle, // 分享标题
                desc: shDesc, // 分享描述
                link: \'\' + shLink, // 分享链接
                imgUrl: shimgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            //wx.onMenuShareWeibo({
            //    title: shTitle, // 分享标题
            //    desc: shDesc, // 分享描述
            //    link: shLink, // 分享链接
            //    imgUrl: shimgUrl, // 分享图标
            //    success: function () {
            //        // 用户确认分享后执行的回调函数
            //    },
            //    cancel: function () {
            //        // 用户取消分享后执行的回调函数
            //    }
            //});
            wx.onMenuShareQZone({
                title: shTitle, // 分享标题
                desc: shDesc, // 分享描述
                link: \'\' + shLink, // 分享链接
                imgUrl: shimgUrl, // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.error(function (res) {
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                ConsoleLog("wx.error:" + res);
            });

        });
    } catch (e) {
        ConsoleLog("throw ex:" + e);
    }
}

//配置
function is_weixin() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == \'micromessenger\') {
        return true;
    } else {
        return false;
    }
}

function strToJson(str) {
    var json = (new Function("return " + str))();
    return json;
}

接口说明：/api/apishare/WeiXin输出的json格式的字符串：

返回值：
"{\"errorCode\":200,\"errorMes\":\"ok\",\"APPID\":\"wx529feee86f8ec400\",\"TimeStamp\":\"1513304624\",\"NonceStr\":\"e5e6a44636a041439fe5ed6ac517895a\",\"Api_Ticket\":\"HoagFKDcsGMVCIY2vOjf9rn95syC6rBOdmxyHLia-Gu6QnHXZMSDr4D4XYOoAhTQYOclQkRw5KIeEbHRmRMRAB\",\"Sign\":\"64b78a1a2b003365a4f750e81b4942f1154b12e0\"}"


 

我总结一下需要特别注意问题：

1.在公众号开发的管理后台添加 jssdk的安全域名目录。

2.添加域名所在外网IP的白名单。

3.分享时，微信打开的网页所在页面url、签名的url 和分享的url必须保持一致，注意大小写敏感，否则会出现签名配置失败。建议使用：location.href来取值。（如果地址中有#号，只取#之前的内容） 

附件：share.js 

相关文章