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