微信转发或分享朋友圈带缩略图、标题和描述的实现方法

微信转发或分享朋友圈带缩略图、标题和描述的实现方法

问题描述：

1. 微信公众号中（页面均用vue），分享出去的页面，二次分享不能获取缩略和描述；
2. 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({

4000
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），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

2.在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:'普惠金服',
desc:'政府牵头推动成立的惠民金融平台',
share_url:location.href,
share_img:'http://file.puhuijinfu.com/imgLoader/test/phjf/img/2018/10/11/xyswkVTROKdq1xBzEYMB.jpeg'
},

//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);
});
},

注意：

1. 特别注意，需要在公众号中添加js安全域名。开发公众号中，好像只能添加一个；生产公众号，最多可以添加3个。 不加安全域名，会报错的。
2. 特别注意url需要动态获取，传递给后台，否则会报错。因为二次分享的时候，微信会自动在url后面追加一串。如果不传递，就会造成url不对，那么签名就不正确

参考链接
静态页面实现微信分享带缩略图、标题和描述
微信转发或分享朋友圈带缩略图、标题和描述的实现方法
微信分享链接出现config:invalid signature错误的解决方法