在 微信 里向朋友分享网页链接时，
标题、描述 和 图片，
这三者前端 能否 不借助其他工具自行设置呢？
具体 如何在页面里写代码控制该页面在微信里被分享时显示的相关信息呢？

如下图，在微信分享的过程

在这里插入图片描述

实现过程

1.标题

链接信息里，标题会自动获取该链接页面 <head> 标签内的 title 信息<title>文章标题/页面标题</title>

2.图片

链接信息右侧有一张缩略图，微信的机制是获取页面中第一张 300x300 以上的 可见图片

图片大小在 300px x 300px 以上，为了效果好，最好是正方形
图片本身要是 可见 的，但是如果不想在页面中展示这张图片，可以在图片外层包一个 div，将其设置为隐藏。<div style="display:none;"><img src="share.png">
</div>

3.描述

decs 不能
微信不能

微信JS-SDK可以自定义

注意事项：

wx.config 那里，需要一些敏感信息，由后端人员来计算输出最好，因此整个项目代码都是放在后端那里的；我将下面的代码放在 html 中，这样的话后端可以在里面写代码，下面的 {$variable} 都是后端的变量；分享图标或者说分享链接要展示的图片地址，我使用相对地址不行，所以使用了绝对地址；如果 wx.config 信息啥的都没问题，但是浏览器 console 里没有 log 信息，可以尝试清空浏览器缓存。

<!-- index.html --><!-- 微信 JS-SDK -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '{$appId}', // 必填，公众号的唯一标识timestamp: {$timestamp}, // 必填，生成签名的时间戳nonceStr: '{$nonceStr}', // 必填，生成签名的随机串signature: '{$signature}', // 必填，签名，见附录1jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});wx.ready(function() {// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。console.log('weixin 验证成功');// 分享到朋友圈wx.onMenuShareTimeline({title: '标题', // 分享标题link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标success: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});// 分享给朋友wx.onMenuShareAppMessage({title: '标题', // 分享标题desc: '描述', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标type: '', // 分享类型,music、video或link，不填默认为linkdataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空success: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});// 分享到QQwx.onMenuShareQQ({title: '标题', // 分享标题desc: '描述', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标success: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});// 分享到腾讯微博wx.onMenuShareWeibo({title: '标题', // 分享标题desc: '描述', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标success: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});// 分享到QQ空间wx.onMenuShareQZone({title: '标题', // 分享标题desc: '描述', // 分享描述link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: '{$img_host}/path/to/share/image/share.png', // 分享图标success: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});
});wx.error(function(res) {// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。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="这是要分享的内容" />

meta标签分享

在<head></head>标签内加上一个meta标签<meta name="sharecontent" data-msg-img="你的缩略图地址" data-msg-title="你的标题" data-msg-content="你的简介" data-msg-callBack="" data-line-img="你的缩略图地址" data-line-title="你的标题" data-line-callBack=""/>interface TKDProps {title?: string;keywords?: string;description?: string;share?: {img?: string;title?: string;content?: string;callBack?: string;};
}<Helmet>{title && <title>{title}</title>}{keywords && (<meta name="keywords" content={keywords.replace(/[，、]/g, ',')} />)}{description && <meta name="description" content={description} />}<metaname="sharecontent"data-msg-img={shareImg}data-msg-title={shareTitle}data-msg-content={shareContent}data-msg-callback={shareCallBack}data-line-img={shareImg}data-line-title={shareTitle}data-line-callback={shareCallBack}/></Helmet>