【移动应用开发技术】微信转发或分享朋友圈带缩略图、标题和描述的实现方法

【移动应用开发技术】微信转发或分享朋友圈带缩略图、标题和描述的实现方法

微信公众号中（页面均用vue），分享出去的页面，二次分享不能获取缩略和描述；APP内嵌的H5页面（有用vue写的页面，也有jsp页面），分享给好友或朋友圈，二次分享不能获取缩略和描述；问题思考：百度总结，发现网友贡献最多的就是在body之后加一个img标签并且设置display:none,虽然这种方法感觉不科学，但我还是尝试了一下，发现在微信6.5.5版本之后已经失效了。分享只能通过设置微信的分享接口来实现缩略图和简介的调用，接通jssdk。不管是微信公众号中分享的内容还是普通的H5页面都需要微信签名验证的。解决方案1.在jsp页面中页面引入<script

src="/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:

'/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中设置安装微信sdknpminstallweixin-js-sdk在需要用到分享的页面，引入sdkimport

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:'/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);

/