微信轉(zhuǎn)發(fā)或分享朋友圈帶縮略圖、標(biāo)題和描述的實(shí)現(xiàn)方法

問題描述：

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

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

問題思考：

百度總結(jié)，發(fā)現(xiàn)網(wǎng)友貢獻(xiàn)最多的就是在body之后加一個(gè)img標(biāo)簽并且設(shè)置display:none,雖然這種方法感覺不科學(xué)，但我還是嘗試了一下，發(fā)現(xiàn)在微信6.5.5版本之后已經(jīng)失效了。分享只能通過設(shè)置微信的分享接口來實(shí)現(xiàn)縮略圖和簡介的調(diào)用，接通jssdk。

不管是微信公眾號(hào)中分享的內(nèi)容 還是 普通的H5頁面 都需要微信簽名驗(yàn)證的。

解決方案

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內(nèi)容為：

$(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,?//?開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
????????????appId:?appId,?//?必填，公眾號(hào)的唯一標(biāo)識(shí)
????????????timestamp:?timestamp,?//?必填，生成簽名的時(shí)間戳
????????????nonceStr:?nonceStr,?//?必填，生成簽名的隨機(jī)串
????????????signature:?signature,//?必填，簽名，見附錄1
????????????jsApiList:?["onMenuShareTimeline",?"onMenuShareAppMessage",?"onMenuShareQQ"?,?"onMenuShareWeibo"]?//?必填，需要使用的JS接口列表，所有JS接口列表見附錄2
????????});
?
????????wx.ready(function(){
????????????var?shareData?=?{
????????????????title:?document.title,
????????????????desc:?'政府牽頭推動(dòng)成立的惠民金融平臺(tái)',
????????????????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是動(dòng)態(tài)獲取的，動(dòng)態(tài)頁面可參見實(shí)例代碼中php的實(shí)現(xiàn)方式。如果是html的靜態(tài)頁面在前端通過ajax將url傳到后臺(tái)簽名，前端需要用js獲取當(dāng)前頁面除去’#‘hash部分的鏈接（可用location.href.split(’#’)[0]獲取,而且需要encodeURIComponent），因?yàn)轫撁嬉坏┓窒?，微信客戶端?huì)在你的鏈接末尾加入其它參數(shù)，如果不是動(dòng)態(tài)獲取當(dāng)前鏈接，將導(dǎo)致分享后的頁面簽名失敗。

在vue中設(shè)置

安裝微信sdk

npm install weixin-js-sdk

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

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

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

//獲取分享配置
??????????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,//生產(chǎn)環(huán)境需要關(guān)閉debug模式
??????????????????????????appId:?result.appId,//appId通過微信服務(wù)號(hào)后臺(tái)查看
??????????????????????????timestamp:?result.timestamp,//生成簽名的時(shí)間戳
??????????????????????????nonceStr:?result.nonceStr,//生成簽名的隨機(jī)字符串
??????????????????????????signature:?result.signature,//簽名
??????????????????????????jsApiList:?[
??????????????????????????????'onMenuShareTimeline','onMenuShareAppMessage'
??????????????????????????]
??????????????????????});
??????????????????}else{
??????????????????????_this.$message({
??????????????????????????message:?response.msg,
??????????????????????????center:?true,
??????????????????????????duration:2000,
??????????????????????????customClass:'mesTip'
??????????????????????});
??????????????????}
??????????????})
??????????},

在頁面的methods中，加上shareWeChat方法，
data中的數(shù)據(jù)

//======data中的數(shù)據(jù)
shareConfig:{
??????????????????title:'GetwxLink',
??????????????????desc:'GetwxLink',
??????????????????share_url:location.href,
??????????????????share_img:'http://www.gettool.cn/GetwxLink/'
????????????????},
?
//methods方法
//設(shè)置微信分享
??????????shareWeChat(){
??????????????let?share_title?=?this.shareConfig.title;
??????????????let?_this?=?this;
??????????????var?config?=?{
??????????????????title:?share_title,?//?分享標(biāo)題
??????????????????desc:_this.shareConfig.desc,
??????????????????link:?_this.shareConfig.share_url,?//?分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)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);
??????????????});
??????????},

注意：

特別注意，需要在公眾號(hào)中添加js安全域名。開發(fā)公眾號(hào)中，好像只能添加一個(gè)；生產(chǎn)公眾號(hào)，最多可以添加3個(gè)。 不加安全域名，會(huì)報(bào)錯(cuò)的。

特別注意url需要?jiǎng)討B(tài)獲取，傳遞給后臺(tái)，否則會(huì)報(bào)錯(cuò)。因?yàn)槎畏窒淼臅r(shí)候，微信會(huì)自動(dòng)在url后面追加一串。如果不傳遞，就會(huì)造成url不對(duì)，那么簽名就不正確

GetwxLink