100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信js-sdk 微信自定义分享显示图片和描述不显示

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

时间:2020-04-21 08:37:19

相关推荐

微信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./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('/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./wiki?t=resource/res_main&id=mp1421141115附录5-常见错误及解决方法 这里微信有说明。官网帮你找问题。哈哈哈

/q/1010000002520634

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。