微信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分享 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