微信分享的内容,从视觉上看有三个部分:标题、描述、图片。
如果不使用微信的 jssdk 进行订制的话,微信会截取一张大概 300*300 并且距离<body>
标签最近的一张图片作为需要的图片;标题会选取<title></title>
中的内容;描述则会是该页面的 URL。
声明:2017年3月29日,微信宣布未接入 JSSDK 的网站将统一显示默认缩略图
所以在某些时候,订制内容是极为必要的。
需要做的事情也很简单
首先需要和微信服务器交互以获得以下字段,这些字段通常由服务端获取并传递给前端:appId
公众号的唯一标识timestamp
生成签名的时间戳nonceStr
生成签名的随机串signature
签名(获取签名比获取其他字段稍微麻烦一点)
获取了之后,在你的<script></script>标签中写如下的代码
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: yourAppId, // 必填,公众号的唯一标识
timestamp: yourtimestamp, // 必填,生成签名的时间戳
nonceStr: yournonceStr, // 必填,生成签名的随机串
signature: yoursignature,// 必填,签名
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
] // 必填,需要使用的JS接口列表(此处接入了四个用于分享的接口),所有JS接口列表见官方文档
});
window.share_config = {
"share": {
"title" : '',//分享卡片标题
"desc" : " ",//摘要,只有发给朋友才显示摘要。
"imgUrl": '',//分享图,默认当相对路径处理,所以使用绝对路径的的话,“http://”协议前缀必须在。
"link": window.location.href,//分享出去后的链接,这里可以将链接设置为另一个页面。
"success":function(){
//分享成功后的回调函数
},
'cancel': function () {
// 用户取消分享后执行的回调函数
}
}
};
wx.ready(function () {
wx.onMenuShareAppMessage(share_config.share);//分享给好友
wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
wx.onMenuShareQQ(share_config.share);//分享给手机QQ
wx.onMenuShareWeibo(share_config.share);//分享给微博
});
把以上代码写进去就 ok 啦,
参考文章:
官方文档:http://mp.weixin.qq.com/wiki/...
http://meiminjun.github.io/20...
http://chitanda.me/2015/06/19...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。