微信js-sdk 微信自定义分享显示图片和描述不显示
在做h5页面分享时，用到了微信的自定义分享js-sdk 。
有时会不显示自定义的图片和描述。分步骤检查出现的问题：
调用config 接口的时候传入参数 debug: true 可以开启debug模式，页面会alert出错误信息。以下为常见错误及解决方法：
1.invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，仅支持80（http）和443（https）两个端口，因此不需要填写端口号（一个appid可以绑定三个有效域名，见 ]目录1.1.1）。
2.invalid signature签名错误。建议按如下顺序检查：
1.确认签名算法正确，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
2.确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
3.确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。
4.确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
5.确保一定缓存access_token和jsapi_ticket。
6.确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
3.the permission value is offline verifying这个错误是因为config没有正确执行，或者是调用的JSAPI没有传入config的jsApiList参数中。建议按如下顺序检查：
1.确认config正确通过。
2.如果是在页面加载好时就调用了JSAPI，则必须写在wx.ready的回调中。
3.确认config的jsApiList参数包含了这个JSAPI。
4.permission denied该公众号没有权限使用这个JSAPI，或者是调用的JSAPI没有传入config的jsApiList参数中（部分接口需要认证之后才能使用）。
5.function not exist当前客户端版本不支持该接口，请升级到新版体验。
检查了这些之后，发现有时分享可以显示自定义的图片和描述，有时不可以。
1、在网上搜索说是1.4.0的版本的分享到朋友圈和发送给朋友的api（1.4.0新版本：updateTimelineShareData和updateAppMessageShareData）要用旧版本（旧版本：onMenuShareTimeline和onMenuShareAppMessage）的，但是我线上替换成旧版本的还是不行。但是看后台打印的日志是获取不到jsapi_ticket了，发现是后台的原因，只能后台人员去解决了。
2、用的是前台发送url给后台接口，这个url需要encodeURIComponent，后台再decodeURIComponent，然后后台接口返回timestamp 、nonceStr和signature，代码如下:
$(function () {
var winUrl = window.location.href.split("#")[0];
/* if(winUrl.indexOf('from=singlemessage')>0 || winUrl.indexOf('isappinstalled')>0){
winUrl = winUrl.split('?from=singlemessage')[0]
} */
var meta = document.getElementsByTagName('meta');
var share_desc = '';
for (i in meta) {
if (typeof meta[i].name != "undefined" && meta[i].name.toLowerCase() == "description") {
share_desc = meta[i].content;
}
}
$.ajax({
type: "post",
url: "/post/getShareSignature",
crossDomain: true,
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
"articleUrl": encodeURIComponent(winUrl)
}),
success: function (msg) {
//console.log(" timestamp:" + msg.data.timestamp + " ; noncestr:" + msg.data.noncestr + "; signature:" + msg.data.signature);
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: "wx91f855a7c7f4187b", // 必填，公众号的唯一标识
timestamp: msg.data.timestamp, // 必填，生成签名的时间戳
nonceStr: msg.data.noncestr, // 必填，生成签名的随机串
signature: msg.data.signature, // 必填，签名，见附录1
jsApiList: ['onMenuShareTimeline',
'onMenuShareAppMessage'
] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function () {
var title, img_url;
if (winUrl.indexOf('post') != -1) {
//IOS系统分享时读取图片路径会出现问题 用 encodeURI 来处理下
title = $("#articleTitle").val();
img_url = encodeURI($("#coverImg").val());
} else if (winUrl.indexOf('school') != -1) {
title = document.title;
img_url = encodeURI($("#schoolBadge").attr("src"));
} else if (winUrl.indexOf('seventy') != -1) {
title = document.title;
img_url = encodeURI('https://xsn.com.cn/fileDir/cnypaData/seventy.jpg');
} else {
title = document.title;
img_url = encodeURI(location.href.split('.cn/')[0] + '.cn/img/Group.png')
}
//分享到朋友圈
wx.onMenuShareTimeline({
title: title, // 分享标题
link: winUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: img_url, // 分享图标
success: function () {
console.log('已分享');
},
cancel: function () {
console.log('已取消');
},
fail:function(res){
alert(JSON.stringify(res))
}
}); //分享给微信好友
wx.onMenuShareAppMessage({
title: title, // 分享标题
desc: share_desc,
link: winUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: img_url, // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
success: function () {
console.log('已分享');
},
cancel: function () {
console.log('已取消');
},
fail:function(res){
alert(JSON.stringify(res))
}
});
wx.error(function (res) {
console.log("res:", res)
})
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log("error" + errorThrown);
}
});
})
// 微信js - sdk分享 end3、另一个原因是后台只缓存了acess_token，没有缓存jsapi_ticket。这就又把问题抛到后台了（大笑，来回踢皮球，哈哈哈）。然后只能后台去找原因了。从后台打印出的日志来看，凡是分享不显示图片和描述的，都是jsapi_ticket没获取到为null，分析有可能是没有缓存jsapi_ticket导致的，微信这边做了限制，必须缓存jsapi_ticket和access_token。
参考链接：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 附录5-常见错误及解决方法 这里微信有说明。官网帮你找问题。哈哈哈
https://segmentfault.com/q/1010000002520634