1.最近做原生h5开发,测试发现分享有时候能显示图片及设置的标题等信息、大概率没有显示
bug图
2.原因:
在使用微信JS-SDK进行分享时,wx.ready函数是非常关键的,因为它确保了微信JS-SDK的配置已经完成并且可以安全地调用JS-SDK的API。在wx.config配置完成并且微信客户端验证了配置信息之后,wx.ready回调函数会被触发。在该回调函数内部调用的任何JS-SDK方法都会正常工作。
如果不使用wx.ready直接调用JS-SDK的API,可能会导致以下几种情况:
1.配置未完成:如果wx.config的配置信息尚未被微信客户端验证,直接调用API会导致API调用失败。
2.异步问题:wx.config是异步的,这意味着即使你紧接着wx.config之后调用API,配置可能还未完成,因此API调用可能无效。
3.权限问题:微信客户端需要验证wx.config中的签名信息才能授权使用JS-SDK的API。如果没有经过验证,API调用将不会被授权。
因此,在你的代码中,如果省略了wx.ready,那么wx.onMenuShareTimeline和wx.onMenuShareAppMessage可能在wx.config配置信息未被验证之前就被调用,从而导致分享功能失败。
解决方案:加上wx.ready后即可
function share(shareData) {
$.ajax({
url: wxMessage.url,
data: {
"url": window.location.href
},
type: "post",
error: function (XMLHttpRequest, textStatus, errorThrown) { },
success: function (data) {
var resultData = data.data;
console.log("数据", resultData)
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: resultData.appId, // 必填,公众号的唯一标识
timestamp: resultData.timestamp, // 必填,生成签名的时间戳
nonceStr: resultData.nonceStr, // 必填,生成签名的随机串
signature: resultData.signature, // 必填,签名,见附录1
jsApiList: [ // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'updateAppMessageShareData',
'showOptionMenu',
'chooseImage',
'previewImage'
],
});
}
});
wx.ready(function () {
console.log("验证成功~~~~~~~")
wx.onMenuShareTimeline(shareData);
wx.onMenuShareAppMessage(shareData);
})
}
share(shareData);
展示效果图