微信轉發或分享朋友圈帶縮略圖、標題和描述的實現方法

問題描述：

1. 微信公眾號中（頁面均用vue），分享出去的頁面，二次分享不能獲取縮略和描述；

APP內嵌的H5頁面（有用vue寫的頁面，也有jsp頁面），分享給好友或朋友圈，二次分享不能獲取縮略和描述；

問題思考：

百度總結，發現網友貢獻最多的就是在body之后加一個img標簽并且設置display:none,雖然這種方法感覺不科學，但我還是嘗試了一下，發現在微信6.5.5版本之后已經失效了。分享只能通過設置微信的分享接口來實現縮略圖和簡介的調用，接通jssdk。

不管是微信公眾號中分享的內容 還是 普通的H5頁面 都需要微信簽名驗證的。

解決方案

1.在jsp頁面中

頁面引入

<script?src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script?src="/js/common/shareJssdk.js"></script>

shareJssdk.js內容為：

$(function(){
????var?url?=?encodeURIComponent(location.href.split('#')[0]);
????//分享
????$.ajax({
????????type?:?"get",
????????url?:?"/phjf/api/v1/sys/getJssdkSgin",
????????dataType?:?"json",
????????data:{
????????????url:url
????????},
????????success?:?function(result){
????????????wxstart(result.data);
????????},
????????error:function(data){
????????????alert("連接失敗！");
????????}
????});
?
????function?wxstart(data){
????????var?url?=?location.href;??//分享的文章地址
????????var?appId?=?data.appId;
????????var?timestamp?=?data.timestamp;
????????var?nonceStr?=?data.nonceStr;
????????var?signature?=?data.signature;
????????wx.config({
????????????debug:?false,?//?開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
????????????appId:?appId,?//?必填，公眾號的唯一標識
????????????timestamp:?timestamp,?//?必填，生成簽名的時間戳
????????????nonceStr:?nonceStr,?//?必填，生成簽名的隨機串
????????????signature:?signature,//?必填，簽名，見附錄1
????????????jsApiList:?["onMenuShareTimeline",?"onMenuShareAppMessage",?"onMenuShareQQ"?,?"onMenuShareWeibo"]?//?必填，需要使用的JS接口列表，所有JS接口列表見附錄2
????????});
?
????????wx.ready(function(){
????????????var?shareData?=?{
????????????????title:?document.title,
????????????????desc:?'政府牽頭推動成立的惠民金融平臺',
????????????????link:?location.href,
????????????????imgUrl:?'http://file.puhuijinfu.com/imgLoader/test/phjf/img/2018/10/11/xyswkVTROKdq1xBzEYMB.jpeg'
????????????};
????????????wx.onMenuShareAppMessage(shareData);
????????????wx.onMenuShareTimeline(shareData);
????????????wx.onMenuShareQQ(shareData);
????????????wx.onMenuShareWeibo(shareData);
????????});
????}
})

確保你獲取用來簽名的url是動態獲取的，動態頁面可參見實例代碼中php的實現方式。如果是html的靜態頁面在前端通過ajax將url傳到后臺簽名，前端需要用js獲取當前頁面除去’#‘hash部分的鏈接（可用location.href.split(’#’)[0]獲取,而且需要encodeURIComponent），因為頁面一旦分享，微信客戶端會在你的鏈接末尾加入其它參數，如果不是動態獲取當前鏈接，將導致分享后的頁面簽名失敗。

在vue中設置

安裝微信sdk

npm install weixin-js-sdk

在需要用到分享的頁面，引入sdk

import?wx?from?'weixin-js-sdk';

在App.vued的，methods方法中加入這個公用方法

//獲取分享配置
??????????jssdkSgin(){????????????
??????????????var?_this?=?this;
??????????????var?url?=?encodeURIComponent(location.href.split('#')[0]);?
??????????????Http.getJssdkSgin(url).then(response?=>?{
??????????????????var?result?=?response.data;
??????????????????if(response.code?==?1)?{
??????????????????????followUrl?=??result.followUrl;
??????????????????????localStorage.setItem('followUrl',result.followUrl);
??????????????????????wx.config({
??????????????????????????debug:?false,//生產環境需要關閉debug模式
??????????????????????????appId:?result.appId,//appId通過微信服務號后臺查看
??????????????????????????timestamp:?result.timestamp,//生成簽名的時間戳
??????????????????????????nonceStr:?result.nonceStr,//生成簽名的隨機字符串
??????????????????????????signature:?result.signature,//簽名
??????????????????????????jsApiList:?[
??????????????????????????????'onMenuShareTimeline','onMenuShareAppMessage'
??????????????????????????]
??????????????????????});
??????????????????}else{
??????????????????????_this.$message({
??????????????????????????message:?response.msg,
??????????????????????????center:?true,
??????????????????????????duration:2000,
??????????????????????????customClass:'mesTip'
??????????????????????});
??????????????????}
??????????????})
??????????},

在頁面的methods中，加上shareWeChat方法，
data中的數據

//======data中的數據
shareConfig:{
??????????????????title:'GetwxLink',
??????????????????desc:'GetwxLink',
??????????????????share_url:location.href,
??????????????????share_img:'http://www.gettool.cn/GetwxLink/'
????????????????},
?
//methods方法
//設置微信分享
??????????shareWeChat(){
??????????????let?share_title?=?this.shareConfig.title;
??????????????let?_this?=?this;
??????????????var?config?=?{
??????????????????title:?share_title,?//?分享標題
??????????????????desc:_this.shareConfig.desc,
??????????????????link:?_this.shareConfig.share_url,?//?分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
??????????????????imgUrl:?_this.shareConfig.share_img,
??????????????????type:'link',
??????????????????success:?function()?{
??????????????????????console.log("success")
??????????????????},
??????????????????cancel:?function()?{
??????????????????????console.log("failf")
??????????????????}
??????????????};
??????????????wx.ready(function?()?{
??????????????????//?分享到朋友圈
??????????????????wx.onMenuShareTimeline(config);
??????????????????//分享給朋友
??????????????????wx.onMenuShareAppMessage(config);
??????????????});
??????????},

注意：

特別注意，需要在公眾號中添加js安全域名。開發公眾號中，好像只能添加一個；生產公眾號，最多可以添加3個。 不加安全域名，會報錯的。

特別注意url需要動態獲取，傳遞給后臺，否則會報錯。因為二次分享的時候，微信會自動在url后面追加一串。如果不傳遞，就會造成url不對，那么簽名就不正確

GetwxLink