微信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, // 必填，签名，见附录1jsApiList: ['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，不填默认为linksuccess: 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分享 end

3、另一个原因是后台只缓存了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

微信js-sdk 微信自定义分享显示图片和描述不显示相关推荐

java 配置微信js sdk,微信JSSDKconfig接口注入权限验证配置的参数获取--java版
步骤看官网文档,这里只有java后台代码签名工具类 import java.security.MessageDigest; import java.security.NoSuchAlgorithmE ...
微信js sdk 分享失败有时候好有时候坏
微信js sdk 分享失败有时候好有时候坏用了一个www开头的域名和一个xx.com的域名两个在解析上有问题. 实践是www.xx.com的比较稳定转载于:https://www.c ...
微信内 H5 页面自定义分享
起源: 最近公司在做一个活动的h5页面,在微信内打开时需要进行微信授权,然后后端会重定向到这个页面并且携带了一些参数(openid等).问题是点击微信的原生分享时,会把携带的这些参数一起分享出去,等于 ...
使用微信js sdk关于选择及上传图片至腾讯云COS
使用微信js sdk关于选择及上传图片至腾讯云COS 使用微信js sdk关于选择及上传图片至腾讯云COS 背景名词参考效果图展示开发步骤 1:概要步骤 2:上代码结束: 使用微信js sd ...
微信js sdk 授权上传头像下载代码片段和注意事项
/* * 描述:当前页授权 * @param url 例:index.html / 如果有参数,需加密index.html?id=1 */ 1.对需要运用js sdk的页面授权 get ...
微信转发链接不显示图片和描述文字
微信转发链接不显示图片和描述文字,只显示标题. 如果你觉得排除了代码的错误. 那就可能是因为没有绑定正确的公众号$appid和$appsecret 不清楚,之前的微信链发代码,是不是需要这两样,现在是 ...
微信JS SDK开放，前端开发者“鸡冻”了！
HTML5又一次逆袭了,其实之前微信也是有一些JS API的,比如分享.但这次一股脑开放了拍摄.录音.语音识别.二维码.地图.支付.分享.卡券等几十个API,这条消息不需宣传,瞬间就占满了HTML5从 ...
微信小程序之——自定义分享按钮（完整版）
声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: ' ...
微信分享带图片，描述（php版）
最近在为一个php网站添加微信分享带图片,描述的功能,这个功能之前了解过,但并没有彻底实现过,这个功能需要认证的公众号支持. 第一步:在已经认证的公众号配置安全域名(网上很多教程) 第二步:在微信公众 ...

微信js-sdk 微信自定义分享显示图片和描述不显示

微信js-sdk 微信自定义分享显示图片和描述不显示相关推荐

最新文章

热门文章