起因

微信分享網址時無法分享圖片，這個問題需要用jssdk去解決。其實開始的時候時可以看到圖片的，但后來微信禁止了。所以只能使用jssdk去解決。
普通網頁開發很簡單，但是使用vue或其他前端框架開發spa單頁面webapp的時候就會有問題了。只要url發生變化就會報簽名錯誤。其實微信官方上已經寫了說明。

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。
但這些說明然并卵（然而并沒有什么卵用）。

問題根源

1 同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用
如果你的鏈接時采用hash方式，錨點變了也要重新調用，因為url發生了變化，這一點可以放在router的監聽事件中比如watch一下$route,或者使用2.2 中引入的 beforeRouteUpdate 守衛。

2 生成簽名時url中不能包含錨點
微信jssdk的簽名是需要服務端來生成的，所以我們需要將當前頁面的網址傳遞給服務端，由服務端生成wx.config初始化所需要的參數。
但是url傳遞的時候需要注意，一定一定一定不能帶有錨點鏈接。可以使用location.href.split(‘#')[0]獲取url中錨點之前的部分。
比如你的網址是http://domain.com/index.html#/food/1
你只需要把http://domain.com/index.html傳遞到服務端，讓服務端生成簽名就可以了，你在調用jssdk的時候可以把url后面添加錨點鏈接。

實例

安裝jssdk

npm install weixin-js-sdk --save

 前段代碼

export default {  mounted() {   this.$nextTick(function () {    this.getConfig()   })  },  data () {   return {    detail: [],   }  },  methods: {      // 微信分參數   getConfig() {     let url = location.href.split('#')[0] //獲取錨點之前的鏈接    this.$http.get('/index.php',{     params: {      url: url     }    }).then(response => {      let res = response.data;      this.wxInit(res);     })   },   // 微信分享   wxInit(res) {    let url = location.href.split('#')[0] //獲取錨點之前的鏈接     let links = url+'#/Food/' + this.$route.params.id;    let title = this.detail.name + '-嘌呤查';    let desc = '了解更多知識，請關注“嘌呤查”公眾號';    let imgUrl = this.thumb;    wx.config({     debug: false,     appId: res.appId,     timestamp: res.timestamp,     nonceStr: res.nonceStr,     signature: res.signature,     jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']    });    wx.ready(function() {     wx.onMenuShareTimeline({      title: title, // 分享標題      desc: desc, // 分享描述      link: links, // 分享鏈接      imgUrl: imgUrl, // 分享圖標      success: function() {//        alert("分享到朋友圈成功")       //Toast({        //message: "成功分享到朋友圈"       //});      },      cancel: function() {//        alert("分享失敗,您取消了分享!")       //Toast({        //message: "分享失敗,您取消了分享!"       //});      }     });     //微信分享菜單測試     wx.onMenuShareAppMessage({      title: title, // 分享標題      desc: desc, // 分享描述      link: links, // 分享鏈接      imgUrl: imgUrl, // 分享圖標      success: function() {       // alert("成功分享給朋友")//       Toast({//        message: "成功分享給朋友"http://       });      },      cancel: function() {       // alert("分享失敗,您取消了分享!")//       Toast({//        message: "分享失敗,您取消了分享!"http://       });      }     });     wx.onMenuShareQQ({      title: title, // 分享標題      desc: desc, // 分享描述      link: links, // 分享鏈接      imgUrl: imgUrl, // 分享圖標      success: function() {       // alert("成功分享給QQ")//       Toast({//        message: "成功分享到QQ"http://       });      },      cancel: function() {       // alert("分享失敗,您取消了分享!")//       Toast({//        message: "分享失敗,您取消了分享!"http://       });      }     });     wx.onMenuShareWeibo({      title: title, // 分享標題      desc: desc, // 分享描述      link: links, // 分享鏈接      imgUrl: imgUrl, // 分享圖標      success: function() {       // alert("成功分享給朋友")//       Toast({//        message: "成功分享到騰訊微博"http://       });      },      cancel: function() {       // alert("分享失敗,您取消了分享!")//       Toast({//        message: "分享失敗,您取消了分享!"http://       });      }     });     wx.onMenuShareQZone({      title: title, // 分享標題      desc: desc, // 分享描述      link: links, // 分享鏈接      imgUrl: imgUrl, // 分享圖標      success: function() {       // alert("成功分享給朋友")//       Toast({//        message: "成功分享到QQ空間"http://       });      },      cancel: function() {       // alert("分享失敗,您取消了分享!")//       Toast({//        message: "分享失敗,您取消了分享!"http://       });      }     });    });    wx.error(function(err) {     alert(JSON.stringify(err))    });   }  } }