微信转发或分享朋友圈带缩略图、标题和描述的实现方法
问题描述:
微信公众号中(页面均用vue),分享出去的页面,二次分享不能获取缩略和描述;
创新互联主营林州网站建设的网络公司,主营网站建设方案,成都App制作,林州h5小程序开发搭建,林州网站营销推广欢迎林州等地区企业咨询
APP内嵌的H5页面(有用vue写的页面,也有jsp页面),分享给好友或朋友圈,二次分享不能获取缩略和描述;
问题思考:
百度总结,发现网友贡献最多的就是在body之后加一个img标签并且设置display:none,虽然这种方法感觉不科学,但我还是尝试了一下,发现在微信6.5.5版本之后已经失效了。分享只能通过设置微信的分享接口来实现缩略图和简介的调用,接通jssdk。
不管是微信公众号中分享的内容 还是 普通的H5页面 都需要微信签名验证的。
解决方案
1.在jsp页面中
页面引入
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
网页标题:微信转发或分享朋友圈带缩略图、标题和描述的实现方法
网页网址:http://myzitong.com/article/gisoji.html