问 :
在 微信 里向朋友分享网页链接时，总会看到一个可点击的包含链接相关信息的卡片，上面有链接内容的 标题、描述 和 图片，这三者前端 能否 不借助其他工具自行设置呢？
具体 如何在页面里写代码控制该页面在微信里被分享时显示的相关信息呢？
答 :
针对 从微信内部分享出去 的链接（具体操作为：浏览页面时，通过右上角 三个点 的菜单按钮，调出下方菜单，将页面分享出去）：
- 标题
title能
链接信息里，标题会自动获取该链接页面<head>标签内的 title 信息：
<title>文章标题/页面标题</title>
- 图片
img能
链接信息右侧有一张缩略图，微信的机制是获取页面中第一张 300×300 以上的 可见图片：
- 图片大小在 300px x 300px 以上，为了效果好，最好是正方形；
- 图片本身要是 可见 的，但是如果不想在页面中展示这张图片，可以在图片外层包一个 div，将其设置为隐藏。
<div style="display:none;">
<img src="share.png">
</div>
- 描述
desc不能
链接信息标题下方是网页描述，这一块内容在微信里默认显示为网页的链接地址：
e.g.https://www.google.com/
并且无法通过前端人员自主在页面中编写 html，js 等修改，只能借助微信提供的 微信JS-SDK 才能实现对描述内容的自定义。具体 实现方法 请继续往下阅读。
PS：如果是在 QQ 里对网页进行分享的话，对于描述内容可以通过<meta>标签进行设置：
<meta name="description" content="在 QQ 里分享链接，链接的描述默认选用这个标签的 content 内容">
问 :
如何使用微信提供的 JS-SDK 来自定义网页被分享时显示的信息（标题、描述 和 图片）？
答 :
官方说明文档：微信JS-SDK说明文档
按照官方的步骤做下来就可以，我整理的需要放在页面里的代码如下：
注意事项：
wx.config那里，需要一些敏感信息，由后端人员来计算输出最好，因此整个项目代码都是放在后端那里的；- 我将下面的代码放在
html中，这样的话后端可以在里面写代码，下面的{$variable}都是后端的变量；- 分享图标或者说分享链接要展示的图片地址，我使用相对地址不行，所以使用了绝对地址；
- 如果
wx.config信息啥的都没问题，但是浏览器 console 里没有 log 信息，可以尝试清空浏览器缓存。
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
wx.config({
debug: true,
appId: '{$appId}',
timestamp: {$timestamp},
nonceStr: '{$nonceStr}',
signature: '{$signature}',
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
});
wx.ready(function() {
console.log('weixin 验证成功');
wx.onMenuShareTimeline({
title: '标题',
link: '',
imgUrl: '{$img_host}/path/to/share/image/share.png',
success: function() {
},
cancel: function() {
}
});
wx.onMenuShareAppMessage({
title: '标题',
desc: '描述',
link: '',
imgUrl: '{$img_host}/path/to/share/image/share.png',
type: '',
dataUrl: '',
success: function() {
},
cancel: function() {
}
});
wx.onMenuShareQQ({
title: '标题',
desc: '描述',
link: '',
imgUrl: '{$img_host}/path/to/share/image/share.png',
success: function() {
},
cancel: function() {
}
});
wx.onMenuShareWeibo({
title: '标题',
desc: '描述',
link: '',
imgUrl: '{$img_host}/path/to/share/image/share.png',
success: function() {
},
cancel: function() {
}
});
wx.onMenuShareQZone({
title: '标题',
desc: '描述',
link: '',
imgUrl: '{$img_host}/path/to/share/image/share.png',
success: function() {
},
cancel: function() {
}
});
});
wx.error(function(res) {
console.log('weixin 验证失败');
console.log(res);
});
</script>
问 :
那 qq 里分享网页呢？标题、描述 和 图片 怎么设置？
答 :
<meta itemprop="name" content="这是分享的标题"/>
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png" />
<meta name="description" itemprop="description" content="这是要分享的内容" />
其他问题
问：直接在卡片上长按进行转发的话，缩略图信息会失效？
答：参考 微信分享给朋友的链接，再次被好友转发之后，分享链接的图标不见了，怎么解决？求赐教！
原创文章，作者：Carrie001128，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/244673.html